Popola DropDownList utilizzando AJAX MVC 4

Question

ho una visione sul posto che contiene 2 @ Helpers di DropDownListFor:

@using (Html.BeginForm("CreateOneWayTrip", "Trips")) 
    { 
     @Html.ValidationSummary(false); 
     <fieldset> 
      <legend>Enter Your Trip Details</legend> 

      <label>Start Point</label> 
      @Html.DropDownListFor(m => m.StartPointProvince, (SelectList)ViewBag.Provinces, new { @Id = "province_dll", @class = "form-control" }) 
      @Html.DropDownListFor(m => m.StartPointCity, (SelectList)ViewBag.Cities, new { @Id = "city_dll", @class = "form-control" }) 

      <p style="float: none; text-align: center;"> 
       <button type="submit" value="Create" class="btn btn-info btn-circle btn-lg"> 
        <i class="fa fa-check"></i> 
       </button> 

       <button type="submit" value="Create" class="btn btn-warning btn-circle btn-lg"> 
        <i class="fa fa-times"></i> 
       </button> 
      </p> 
     </fieldset> 
    } 

Qui è il modello temporanea che uso per acquisire i dati:

public class CaptureCreateTrip 
{ 
    [Required] 
    [Display(Name = "Trip ID")] 
    public string TripID { get; set; } 

    [Required] 
    public string StartPointProvince { get; set; } 

    [Required] 
    public string StartPointCity { get; set; } 
} 

Uno dei I DropsDownList vengono popolati quando viene creata la pagina e il secondo verrà popolato in base all'opzione che l'utente sceglie nel primo DropDownList. Per raggiungere questo obiettivo, sto usando Ajax. Il javascript per uso simile a questo:

$("#province_dll").change(function() { 
 
     $.ajax({ 
 
      url: 'getCities/Trips', 
 
      type: 'post', 
 
      data: { 
 
       provinceId: $("#province_dll").val() 
 
      } 
 
     }).done(function (response) { 
 
      $("cities_dll").html(response); 
 
     }); 
 
    });

Ecco il Controllore della chiamate AJAX:

[HttpPost] 
    public ActionResult getCicites(int provinceId) 
    { 
     var lstCities = new SelectList(new[] { "City1", "City2", "City3" }); 

     return Content(String.Join("", lstCities)); 
    } 

Fino a questo punto tutto funziona - Quando scelgo un valore in mia Provincia DropDown l'evento javascript si attiva e l'azione Controller restituisce i valori della select list a Cities DropDown, ma il problema è che i dati (del formato dei dati) restituiti dall'azione non sono corretti. Ho verificato questo problema creando un elemento Paragrafo e aggiornando il suo testo con il valore di ritorno della chiamata ajax, che è: "System.Web.Mvc.SelectListItemSystem.Web.Mvc.SelectListItemSystem.Web.Mvc.Select ListItem"

* Nota: sono nuovo di Ajax e in fase di apprendimento di Jquery e AJAX.

Answer 1

La ragione si stanno ottenendo un colletion di stringhe "System.Web.Mvc.SelectListItemSystem" è che var lstCities = new SelectList(new[] { "City1", "City2", "City3" }); rendimenti IEnumerable<SelectListItem> e String.Join("", lstCities) chiama il metodo di ogni SelectListItem voce .ToString() nella collezione che ritorna "System.Web.Mvc.SelectListItemSystem" (non il valore della proprietà Text di SelectListItem)

Th Il modo migliore per popolare il secondo elenco a discesa è restituire json contenente la raccolta di città e aggiornare il DOM nella callback di successo ajax. Non vi è alcun motivo per creare un SelectList - è un sovraccarico extra non necessario e si restituiscono almeno 3 volte più dati al client necessari (il client non ha alcun concetto di classe C# SelectListItem.

public JsonResult FetchCities(int provinceId) // its a GET, not a POST 
{ 
    // In reality you will do a database query based on the value of provinceId, but based on the code you have shown 
    var cities = new List<string>() { "City1", "City2", "City3" }); 
    return Json(cities, JsonRequestBehavior.AllowGet); 
} 

