web-dev-qa-db-de.com

Füllen Sie DropDownList mit AJAX MVC 4

Ich habe eine Ansicht, die 2 @ DropDownListFors 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 das temporäre Modell, das ich zum Erfassen von Daten verwende:

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

Eine der DropsDownList-Listen wird beim Erstellen der Seite aufgefüllt, und die zweite wird basierend auf der Option gefüllt, die der Benutzer in der ersten DropDownList-Option auswählt. Um dies zu erreichen, verwende ich Ajax. Das Javascript, das ich benutze, sieht so 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, den der AJAX aufruft:

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

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

Bis zu diesem Punkt funktioniert alles - Wenn ich einen Wert in meiner Provinz DropDown auswähle, wird das Javascript-Ereignis ausgelöst und die Controller-Aktion gibt die Auswahllistenwerte an die Cities DropDown zurück. Das Problem ist jedoch, dass die Daten (des Datenformats) das sind Die Aktion kehrt zurück. Ich habe dies getestet, indem ich ein Paragraph-Element erstellt und seinen Text mit dem Rückgabewert des ajax-Aufrufs aktualisiert habe: "System.Web.Mvc.SelectListItemSystem.Web.Mvc.SelectListItemSystem.Web.Mvc.Select" ‌ ListItem "

* Hinweis: Ich bin ein Neuling in Ajax und lerne gerade Jquery und AJAX.

14
Marnus Steyn

Der Grund, warum Sie eine Kombination von Zeichenfolgen "System.Web.Mvc.SelectListItemSystem" erhalten, ist, dass var lstCities = new SelectList(new[] { "City1", "City2", "City3" });IEnumerable<SelectListItem> zurückgibt und String.Join("", lstCities) die .ToString()-Methode jedes SelectListItem-Elements in der Auflistung aufruft, die "System.Web.Mvc.SelectListItemSystem" zurückgibt (nicht den Wert der Text-Eigenschaft von SelectListItem).

Die beste Möglichkeit, die zweite Dropdown-Liste aufzufüllen, besteht darin, Json mit der Sammlung von Städten zurückzugeben und das DOM im ajax success callback zu aktualisieren. Es gibt keinen Grund, ein SelectList zu erstellen - es ist nur unnötiger zusätzlicher Aufwand und Sie geben mindestens dreimal so viele Daten an den Client zurück wie erforderlich (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 Standardwert id von id="StartPointProvince" zu 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></option>').text(item));
        });
    });
});

Bearbeiten

Wenn die Datenbank nach den Kommentaren von OP einen Tabellennamen Cities mit den Feldern ID und Name enthält, wäre die Controller-Methode so ähnlich

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 zum Erstellen der Optionen wäre

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

Kannst du folgendes probieren?

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

Sie sollten im Änderungsereignis der Provinz ddl ..__ einen Ajax-Aufruf erstellen. Dieser Aufruf fordert eine Aktion an und gibt die Städte der ausgewählten Provinz zurück.

$("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));
}
4

Lass es uns einfacher machen

  • Schritt 1: Serverseitige 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: Client-seitige Funktion/Dateninterpreter

    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: Anruf - clientseitige 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"})
    
1
Kedar9444