What is the alternative of ajax.beginform and unobtrusive-ajax.js for partial refresh?

Question

I have used Ajax.Beginform, and unobtrusive-ajax.js at various places in my application. This was all working fine until I was using JQuery 1.7 libraries. However, after upgrading them to JQuery 1.9.0, this stopped working, I also upgraded version of unobtrusive-ajax (so that replaced .live by .on() methods), and still it doesn't work.

Lately, I came across posts suggesting Ajax.Beginform and unobtrusive-ajax are not right approach. In that case, what is the best approach to do a partial refresh. Say, my view has "Search" button, and when user clicks "Search" it should only refresh a particular part of page. How do we achieve it without using Ajax Form, and unobtrusive-ajax.js?

Answer 1

I'm using both Ajax.BeginForm and jQuery 1.9, and they work perfectly.

Have you set the UpdateTargetId property in your AjaxOptions? This is what I have (I could use a model, but I'm simplifying the example):

@using(Ajax.BeginForm("Index", "Search",
  new AjaxOptions(){ UpdateTargetId = "result"})
{
    <input type="text" name="q" />
    <button type="submit">Send</button>
}

<div id="result"></div>

But watch out, if you're setting htmlAttributes like @class or name, make sure to set the routeValues argument as null:

@using(Ajax.BeginForm("Index", "Search", null,
    new AjaxOptions(){ UpdateTargetId = "result"},
    new { @class = "myFormClass", name = "myForm" } )