Poi nello script (non so perché si è modificato il valore predefinito idid="StartPointProvince"-id="province_dll", ma)

var url = '@Url.Action("FetchCities", "Trips")'; // Don't hard code your url's! 
var cities = $('#city_dll'); // cache it 
$("#province_dll").change(function() { 
    var id = $(this).val(); // Use $(this) so you don't traverse the DOM again 
    $.getJSON(url, { provinceId: id }, function(response) { 
     cities.empty(); // remove any existing options 
     $.each(response, function(index, item) { 
      cities.append($('</option>').text(item)); 
     }); 
    }); 
}); 

Modifica

seguito ai commenti di OP, se il database conteneva un nome di tabella Cities con campi ID e Name, quindi il metodo del controller sarebbe qualcosa come

public JsonResult FetchCities(int provinceId) // its a GET, not a POST 
{ 
    var cities = db.Cities.Select(c => new 
    { 
     ID = c.ID, 
     Text = c.Text 
    } 
    return Json(cities, JsonRequestBehavior.AllowGet); 
} 

e lo script per creare le opzioni sarebbe

$.each(response, function(index, item) { // item is now an object containing properties ID and Text 
    cities.append($('</option>').text(item.Text).val(item.ID)); 
}); 

Answer 2

Puoi provare quanto segue?

Questo è un post che ho risposto alcuni giorni fa. Font: Dynamic DropDownLists In MVC 4 Form

È necessario creare una chiamata Ajax nell'evento di modifica della provincia ddl. Questa chiamata richiederà un'azione e restituirà le città della provincia selezionata.

$("province_dll").change(function(){ 
    $.ajax({ 
     url: 'getCitiesController/getCitiesAction', 
     type: 'post', 
     data: { 
       provinceId: provinceIdVar 
     } 
    }).done(function(response){ 
     $("cities_dll").html(response); 
    }); 
}); 

Nell'azione:

[HttpPost] 
public ActionResult getCicitesAction(int provinceId) 
{ 
    var cities = db.cities.Where(a => a.provinceId == provinceId).Select(a => "<option value='" + a.cityId + "'>" + a.cityName + "'</option>'"; 

    return Content(String.Join("", cities)); 
} 

Answer 3

Facciamo più semplice

• Fase 1: funzioni lato server/dati

  public JsonResult FetchP(string O) 
  { 
      List<SelectListItem> PList = new List<SelectListItem>(); 
      PList = _PService.GetAllPActive() 
         .Select(i => new SelectListItem() 
           { 
            Text = i.PName, 
            Value = i.PID         
           }).ToList(); 
  
      return Json(PList, JsonRequestBehavior.AllowGet); 
  } 
  

• Passaggio 2: Cli la funzione SIDE ENT/dati interprete

  function FetchP() 
  { 
      var url = '@Url.Action("FetchP", "Your_Controller")'; 
      var PDD= $("#PDD"); 
      var ODD= $("#ODD").val(); 
  
      $.getJSON(url, { O: ODD}, function (response) { 
       PDD.empty(); 
       debugger; 
       $.each(response, function (index, item) { 
        debugger; 
        var p = new Option(item.Text, item.Value); 
        PDD.append(p); 
       }); 
      }); 
  } 
  

• Fase 3: Call - Funzione lato client/avviare

• Lista 1:

  @Html.DropDownList("ODD", ViewBag.OList as IEnumerable<SelectListItem>, new { @id = "ODD", @class = "form-control", @onchange= "FetchP()" }) 
  

• Lista 2:

  @Html.DropDownList("PDD", ViewBag.PList as IEnumerable<SelectListItem>,new { @id = "PDD", @class = "form-control"})