ASP.Net MVC Ajax not writing correctly

Atbenning
Atbenning used Ask the Experts™
on
I have a page using an ajax form with ajax.beginform, only instead of updating the target div on submit, it renders a new page.  The ajax script references are in the site.master file.  Code below.
//on the view page
<% using (Ajax.BeginForm("AddSurveysAJAX",
     new AjaxOptions { UpdateTargetId = "Test", InsertionMode = InsertionMode.Replace }))
   { %>
      
      <%= Html.Hidden("itemID", Model == null ? ViewData["itemID"] : Model.ItemID) %>
      <%= Html.ListBox("SurveysLst", ViewData["Surveys"] as MultiSelectList)%>
      

      <input type="submit" value=">>>" />
                       
      <%= Html.ListBox("SelSurveysLst", ViewData["ItemSurveys"] as MultiSelectList)%>
      <div id="Test"></div>

<% } %>


//in the controller
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult AddSurveysAJAX(FormCollection formValues)
{
  return Content("Testing 123");
}

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
I've done something very similar here to test this - I don't normally use the MS ajax libraries - I generally use JQuery.

However I've got things working OK.

A couple of questions. Have you used firebug to see what is being sent back to the server.

Also can you check that the html of your form looks something like this when rendered in browser

<form onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, updateTargetId: 'ajax-result' });" onclick="Sys.Mvc.AsyncForm.handleClick(this, new Sys.UI.DomEvent(event));" method="post" action="/SalesOrderSearch.mvc/AjaxResult">
            <fieldset>
                <input type="submit" value="Ajax Submit">
                <div id="ajax-result">Hello world</div>
            </fieldset>
        </form>

I also get the following in the post parameters

X-Requested-With      XMLHttpRequest

Author

Commented:
Ok, looking at firebug, it looks like for some reason the path I had for the ajax libraries was screwed up.

It worked fine after I made the changes below.  I don't know why the path wasn't reading right, because I had the jquery library referenced the exact same way and it was working fine.
//switched from
  <script src="~/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
  <script src="~/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>

//to
  <script src="<%= Url.Content("~/Scripts/MicrosoftAjax.js") %>" type="text/javascript"></script>
  <script src="<%= Url.Content("~/Scripts/MicrosoftMvcAjax.js") %>" type="text/javascript"></script>

Open in new window

Author

Commented:
Thanks for the reminder to check firebug, showed that the path was off
One suggestion that I'd make for your script URLs is to use a helper method

I create a helper method

 public static string JQuery(this UrlHelper helper, string fileName)
        {
            return helper.Content(String.Format("~/assets/script/jquery/{0}", fileName));
        }


        public static string MicrosoftAjax(this UrlHelper helper, string fileName)
        {
            return helper.Content(String.Format("~/assets/script/microsoftajax/{0}", fileName));
        }

and then use it

 <script language="javascript" src="<%= Url.JQuery("jquery-1.3.2.min.js") %>" type="text/javascript"></script>
  <script language="javascript" src="<%= Url.JQuery("jquery.form.js") %>" type="text/javascript"></script>



Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial