CODEWITHSUNDEEP
jqueryasp.netasp.net-mvc-5
Richard210363
Richard210363

Reputation: 8406

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

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");
}

Upvotes: 0

Views: 2658

Answers (2)

Richard210363
Richard210363

Reputation: 8406

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.

Upvotes: 0

ssilas777
ssilas777

Reputation: 9764

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>

Upvotes: 2

Related Questions