jquery.unobtrusive-ajax.js is not capturing the Submit event

Question

I am trying to get the onChange event of an Html.DropDownList to trigger an Ajax update in an ASP.Net MVC 5 view.

I am using the ideas shown in this blog

My page is made of a top level view, a partial view that contains the Html.DropDownList and a nested partial view that should be updated by Ajax

My problem is that when I submit the form in the partial view I get back the nested partial view on its own, as the full page. Not as a partial view;

I note that if I decorate my Action with [AjaxOnly] I get an error because I am not generating an Ajax call from the view. I believe that the function $(document).on("submit", "form[data-ajax=true]"... in jquery.unobtrusive-ajax.js does not fire when the form is submitted.

I have followed the advice I found here and everything I have done agrees with what they suggest to check.

Can you tell me what I am doing wrong?

Top Level View

@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 - Partial View

@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 - Partial View

<h1>hello</h1>

Controller Action

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

ssilas777 · Answer 1 · 2014-12-31T13:17:25.590

~~Try putting the entire code inside the Ajax form~~

The target dov need not to be inside the ajax form, please try changing the form submit to use Jquery.

Try change this.form.submit() to $(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>

score 0 · Accepted Answer · edited May 23 '17 at 11:57

I did some more research (I changed how I described what I was looking for) and found this.

MVC 3 - Ajax.BeginForm does a full post back

And it works!

You add the reference to jquery.unobtrusive-ajax.min.js into _Layout.cshtml instead of the views or partial views.

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

Why this works seems to be a mystery.

jquery.unobtrusive-ajax.js is not capturing the Submit event

2 Answers2