web-dev-qa-db-fra.com

Remplissage du menu déroulant avec résultat JSON - Cascading DropDown utilisant MVC3, JQuery, Ajax, JSON

J'ai un drop-drown en cascade en utilisant MVC. Quelque chose comme, si vous sélectionnez un pays dans la première liste déroulante, les États de ce pays dans le second devraient être remplis en conséquence.

Pour le moment, tout semble aller pour le mieux et je reçois une réponse de Json (vue avec des outils F12), et cela ressemble à [{ "stateId":"01", "StateName": "arizona" } , { "stateId" : "02", "StateName":"California" }, etc..] ..

J'aimerais savoir comment renseigner mon second-dropdown avec ces données. Le deuxième identifiant de ma liste déroulante est "StateID". Toute aide serait grandement appréciée. 

Vous trouverez ci-dessous le code utilisé pour produire la réponse JSON à partir du serveur:

[HttpPost]
public JsonResult GetStates(string CountryID)
{
    using (mdb)
    {
        var statesResults = from q in mdb.GetStates(CountryID)
                        select new Models.StatesDTO
                        {
                            StateID = q.StateID,
                            StateName = q.StateName
                        };

        locations.statesList = stateResults.ToList();
    }

    JsonResult result = new JsonResult();

    result.Data = locations.statesList;

    return result;
}

Vous trouverez ci-dessous le code HTML côté client, mon code de rasoir et mon script. Je veux écrire du code dans "success:" pour qu'il remplisse les états dropdown avec les données JSON.

<script type="text/javascript">
    $(function () {
        $("select#CountryID").change(function (evt) {

            if ($("select#CountryID").val() != "-1") {

                $.ajax({
                    url: "/Home/GetStates",
                    type: 'POST',
                    data: { CountryID: $("select#CountryID").val() },
                    success: function () { alert("Data retrieval successful"); },
                    error: function (xhr) { alert("Something seems Wrong"); }
                });
            }
        });
    });
</script>
asp.net-mvcjsonjquery
13
Ren

Pour commencer, à l'intérieur d'un gestionnaire d'événements jQuery, la fonction this fait référence à l'élément qui a déclenché l'événement. Vous pouvez donc remplacer les appels supplémentaires à $("select#CountryID") par $(this). Bien que, dans la mesure du possible, vous devriez accéder directement aux propriétés des éléments, plutôt que d'utiliser les fonctions jQuery, vous pouvez simplement faire this.value plutôt que $(this).val() ou $("select#CountryID").val().

Ensuite, dans votre AJAX appel la fonction success, vous devez créer une série d'éléments <option>. Cela peut être fait en utilisant la fonction de base jQuery() (ou $() en abrégé). Cela ressemblerait à ceci:

$.ajax({
    success: function(states) {
        // states is your JSON array
        var $select = $('#StateID');
        $.each(states, function(i, state) {
            $('<option>', {
                value: state.stateId
            }).html(state.StateName).appendTo($select);
        });
    }
});

Voici une démo jsFiddle .

Documents jQuery pertinents:

15
Anthony Grist

Dans mon projet je fais comme ça c'est en dessous

dans mon contrôleur 

        public JsonResult State(int countryId)
        {               
            var stateList = CityRepository.GetList(countryId);
            return Json(stateList, JsonRequestBehavior.AllowGet);
        }

Dans le modèle

        public IQueryable<Models.State> GetList(int CountryID)
        {

            var statelist = db.States.Where(x => x.CountryID == CountryID).ToList().Select(item => new State
            {
                ID = item.ID,
                StateName = item.StateName
            }).AsQueryable();
            return statelist;
       }

En vue

<script type="text/javascript">
    function cascadingdropdown() {
        $("#stateID").empty();
        $("#stateID").append("<option value='0'>--Select State--</option>");
        var countryID = $('#countryID').val();
        var Url="@Url.Content("~/City/State")";
        $.ajax({
            url:Url,
            dataType: 'json',
            data: { countryId: countryID },
            success: function (data) {                
                $("#stateID").empty();
                $("#stateID").append("<option value='0'>--Select State--</option>");
                $.each(data, function (index, optiondata) {                  
                    $("#stateID").append("<option value='" + optiondata.ID + "'>" + optiondata.StateName + "</option>");
                });
            }
        });
    }     
</script>

je crois que ceci vous aidera......

12
Rajpurohit

