Lier Modèle Mvc en utilisant html <select> tag

j'ai une liste déroulante, cette liste de lier la valeur à l'aide de appel ajax

<script type="text/javascript">
function getCityName(data) {
    $('#ddlCity').empty();
    if (data != 0) {
        $.ajax({
            type: "POST",
            url: "/Home/GetCityList",
            data: { 'CityId': data },
            cache: false,
            //contentType: "application/json",
            datatype: "JSON",
            success: function (result) {
                var cityData = result.Data;
                var defaultV = new Option("--Select--", 0, true);
                $('#ddlCity').append(defaultV);
                for (var i = 0; i < cityData.length; i++) {
                    var opt = new Option(cityData[i].CityName, cityData[i].Id);
                    $('#ddlCity').append(opt);
                }
            }
        });
    }
    else {
        alert('Select State');
    }
}

<div>@Html.LabelFor(c => c.CityId)</div>
<div><select id="ddlCity"></select></div>

entendre je veux lier modèle prop CityId dans le modèle de la classe de façon à lier...

  • Votre <select> élément a besoin d'un name attribut pour correspondre le modèle de la propriété. Ne pas générer manuellement. Utiliser le DropDownListFor() méthode
  • sortie de flux de données json et comment lier dans DropDownListFor()
  • Pourquoi dans le monde, êtes-vous d'utiliser ajax pour cela si c'est la seule dropdownlist dans la vue. Vous n'avez pas de liaison de modèle et pas de validation. Toutefois, si c'est pour en cascade dropdownlists, puis reportez-vous à ce DotNetFiddle
  • Comment faites-vous appel à getCityName, est-il un bouton ou quelque chose?
  • pas touche, c'est l'événement de la liste déroulante onchange()
InformationsquelleAutor Naimish Mungara | 2016-12-21
  1. 5

    élément a besoin d'un nom d'attribut pour correspondre le modèle de la propriété.
    ajouter CityId dans l'attribut name de la balise select:

    <div><select id="ddlCity" name = "CityId"></select></div>
    • ajouter @Html.NameFor(x=>x.Propriété d'entité) balise de valeur lier dans le modèle..
    InformationsquelleAutor Jaimin Dave
  2. 1

    la <select> balise besoin MVC Nom de la propriété à ajouter,
    @Html.NameFor(x=>x.Entity Property) et le nom de la propriété valeur de liaison dans le modèle.
    code html ci-dessous :

    <div><select id="ddlCity" name="@Html.NameFor(c=>c.CityId)"></select></div>

    merci de répondre pour répondre à cette question.

    InformationsquelleAutor Naimish Mungara
  3. 0

    Ci-dessous est l'exemple-

    <div class="col-sm-6">
                <div class="form-group formMain required">
                    <label asp-for="CountryId" class="col-sm-4 control-label mandatory"></label>
                    <div class="col-sm-8">
                        <select asp-for="CountryId" asp-items="Model.CountryList"></select> 
                        <span asp-validation-for="CountryId" class="text-danger"></span>
                    </div>
               </div>
            </div>

    Où "CountryList' qui est passée d'une ViewModel de la propriété et de "CountryId' est le champ utilisé pour enregistrer la valeur dans la table de base de données.

    • Oui, c'est une très belle explication de la façon dont vous pouvez lier une liste de sélection dans MVC 5, mais quel est le rapport à l'OP JavaScript chargé de la question?
    InformationsquelleAutor Avinash Vyas
  4. 0

    Si vous êtes certain que vous voulez remplir cette liste déroulante à l'aide de JavaScript, vous aurez besoin de passer le modèle de la valeur à JavaScript et à tester si il est sélectionné.

    Donc quelque chose comme ceci:

    var cityId = @Model.CityId;

//...

        var defaultSelected = cityId == 0;
        var defaultV = new Option("--Select--", 0, defaultSelected);

        //...

        for (var i = 0; i < cityData.length; i++) {             
            var thisCitySelected = cityData[i].Id == cityId;
            var opt = new Option(cityData[i].CityName, cityData[i].Id, thisCitySelected);
            $('#ddlCity').append(opt);
        }

    En dehors de cela, si vous voulez la liaison de travailler sur sumbitting l'contenant le formulaire, vous aurez à donner à l'élément d'entrée d'un nom:

    <div><select id="ddlCity" name="ddlCity"></select></div>
    • Ce n'est pas lier le CityId valeur, il ne sélectionne une option dans la liste déroulante, si un CityId valeur existe dans le modèle. Je suis sûr que, depuis qu'il à l'aide d'une sélection, qu'il veut à l'utilisateur d'être en mesure de "sélectionner" (changer) d'une valeur et d'être lié à la valeur sélectionnée (CityId) dans le modèle.
    • Oui, bien sûr, j'ai édité que dans. Merci. Mais dans le but d'imiter un Html.DropDownListFor() vous devez également sélectionner l'élément sélectionné.
    InformationsquelleAutor CodeCaster
  5. 0

    Voici comment j'allais le faire:

    Je voudrais oublier l'ajax que vous êtes en train d'utiliser et d'utiliser @Ajax.BeginForm et @Html.DropDownListFor.

    Je suis en supposant que vous êtes en essayant de la chaîne des listes de sélection lorsque l'utilisateur sélectionne un état et qu'il remplit les villes dans cet état.

    D'abord, vous aurez besoin de vos modèles, l'un pour la vue principale et un pour la partie que nous allons avoir besoin:

    MainViewModel:

    List<CityData> CityDatas;
Int SelectedCity;
List<StateData> StateDatas;
Int SelectedState;

    PartialViewModel:

    List<CityData> CityDatas;
Int SelectedCity;

    Ensuite, vous aurez besoin de lier des données à partir de votre modèle de votre point de vue (je suis en supposant que les données de l'état existe lorsque vous devez d'abord charger votre vue principale):

    @Ajax.BeginForm("GetCityList", New AjaxOptions() { UpdateTargetId = "CityData", InsertionMode = InsertionMode.Replace, HttpMethod = "Get" })
{
    @Html.DropDownListFor(x => x.SelectedState, new SelectList(Model.StateDatas, "StateId", "State"), new { @class = "form-control", id = "ddlState", onchange = "$(this.form).submit();" })
}
<div id="CityData">
    @Html.Partial("_CityDataPartialView", new PartialViewModel( CityDatas = Model.CityDatas, SelectedCity = Model.SelectedCity))
</div>

    Avis de la façon dont j'ai la liste déroulante des villes dans une vue partielle, c'est afin que nous puissions mettre à jour la liste déroulante à l'aide d'Ajax avec un ActionResult dans le contrôleur qui renvoie cette vue partielle avec un List<CityData> et et Intcomme son modèle:

    Public ActionResult GetCityList(int SelectedState) {
    //Get the data for the cities and put it in the model, which is a list of CityData
    List<CityDatas> Data = Context.From.Database.Or.Wherever.Using.SelectedState;
    Int selected = 0; //Here you can pre-select a city if you want
    return ParitalView("_CityDataPartialView", new PartialViewModel( CityDatas = Data, SelectedCity = selected));
}

    Et puis ne pas oublier de créer le "_CityDataPartialView" vue partielle qui prend un List<CityData> et un Int comme son modèle:

    @model PartialViewModel
@Html.DropDownListFor(x => x.SelectedCity, new SelectList(Model.CityDatas, "Id", "CityName"), new { @class = "form-control", id = "ddlCity" })

    Maintenant, lorsque vous sélectionnez un état, il va effectuer un appel Ajax pour obtenir les villes et mise à jour de la vue partielle qui contient la liste déroulante des villes et tout ce qui sera lié au modèle => les états, l'état sélectionné, les villes, la ville sélectionnée.

    N'oubliez pas d'envoyer un new List<CityData>()pour CityDatas lorsque vous chargez d'abord le modèle de la vue principale ou ça vous donne une erreur.

    Aussi, vous avez besoin d'avoir UnobtrusiveJavaScriptEnabled définie sur true dans votre configuration web:

    <appSettings>
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>

    ...et aussi avoir jquery.unobtrusive-ajax.js référencé... ou aucun des @Ajax choses fonctionnent.

    Cela n'a pas été testé, mais éventuellement avec de légers ajustements que cela va fonctionner.

    InformationsquelleAutor Barry Franklin