it seems like the whole page is refreshing even thought i am using Ajax.Beginform

Question

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.

Answer 1

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 );
 }