Étape 1:

  • Tout d'abord, nous avons besoin d'une classe de modèle qui définit les propriétés de stockage des données.

    public class ApplicationForm
{
    public string Name { get; set; }
    public string State { get; set; }
    public string District { get; set; }
}

    Étape 2:

  • Nous avons maintenant besoin d’un contrôleur initial qui renvoie une vue Index en regroupant la liste des états dans ViewBag.StateName.

    public ActionResult Index()
{
    List<SelectListItem> state = new List<SelectListItem>();
    state.Add(new SelectListItem { Text = "Bihar", Value = "Bihar" });
    state.Add(new SelectListItem { Text = "Jharkhand", Value = "Jharkhand" });
    ViewBag.StateName = new SelectList(state, "Value", "Text");

    return View();
}

    Dans le contrôleur ci-dessus, nous avons une liste contenant les états attachés à ViewBag.StateName. Nous pourrions obtenir une liste de bases de données sous forme d’états à l’aide de la requête Linq ou autre et l’empaqueter dans ViewBag.StateName, et bien, allons-y avec les données en mémoire.

    Étape 3:

  • Une fois que nous avons le contrôleur, nous pouvons ajouter sa vue et commencer à créer un formulaire Razor.

      @Html.ValidationSummary("Please correct the errors and try again.")

  @using (Html.BeginForm())
     {
     <fieldset>
    <legend>DropDownList</legend>
    @Html.Label("Name")
    @Html.TextBox("Name")
    @Html.ValidationMessage("Name", "*")

    @Html.Label("State")
    @Html.DropDownList("State", ViewBag.StateName as SelectList, "Select a State", new { id = "State" })
    @Html.ValidationMessage("State", "*")

    @Html.Label("District")
    <select id="District" name="District"></select>
    @Html.ValidationMessage("District", "*")

    <p>
        <input type="submit" value="Create" id="SubmitId" />
    </p>
</fieldset>
}

    Vous pouvez voir que j'ai ajouté les étiquettes et les champs de validation appropriés avec chaque contrôle d'entrée (deux DropDownList et un TextBox), ainsi qu'un résumé de validation en haut. Notez que j'ai utilisé HTML au lieu de Razor helper, car lorsque nous appelons JSON avec jQuery, le balisage HTML de la balise d'option pré-remplie est renvoyé. Ajoutons maintenant le code jQuery dans la page de vue ci-dessus.

    Étape 4:

    Voici le code jQuery qui appelle JSON à DDL nommée méthode DistrictList du contrôleur avec un paramètre (nom de l’état sélectionné). La méthode DistrictList renvoie les données JSON. Avec les données JSON renvoyées, nous construisons un balisage HTML de balises et associons ce balisage HTML à ‘District’, qui correspond au contrôle DOM.

      @Scripts.Render("~/bundles/jquery")
    <script type="text/jscript">
       $(function () {
        $('#State').change(function () {
            $.getJSON('/DDL/DistrictList/' + $('#State').val(),         function (data) {
                var items = '<option>Select a District</option>';
                $.each(data, function (i, district) {
                    items += "<option value='" + district.Value + "'>" + district.Text + "</option>";
                });
                $('#District').html(items);
            });
           });
        });
    </script>

    Assurez-vous que vous utilisez les références de la bibliothèque jQuery avant la balise.

    Étape 5:

  • Dans le code jQuery ci-dessus, nous effectuons un appel JSON à DDL nommée méthode DistrictList du contrôleur avec un paramètre. Voici le code de la méthode DistrictList qui renverra des données JSON.

    public JsonResult DistrictList(string Id)
{
    var district = from s in District.GetDistrict()
                    where s.StateName == Id
                    select s;

    return Json(new SelectList(district.ToArray(), "StateName", "DistrictName"), JsonRequestBehavior.AllowGet);
}

    Veuillez noter que la méthode DistrictList acceptera un paramètre "Id" (ce devrait être "Id" toujours) de type chaîne envoyé par l'appel JSON de jQuery. Dans la méthode, j’utilise le paramètre ‘Id’ dans une requête linq pour obtenir la liste des districts correspondants et, sur le plan conceptuel, un champ d’état doit figurer dans la liste des données de district. Notez également que, dans la requête linq, je suis en train d'appeler une méthode, appelez District.GetDistrict ().

    Étape 6:

    Dans l'appel de méthode District.GetDistrict () ci-dessus, District est un modèle doté d'une méthode GetDistrict (). Et j'utilise la méthode GetDistrict () dans une requête linq. Cette méthode doit donc être de type IQueryable. Voici le code du modèle.

    public class District
{
    public string StateName { get; set; }
    public string DistrictName { get; set; }

