Unobtrusive Ajax Form for partial view

Question

I'm having trouble using unobtrusive ajax to post data from a contact us form.

My Partial View is like this:

@model site.ViewModel.Home.ContactUsViewModel 

@using (Ajax.BeginForm("_ContactUsPartial", "Home", 
                       new AjaxOptions { UpdateTargetId = "result" }))
        {
            <fieldset>
                <legend>Contact Us</legend>
                @Html.ValidationSummary(true)
                <div id="result"></div>
                <div class="editor-label">
                 @Html.LabelFor(m => m.FullName)
                 @Html.ValidationMessageFor(m => m.FullName)</div>
                <div class="editor-field">@Html.TextBoxFor(m => m.FullName)</div>
                <!-- other fields from model -->
                <input type="submit" value="Submit"/>
            </fieldset>
        }

My Partial View is placed on another page like this:

@Html.Partial("_ContactUsPartial", new ContactUsViewModel());

My Home Controller like this:

[HttpPost]
public ActionResult _ContactUsPartial(ContactUsViewModel viewModel)
{
    if (ModelState.IsValid)
    {
       try
       {
           //send email
           return Content("Thanks for your message!");
       }
       catch (Exception ex)
       {
          return Content("Problem sending the email.");
       }
    }

            return Content("oops. invalid model");
}

What I'm expecting to happen, is that when I press submit the controller will return some text content that will be placed in the div with an id of "result".

What is actually happening is when I press submit, I am getting redirected to /Home/_ContactUsPartial with the text content being the only thing that is displayed.

I don't understand what is going on here...and I have tried to look around at examples online only to find myself digging deeper into this hole.

I do have unobtrusive javascript enabled in my Web.config and I also have a reference to jquery.unobtrusive-ajax.min.js.

In my Scripts folder I have the following that may be relevant:

• jquery.unobtrusive-ajax.min.js
• jquery.validate.unobtrusive.min.js
• MicrosoftMvcAjax.js

In my _Layout.cshtml tag I have the following declared:

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

In my Global.asax.cs Application_Start I have this line:

BundleConfig.RegisterBundles(BundleTable.Bundles);

RegisterBundles looks like this:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                        "~/Scripts/jquery-ui-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate*"));

Not sure what bundles do and how they work because I seem to have it configured to bring them in via this ScriptBundle...but then I also have them configured manually in the head of the _Layout.cshtml....

Any idea what I'm doing wrong? I'd really appreciate some help with this!

Answer 1

I've finally got it!!!! After hours of wasted time!!!

Turns out it was a configuration issue...but not exactly what I expected.

I'm using jQuery 1.9.1 and what I thought was the latest version of Microsoft.jQuery.Unobtrusive.Ajax version 2.0.30116.0. However, there was a problem... the jquery unobtrusive ajax js file that I had still used the deprecated live method rather than the on method.... Even doing an update package did not update the file correctly.

It wasn't until I saw this post ASP.NET MVC 4: cannot modify jQuery Unobtrusive Ajax that I checked the file that I had and found that it was an old version.

At first I used the jQuery.Migrate nuget package to reenable the live method...but I found that the better solution was to uninstall or delete the existing file and use nuget to reinstall the Microsoft.jQuery.Unobtrusive.Ajax package.

This fixed the problem and now it works exactly as expected!