C# ASP.NET MVC3中带有级联列表框的Ajax回发_C#_Asp.net Mvc 3

C# ASP.NET MVC3中带有级联列表框的Ajax回发

c# asp.net-mvc-3

C# ASP.NET MVC3中带有级联列表框的Ajax回发,c#,asp.net-mvc-3,C#,Asp.net Mvc 3,首先，我是一个ASP.NETMVCNoob。这是我第一个使用ASP.NETMVC的项目，所以我还在学习。在过去的两年里，我的背景主要是WPF和XAML 这就是我的问题：我有三个级联列表框。第二个列表框数据依赖于第一个列表框数据，第三个列表框数据依赖于第二个列表框数据。我想使用Ajax刷新来填充每个列表中的数据这是我的Index.cshtml： @model WebApplication.Models.DevelopmentModel <!DOCTYPE html> <ht

首先，我是一个ASP.NETMVCNoob。这是我第一个使用ASP.NETMVC的项目，所以我还在学习。在过去的两年里，我的背景主要是WPF和XAML

这就是我的问题：我有三个级联列表框。第二个列表框数据依赖于第一个列表框数据，第三个列表框数据依赖于第二个列表框数据。我想使用Ajax刷新来填充每个列表中的数据

这是我的Index.cshtml：

@model WebApplication.Models.DevelopmentModel

<!DOCTYPE html>

<html>
<head>
    <title>Dashboard</title>
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
</head>

<body class="body" scroll="auto">

    <div class="page">
            <div class="content">

                <div id="lists">

                    @Html.Partial("DevelopmentListsView", Model)

                </div>
            </div>
    </div>

</body>
</html>

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

我的模型看起来像：

public class DevelopmentModel
{
    public string SelectedApplication { get; set; }
    public string SelectedVersion { get; set; }
    public string SelectedFlow { get; set; }
}

我的控制器如下所示：

@model WebApplication.Models.DevelopmentModel

@using (Ajax.BeginForm("Index", "Development", new AjaxOptions() { UpdateTargetId = "lists" } ))
{
    @Html.ListBoxFor(m => m.SelectedApplication, new SelectList(ViewBag.Applications), new { onchange = "this.form.submit();" })
    @Html.ListBoxFor(m => m.SelectedVersion, new SelectList(ViewBag.Versions), new { onchange = "this.form.submit();" })
    @Html.ListBoxFor(m => m.SelectedFlow, new SelectList(ViewBag.Flows) )
}

public class DevelopmentController : Controller
{
    //
    // GET: /Development/

    public ActionResult Index()
    {
        FillViewBag();

        return View(new DevelopmentModel());
    }


    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult Index(DevelopmentModel model)
    {
        FillViewBag(model);

        return PartialView("DevelopmentListsView", model);
    }


    private void FillViewBag(DevelopmentModel model = null)
    {
        //Magic to get all three lists dependent on the available data in the model:

        ViewBag.Applications = applications;
        ViewBag.Versions = versions;
        ViewBag.Flows = flows;
    }

}

现在，我想使用Ajax回调来检索数据，因此它不会每次都刷新，但当我单击其中一个列表框项目时，页面随后只显示DevelopmentListsView视图，而不刷新任何内容

有人能告诉我我做错了什么吗

谢谢你的关注

想出了我自己的问题：

我有两个错误：

我错过了Index.cshtml中包含的jquery脚本：

@model WebApplication.Models.DevelopmentModel

<!DOCTYPE html>

<html>
<head>
    <title>Dashboard</title>
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
</head>

<body class="body" scroll="auto">

    <div class="page">
            <div class="content">

                <div id="lists">

                    @Html.Partial("DevelopmentListsView", Model)

                </div>
            </div>
    </div>

</body>
</html>

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

提交放置在我的模型中

@model WebApplication.Models.DevelopmentModel

@using (Ajax.BeginForm("Index", "Development", new AjaxOptions() { UpdateTargetId = "lists" } ))
{
    @Html.ListBoxFor(m => m.SelectedApplication, new SelectList(ViewBag.Applications), new { onchange = "$(this.form).submit()" })
    @Html.ListBoxFor(m => m.SelectedVersion, new SelectList(ViewBag.Versions), new { onchange = "$(this.form).submit()" })
    @Html.ListBoxFor(m => m.SelectedFlow, new SelectList(ViewBag.Flows) )
}

希望有一天这能帮助别人；）