Question

我正在尝试获取Html.DropDownList的onChange事件以在ASP.Net MVC 5视图中触发Ajax更新。

中显示的提示

我的页面由顶级视图，包含Html.DropDownList的部分视图和应由Ajax更新的嵌套部分视图构成

我的问题是，当我在局部视图中提交表单时，我自己返回嵌套的局部视图，作为整页。不是局部观点;

我注意到如果我用[AjaxOnly]装饰我的Action，我会收到错误，因为我没有从视图中生成Ajax调用。我相信在表单中，函数 $（document）.on（“submit”，“form [data-ajax = true]” ... ...在jquery.unobtrusive-ajax.js中不会触发提交。

我遵循了I found here的建议，我所做的一切都与他们建议检查的内容一致。

你能告诉我我做错了吗？

顶级视图

@model SupportCase
@Styles.Render("~/Content/css/inputui")

<h2>@ViewBag.Title - @Html.DisplayFor(model => model.CaseNumber)</h2>

<div class="form-horizontal">
   @{Html.RenderPartial("AddCaseContactForm");}
</div>

AddCaseContactForm - 部分视图

@model SupportCase

@{
ViewBag.Title = "Select which contact pool to use";
}

<h5>@ViewBag.Title</h5>

<script src="~/Scripts/jquery-2.1.1.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>

@using (Ajax.BeginForm("SelectPoolContacts", 
                       new AjaxOptions { UpdateTargetId = "contactList" }))
{
    <div class="form-group">
        <div class="col-md-10">
            @Html.DropDownList("SelectedPool",
                              (SelectList)ViewBag.DropDownLists["AvailablePools"], 
                              "Select a contact pool", 
                              new { onchange = "this.form.submit();", 
                                    class = "form-control" })
       </div>
    </div>
}

<div class="form-horizontal">
    <div id="contactList">
        @{Html.RenderPartial("TestView");}
    </div>
</div>

TestView - 部分视图

<h1>hello</h1>

控制器操作

//[AjaxOnly]
[HttpPost]
public ActionResult SelectPoolContacts(string SelectedPool)
{
   return PartialView("TestView");
}

Answer 1

~~尝试将整个代码放在Ajax表单中~~

目标dov不需要在ajax表单中，请尝试更改表单提交以使用Jquery。

尝试将this.form.submit()更改为$(this.form).submit()

@using (Ajax.BeginForm("SelectPoolContacts", 
                       new AjaxOptions { UpdateTargetId = "contactList" }))
{
    <div class="form-group">
        <div class="col-md-10">
            @Html.DropDownList("SelectedPool",
                              (SelectList)ViewBag.DropDownLists["AvailablePools"], 
                              "Select a contact pool", 
                              new { onchange = "$(this.form).submit();" }, //Change here 
                                    class = "form-control" })
       </div>
    </div>
 }


<div class="form-horizontal">
    <div id="contactList">
        @{Html.RenderPartial("TestView");}
    </div>
</div>

Answer 2

我做了一些更多的研究（我改变了我描述的内容）并发现了这一点。

MVC 3 - Ajax.BeginForm does a full post back

它有效！

将jquery.unobtrusive-ajax.min.js的引用添加到_Layout.cshtml中，而不是视图或部分视图。

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

为什么这个工作似乎是一个谜。

jquery.unobtrusive-ajax.js未捕获Submit事件

2 个答案: