在ASP中使用级联ListBox的Ajax回发.净MVC3

本文关键字:Ajax 回发 MVC3 ListBox 级联 ASP | 更新日期: 2023-09-27 18:04:42

首先,我是一名ASP。NET MVC新手。这是我第一个使用ASP的项目。NET MVC,所以我还在学习。在过去的两年中,我的背景主要是WPF和XAML。

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

这是我的索引。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>
我DevelopmentListsView

。CSHTML看起来像这样:

@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 DevelopmentModel
{
    public string SelectedApplication { get; set; }
    public string SelectedVersion { get; set; }
    public string SelectedFlow { get; set; }
}

我的控制器是这样的:

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回调来检索数据,所以它不会每次刷新,但是当我单击其中一个Listbox项时,页面只显示DevelopmentListsView视图之后,不刷新任何东西。

谁能告诉我我做错了什么?

感谢您的关注!

在ASP中使用级联ListBox的Ajax回发.净MVC3

我自己想明白了:

我有两个错误:

我错过了jquery脚本包含在Index.cshtml:

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

我使用了错误的提交(它应该是jQuery提交):

$(this.form).submit()

提交放置在我的模型

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

希望有一天能帮到别人。