Question

I don’t understand why this keeps happening… An hour ago I had the return value of my action returning the Json Data to my view and It was updating my ListBox just fine… I don’t know what on earth happened… but all of a sudden it is just prompting me to download the data… I have know Idea what I did, I didn’t do anything as a matter of fact… I must have did something though, because it is no longer working!!! very frustrating…

Here is my view and Jquery function…

    [HttpPost]
    public ActionResult SearchByDemographic1(FormCollection formCollection)
    {

        SLI.Text = patient.name[0].lastName + ", " + patient.name[0].firstName + " | " + patient.address[0].street1 + " | " + patient.address[0].city + " | " + patient.address[0].country;
                SLI.Value = patient.compositeID[0].id + "";
                patientList.Add(SLI);
        }
        ViewData["PatientListToAdd"] = patientList;
        //ViewData["POPID"] = PopID;

        return Json(patientList, JsonRequestBehavior.AllowGet);        
    }



    $(function () {
    $("#DemoGraphSubmit").click(function (e) {
        e.preventDefault();
        var form = $("#DemoGraphID");
        var srlzdform = form.serialize();
        var PopID = <% =PopID %>
        var options = [];
        var serializedForm = form.serialize();
        $.post("/PatientACO/SearchByDemographic", formCollection:srlzdform, function (data) {
            options = $.map(data, function (item, i) {
                return "<option value=" + item.Value + ">" + item.Text + "</option>";
            });
            $("#PatientListToAdd").html(options.join(""));
        });
    });
});

Answer 1

I believe you have an error in you JavaScript (check FireBug) that is causing your click event to fail, submitting the form normally (and returning a JSON response, not calling your callback function).

Change this:

$.post("/PatientACO/SearchByDemographic", formCollection:srlzdform, function (data) {
    options = $.map(data, function (item, i) {
        return "<option value=" + item.Value + ">" + item.Text + "</option>";
    });
    $("#PatientListToAdd").html(options.join(""));
});

To this:

$.post("/PatientACO/SearchByDemographic", srlzdform, function (data) {
    options = $.map(data, function (item, i) {
        return "<option value=" + item.Value + ">" + item.Text + "</option>";
    });
    $("#PatientListToAdd").html(options.join(""));
});

The offending code is formCollection:srlzdform. This is not a valid JavaScript expression and will cause an error. You may have meant { formCollection:srlzdform }, but I don’t think that’s necessary. The model binder should be able able to figure it out.