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!

Skimmer

Ok so this seems like an issue of not having the unobtrusive setup right. Have you ensured that the Microsoft.Unobtrusivelibraries have been removed from the project? I ran into this issue a few times and it ended up being library and dependency issues. – Turcotte

@Turcotte No, I haven't done that...not 100% sure how to though... – Skimmer

are you using Nuget with visual studio? or something else? Also are you implementing bundling with the project? – Turcotte

@Turcotte I am using Nuget...but with my current project some things have been added without Nuget before I began working on it – Skimmer

thats fine go to installed and search for microsoft jquery unobtrusive ajax and validation and uninstall them, which you can easily revert if necesary. However those microsoft libraries cause conflicts with the jquery libraries, and the microsoft libraries are now depreciated as well. – Turcotte

@Turcotte I've checked an I can't see microsoft unobtrusive installed...I'll update my post with my current configuration scripts... – Skimmer

If you are using bundles, why are you using <script> tags use @Script.Render("~/bundles/jquery") @Script.render("~/bundles/jqueryui") @Script.Render("~/bundles/jqueryval") in your layout page. – Saddler

@Saddler mainly because I wasn't aware of using Scripts.Render. I've now done that instead...not that it fixes my problem. – Skimmer

why are you returning content and not a partial view? – Surbased

now that you are using @Scrip.Render when your dialog loads please check your source code and confirm if all required script references are loaded. – Saddler

good Catch @DaveA. meziod return Json("Thanks for your message!", JsonRequestBehaviour.AllowGet); also if there is no specific reason for using ActionResult.I recommend you to use JsonResult instead of ActionResult – Saddler

@Saddler I can see that jquery.unobtrusive-ajax.min.js is loaded. And when I update my code to return a JsonResult...I get the same problem but this time with with the Json message displayed in the redirected partial view – Skimmer

is full jquery loaded as well? also check the nuget updates section. – Turcotte

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!

Skimmer

Exactly what i needed. Ran Install-Package Microsoft.jQuery.Unobtrusive.Ajax in the Package Manager console, added the JS files to my script bundle, and i am back in business. – Masterstroke