Reputation: 196499
I have the following code that i am trying to change from a regular page to an ajax page so when i submit the form, i only refresh the LInkList div. I change the using line to use Ajax.BeginForm
Here is the View Code:
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div id="LinkList">
<% Html.RenderPartial("TestUserControl", Model); %>
</div>
<%using (Ajax.BeginForm("AddNewLink", "Test", new AjaxOptions { UpdateTargetId = "LinkList" }))
{ %>
<fieldset style="text-align: left">
<legend>Add New Link</legend>
<table>
<tr>
<td>
Url:
</td>
<td>
<input style="width: 500px" type="text" name="url" />
</td>
</tr>
<tr>
<td>
<input type="submit" value="Add Link" name="submit" />
</td>
</tr>
</table>
</fieldset>
<% } %>
Here is the Controller Code:
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult AddNewLink(FormCollection collection_)
{
string url = collection_["url"].ToString();
Test test = new Test();
test.Name = DateTime.Now.ToString();
if (Request.IsAjaxRequest())
{
return PartialView("TestUserControl", test);
}
return View("Index", test);
}
Any idea why the whole page would refresh in this case instead of just whats inside the div tag? Request.IsAjaxRequest() always returns false.
Upvotes: 0
Views: 2554
Reputation: 532465
Is the whole page refreshing or is the entire page being re-rendered inside your DIV. If the former, I suspect that you may have a javascript error on the page which will render your AJAX handling in operable and cause it to do a full post. Check this with IE8 debugging or Firefox/Firebug. You need to have MicrosoftAjax.js and MicrosoftMvcAjax.js included on every page where you use the AjaxHelper methods.
If the latter, and I think you will eventually have this problem, it's because you are returning the entire view regardless of whether you get the page via AJAX or a full post. Add some code to your method to return just the partial view that you are replacing when the request is made via AJAX.
var container = GetContainer(ds1);
if (request.IsAjaxRequest())
{
return PartialView( "LinkList", container );
}
else
{
return View( "Index", container );
}
Upvotes: 5