Ajax.BeginForm UpdateTargetId doesn't work with DropDownList

Question

Code:

<% using (Ajax.BeginForm("GetResourcesByProject", "CreateRequest", new AjaxOptions { UpdateTargetId = "ResourceListDiv"}))
{
 Response.Write(Html.DropDownList("SelectProject", Model.ProjectList, "Select Project", new { onchange = "this.form.submit();" }));
} %>

When I run the page I get the correct controller action to trigger with the right data in the form collection:

public ActionResult GetResourcesByProject(FormCollection formCollection)
{
    var resourceModels = (from project in POTSModel.ProjectList
                          where project.Id == Convert.ToInt32(formCollection["SelectProject"])
                          select project).First().Resources;

    return PartialView("ResourceList", resourceModels);
 }

It works fine from an Ajax.ActionLink like this:

<%= Ajax.ActionLink("Select", "GetResourcesByProject", "CreateRequest", new { projectId = item.Id }, new AjaxOptions { UpdateTargetId = "ResourceListDiv" })%>

When the post happens I'm navigated to a new page instead of staying on the existing page and updating the contents of the div.

Thanks.

Bleb

Answer 1

submit() probably don't trigger Ajax.BeginForm, and so it is processed as usual post. See this for example: Additional jQuery events submitting my Ajax.BeginForm. Alternatively add submit button (maybe hidden) and call its .click().

Flagship

The hidden submit button works perfectly: <% using (Ajax.BeginForm("GetResourcesByProject", "CreateRequest", new AjaxOptions { UpdateTargetId = "ResourceListDiv" })) { Response.Write(Html.DropDownList("SelectProject", Model.ProjectList, "Select Project", new { onchange = "document.getElementById('projectSubmit').click();" })); %> <input type="submit" name="projectSubmit" style="visibility:hidden" /> <% } %> A bit ugly and cludgy but it works. Bummer that the normal form.submit() doesn't hit the ajax form. Thanks for the help. – Bleb

Answer 2

The using(Ajax.BeginForm(...)) doesn't work when it contains a Html.RenderPartial.

Alisander

Answer 3

Does it works with Internet explorer 7. I have some issue with IE7 in cascading DropDownList. The Ajax.BeginForm doesn't retrieve form (Request.Form["myIdForm"] is blank) Value in IE7, in all others web browser it works (including IE8)!

            <% using (Ajax.BeginForm("profileChanged", "profiles", new AjaxOptions() { UpdateTargetId = "customer", OnComplete = "SetHiddenProfile" }, new { @class = "filtersForm" }))
          {   %>                           
        <p id="customer"> 
            <% Html.RenderPartial("FilterContracts"); %>
        </p>
        <%} %>

I call the database to populate dropDown in profileChanged action and return a partial view ("FilterContracts").

Phylissphyll