Question

This is what my controller action looks like

[HttpPost]
[OutputCache(Location = OutputCacheLocation.None)]
public ActionResult GetData(string Key, string Physician)
{
    string physicianCode = Physician.Split(' ').ElementAt(0).Trim();
    CaseProfile caseProfile = HttpContext.Cache.Get(Key) as CaseProfile;
    return PartialView("_CaseProfile", caseProfile);
}

This is what i have on my partial view _CaseProfile which is displayed inside jQuery dialog

<div id="paged-case-profile-div">    
@using (Ajax.BeginForm("GetData", "Group", 
    new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "paged-case-profile-div"
         , OnSuccess="OnSuccess", OnComplete="OnComplete", InsertionMode=InsertionMode.Replace }))
        {
        @Html.HiddenFor(m => m.Key)
        @Html.DropDownList("Physician", Model.PhysicianSelectList,
                new { style = "font-size: 11px;", onchange = "this.form.submit();" })
<div>

@{

var grid = new WebGrid(source: Model.Items.AsEnumerable(),
 canPage: true, canSort: false, rowsPerPage: 10);
                }

                @grid.GetHtml(
                htmlAttributes: new { align = "center" },
                tableStyle: "table",
                headerStyle: "header-row",
                alternatingRowStyle: "alternate-row",
                columns:
                    physicianGrid.Columns(
                        physicianGrid.Column("PatientId", "Patient Id"),
                        physicianGrid.Column("MedRecNum", "Med Rec Num"),
                        physicianGrid.Column("AdmissionDate", "Admission Date")))
            </div>
        }
    </div>

all my js files are added in _Layout.cshtml file.
I want to do ajax post back on drop down list and update the paged-case-profile-div with the latest content returned from controller action.
The issue is that the new content returned from server is rendered into the new page which is not i want. I just want my div outside the ajax form to be updated with new contents.
Please note that i am just showing alert boxes on OnSuccess and OnComplete javascript methods.
Could you please let me know what is wrong in my code?

Also – please note that i have checked almost all related issues on stackoverflow regarding this, but none of them seem to help me. I would appreciate if anyone can point out the wrongs in my code and give me suggestions to correct it instead of pointing to just some other question / posting.

Answer 1

Make sure you have referenced the jquery.unobtrusive-ajax.js script to your page or the Ajax.BeginForm helper won’t be any different than a standard Html.BeginForm helper:

<script type="text/javascript" src="@rl.Content("~/scripts/jquery.unobtrusive-ajax.js")"></script>

In your dropdown list try replacing:

onchange="this.form.submit();"

with:

onchange="$(this).closest('form').submit()"

or give your Ajax form an id and then:

onchange="$('#myajaxform').submit()"

When you do this.form.submit(); you are invoking the submit event of the underlying DOM element which doesn’t execute any onsubmit handlers that have been subscribed to this form.