Asp.Net Axaj.BeginForm & UpdateTargetId not working

Question

I have this in HomeController :

public ActionResult Details(string id) { var customer = Customers.GetCustomersById(id); return PartialView("CustomerDetails", customer); } 

And this is in Index.aspx :

 <div> <% using (Ajax.BeginForm("Details", new AjaxOptions { UpdateTargetId = "customerDetails", InsertionMode = InsertionMode.Replace, HttpMethod = "POST" })) { %> <p> Customer: <%=Html.DropDownList("id")%></p> <p> <input type="submit" value="Details" /></p> <% } %> </div> <div id="customerDetails"> </div> 

And finally, in CustomerDetails.ascx , I have:

  <fieldset> <legend>Fields</legend> <p> Name: <%= Html.Encode(Model.Name) %> </p> <p> Credit: <%= Html.Encode(Model.Credit) %> </p> <p> CustomerID: <%= Html.Encode(Model.CustomerID) %> </p> </fieldset> <p> <%=Html.ActionLink("Edit", "Edit", new { /* id=Model.PrimaryKey */ }) %> | <%=Html.ActionLink("Back to List", "Index") %> </p> 

The Details.ascx client was generated by right-clicking on the detailed method and selecting "Add View" and choosing a partial view and a strongly typed view.

I want this to update the client details in an "Ajax manner" inside a div called "customerDetails" inside Index.html. The problem is that after clicking the "Details" button, a new page opens where the correct data is indicated. The output page has no colors and layouts of the main page.

If I debug the Details method, the contents of the client object are correct.

Any help appreciated!

/P

Answer 1

The most likely culprit is that you do not include MicrosoftAjax.js and MicrosoftMvcAjax.js on the page. This causes javascript to fail because it cannot find the required functions, and the form is submitted normally instead of Ajax.