Populate Dropdownlist mit AJAX MVC 4

Question

ich einen Blick an der richtigen Stelle, die 2 @ DropDownListFor Helfer enthält:

@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> 
    } 

Hier ist die temporäre Modell, das ich verwenden, um Daten zu erfassen:

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; } 
} 

Einer der DropDownLists werden beim Erstellen der Seite ausgefüllt und die zweite wird basierend auf der Option gefüllt, die der Benutzer in der ersten DropDownList auswählt. Um dies zu erreichen, benutze ich Ajax. Die Javascript Ich benutze sieht wie folgt aus:

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

Hier ist der Controller die AJAX-Aufrufe:

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

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

Bis zu diesem Punkt alles funktioniert - Wenn ich einen Wert wählen, in Meine Provinz DropDown Das JavaScript-Ereignis wird ausgelöst und die Controller-Aktion gibt die Auswahllistenwerte an Cities DropDown zurück, das Problem ist jedoch, dass die von der Aktion zurückgegebenen Daten (des Formats der Daten) nicht korrekt sind. Ich habe dies getestet, indem ich ein Paragraph-Element erstellt und seinen Text mit dem Rückgabewert des Ajax-Aufrufs aktualisiert habe, nämlich: "System.Web.Mvc.SelectListItemSystem.Web.Mvc.SelectListItemSystem.Web.Mvc.Select ListItem"

* Hinweis: Ich bin neu bei Ajax und im Prozess des Lernens von Jquery und AJAX.

Answer 1

Der Grund, warum Sie "System.Web.Mvc.SelectListItemSystem" ist, dass var lstCities = new SelectList(new[] { "City1", "City2", "City3" }); kehrt IEnumerable<SelectListItem> und String.Join("", lstCities) ruft die .ToString() Methode jedes SelectListItem Element in der Sammlung eine colletion von Strings werden immer die "System.Web.Mvc.SelectListItemSystem" zurückgibt (nicht der Wert der Text Eigenschaft von SelectListItem)

Th Der beste Weg, die zweite Dropdown-Liste aufzufüllen, besteht darin, json zurückzugeben, das die Sammlung von Städten enthält, und das DOM im Ajax-Erfolgsrückruf zu aktualisieren. Es gibt keinen Grund, ein SelectList zu erstellen - es ist nur unnötiger zusätzlicher Aufwand und Sie geben mindestens 3 mal so viele Daten zurück zum Client, wie nötig ist (der Client hat kein Konzept einer C# SelectListItem Klasse.

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); 
} 

dann im Skript (nicht sicher, warum Sie den Standard idid="StartPointProvince"-id="province_dll" geändert haben, aber)

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)); 
     }); 
    }); 
}); 

bearbeiten

Im Anschluss an OP Kommentaren, wenn die Datenbank enthielt einen Tabellennamen Cities mit den Feldern ID und Name, dann wäre die Controller-Methode etwa

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); 
} 

und das Skript um die Optionen zu schaffen wäre

$.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

Können Sie Folgendes versuchen?

Dies ist ein Beitrag, den ich vor einigen Tagen geantwortet habe. Schriftart: Dynamic DropDownLists In MVC 4 Form

Sie sollten einen Ajax-Aufruf im Änderungsereignis der Provinz-ddl erstellen. Dieser Anruf wird eine Aktion anfordern und die Städte der ausgewählten Provinz zurückgeben.

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

In der Aktion:

[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

Sagen wir es

• Schritt 1 einfacher machen: Server-Seite Funktion/Daten

  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); 
  } 
  

• Schritt 2: Cli ent Seite Funktion/Dateninterpretierer

  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); 
       }); 
      }); 
  } 
  

• Schritt 3: Rufen Sie - Client-Seite Funktion/Start

• Liste 1:

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

• Liste 2:

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