MVC DropDownListFor填写另一个下拉列表的选择更改

时间:2017-01-12 09:37:11

标签: jquery ajax asp.net-mvc

来源:http://www.advancesharp.com/blog/1145/mvc-dropdownlistfor-fill-on-selection-change-of-another-dropdown

我的第一个DropDownList已经填充但是在更改之后,第二个DropDownList仍然是空的,我猜是onchange事件没有被触发?对不起,但我找不到我的错误。

_Layout.cshtml:         

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>SCLWEB | @ViewBag.Title</title>

    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>

    <!-- Add local styles, mostly for plugins css file -->
    @if (IsSectionDefined("Styles"))
    {@RenderSection("Styles", required: false)}

    <!-- Add jQuery Style direct - used for jQGrid plugin -->
    <link href="@Url.Content("~/Scripts/plugins/jquery-ui/jquery-ui.css")" rel="stylesheet" type="text/css" />

    <!-- Primary Inspinia style -->
    @Styles.Render("~/Content/css")
    @Styles.Render("~/font-awesome/css")

</head>
<body>
    <!-- Wrapper-->
    <div id="wrapper" class="@Html.PageClass()">

        <!-- Navigation -->
        @Html.Partial("_Navigation")

        <!-- Page wraper -->
        <div id="page-wrapper" class="gray-bg">

            <!-- Top Navbar -->
            @Html.Partial("_Navbar")

            <!-- Main view  -->
            @RenderBody()

            <!-- Footer -->
            @Html.Partial("_Footer")

        </div>
        <!-- End page wrapper-->

    </div>
    <!-- End wrapper-->

    <!-- Section for main scripts render -->
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/plugins/slimScroll")
    @Scripts.Render("~/bundles/inspinia")

    <!-- Handler for local scripts -->
    @RenderSection("scripts", required: false)

</body>
</html>

Index.cshtml

@model Core.Auswahl

@{
    ViewBag.Title = "Index";
}


@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">

        @Html.ValidationSummary(true, "", new { @class = "text-danger" })

        <div class="form-group">
            @Html.LabelFor(m => m.Hersteller, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownListFor(m => m.Hersteller,
                    new SelectList(ViewBag.StateList, "Id", "Symbol"),
                    "Hersteller", new { @class = "form-control", @onchange = "FillCity()" })
                @Html.ValidationMessageFor(m => m.Hersteller, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(m => m.Baureihe, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownListFor(m => m.Baureihe,
                    new SelectList(Enumerable.Empty<SelectListItem>(), "ID", "Symbol"),
                    "Baureihe",
                    new { @class = "form-control" })
                @Html.ValidationMessageFor(m => m.Baureihe, "", new { @class = "text-danger" })
            </div>
        </div>

    </div>
}


@section scripts {
    <script>
        function FillCity() {
            var herstellerId = $('#Hersteller').val();
            $.ajax({
                url: '/Home/FillCity',
                type: "GET",
                dataType: "JSON",
                data: { Hersteller: herstellerId },
                success: function (baureihen) {
                    $("#Baureihe").html("");
                    $.each(baureihen, function (i, baureihe) {
                        $("#Baureihe").append(
                        $('<option></option>').val(baureihe.ID).html(baureihe.Symbol));
                    });
                }
            });
        }
    </script>
}

HomeController.cs

using Core;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace SclWeb
{
    public class HomeController : Controller
    {
        SclDataEntities sclDataEntities = new SclDataEntities();

        // GET: Home
        public ActionResult Index()
        {
            ViewBag.StateList = sclDataEntities.Hersteller;

            Auswahl auswahl = new Auswahl();

            return View(auswahl);
        }

        public ActionResult FillCity(int herstellerId)
        {
            var baureihen = sclDataEntities.Baureihe.Where(c => c.HerstellerId == herstellerId);
            return Json(baureihen, JsonRequestBehavior.AllowGet);
        }
    }
}

1 个答案:

答案 0 :(得分:0)

据我所知(我不懂德语)你得到服务器端错误控制你的控制器:

//your viewmodel for dropdown
public class BaureiheViewModel
{
    public int ID {get; set;}
    public string Symbol {get; set;}
}

public class HomeController : Controller
{
    SclDataEntities sclDataEntities = new SclDataEntities();

    // GET: Home
    public ActionResult Index()
    {
        ViewBag.StateList = sclDataEntities.Hersteller;

        Auswahl auswahl = new Auswahl();

        return View(auswahl);
    }

    public ActionResult FillCity(int herstellerId)
    {
        //check here in debug step by step
        var baureihen = sclDataEntities.Baureihe.Where(c => c.HerstellerId == herstellerId);
        var model = new BaureiheViewModel
        {
            ID = baureihen.ID,
            Symbol = baureihen.Symbol 
        }
        return Json(model, JsonRequestBehavior.AllowGet);
    }
}

将breakpoit放入控制器并检查出错了。