    public static IQueryable<District> GetDistrict()
    {
        return new List<District>
        {
            new District { StateName = "Bihar", DistrictName = "Motihari" },
            new District { StateName = "Bihar", DistrictName = "Muzaffarpur" },
            new District { StateName = "Bihar", DistrictName = "Patna" },
            new District { StateName = "Jharkhand", DistrictName = "Bokaro" },
            new District { StateName = "Jharkhand", DistrictName = "Ranchi" },
        }.AsQueryable();
    }
}

    Étape 7:

    Vous pouvez exécuter l'application ici car la liste déroulante en cascade est prête maintenant. Je vais faire quelques travaux de validation lorsque l'utilisateur clique sur le bouton d'envoi. Je vais donc ajouter un autre résultat d'action de la version POST.

    [HttpPost]
public ActionResult Index(ApplicationForm formdata)
{
    if (formdata.Name == null)
    {
        ModelState.AddModelError("Name", "Name is required field.");
    }
    if (formdata.State == null)
    {
        ModelState.AddModelError("State", "State is required field.");
    }
    if (formdata.District == null)
    {
        ModelState.AddModelError("District", "District is required field.");
    }

    if (!ModelState.IsValid)
    {
        //Populate the list again
        List<SelectListItem> state = new List<SelectListItem>();
        state.Add(new SelectListItem { Text = "Bihar", Value = "Bihar" });
        state.Add(new SelectListItem { Text = "Jharkhand", Value = "Jharkhand" });
        ViewBag.StateName = new SelectList(state, "Value", "Text");

        return View("Index");
    }

    //TODO: Database Insertion

    return RedirectToAction("Index", "Home");
}
3
kavitha Reddy

Essayez ceci dans l'appel ajax:

$.ajax({
  url: "/Home/GetStates",
  type: 'POST',
  data: {
    CountryID: $("select#CountryID").val()
  },
  success: function (data) {
    alert("Data retrieval successful");
    var items = "";

    $.each(data, function (i, val) {
      items += "<option value='" + val.stateId + "'>" + val.StateName + "</option>";
    });

    $("select#StateID").empty().html(items);
  },
  error: function (xhr) {
    alert("Something seems Wrong");
  }
});

EDIT 1 

success: function (data) {

  $.each(data, function (i, val) {
    $('select#StateID').append(
    $("<option></option>")
      .attr("value", val.stateId)
      .text(val.StateName));
  });
},
1
palaѕн

Essaye ça:

public JsonResult getdist(int stateid)
{
    var res = objdal.getddl(7, stateid).Select(m => new SelectListItem { Text = m.Name, Value = m.Id.ToString() });
    return Json(res,JsonRequestBehavior.AllowGet);
}
0
Meera

Vous devez envisager d'utiliser un moteur de vue côté client qui lie un modèle (dans votre cas, JSON renvoyé par l'API) à un modèle (code HTML pour SELECT). Angular et React peuvent être trop complexes pour ce cas d'utilisation, mais Le moteur de vue JQuery vous permet de charger facilement un modèle JSON dans un modèle à l'aide d'une approche de type MVC:

<script type="text/javascript">
    $(function () {
        $("select#CountryID").change(function (evt) {

            if ($("select#CountryID").val() != "-1") {

                $.ajax({
                    url: "/Home/GetStates",
                    type: 'POST',
                    data: { CountryID: $("select#CountryID").val() },
                    success: function (response) {
                             $("#stateID").empty();
                             $("#stateID").view(response);
                    },
                    error: function (xhr) { alert("Something seems Wrong"); }
                });
            }
        });
    });
</script>

C'est beaucoup plus propre que de générer du HTML brut en JavaScript. Voir les détails ici: https://jocapc.github.io/jquery-view-engine/docs/ajax-dropdown

0
Jovan MSFT

Je sais que cet article a un an mais je l’ai trouvé et vous aussi. J'utilise la solution suivante et cela fonctionne très bien. Fort typé sans avoir besoin d'écrire une seule ligne de Javascript.

mvc4ajaxdropdownlist.codeplex.com

Vous pouvez le télécharger via Visual Studio en tant que package NuGet.

0
Frank Bonnet
   <script type="text/javascript">
          $(document).ready(function () {
              $("#ddlStateId").change(function () {
                  var url = '@Url.Content("~/")' + "Home/Cities_SelectedState";
                  var ddlsource = "#ddlStateId";
                  var ddltarget = "#ddlCityId";
                  $.getJSON(url, { Sel_StateName: $(ddlsource).val() }, function (data) {
                      $(ddltarget).empty();
                      $.each(data, function (index, optionData) {
                          $(ddltarget).append("<option value='" + optionData.Text + "'>" + optionData.Value + "</option>");
                      });

                  });
              });
          });
       </script>
0
kavitha Reddy