Post back Data to the Same View using Jquery and Json data MVC2

This is a very basic question, I think I ask very tough questions on here and they never get answered... Let me break it down to its simplest possible components and work up from there... I have a view which requires user information to be entered in... on submit, this view calls a controller, which will give me the data that I need to put back on to this SAME view... How do I get get that data back onto my view without calling the same view again at the end of the execution of the controller...?

Here is what I have so far (Jquery function)...

     $(function () {
    $("#DemoGraphSubmit").click(function (e) {
        e.preventDefault();
        var data = [];
        $.getJSON("/PatientACO.aspx/SearchByDemographic", null, function (data) {
         开发者_StackOverflow   data = $.map(data, function (item, a) {
                return "<option value=" + item.Value + ">" + item.Text + "</option>";
            });
            $("#PatientListToAdd").html(data.join(""));
        });
    });
});

submit button and select list that I want populated

    <div >
    <select id="PatientListToAdd">Add Patient</select>
    </div>

While my example doesn't exactly mimic your design (you might be using a page method or some questionable routing), but as long as /PatientACO.aspx/SearchByDemographic is returning JSON, you should be able to apply this code. Populate the List<ListItem> collection with your data as needed and return JSON.

I added an action called SearchByDemographic, and you will see in my jQuery further down that I use it instead of your URL. However, it still accepts POST requests and returns JSON.

[HttpPost]
public JsonResult SearchByDemographic()
{
    List<ListItem> list = new List<ListItem>() {
        new ListItem() { Value = "1", Text = "Patient 1" },
        new ListItem() { Value = "2", Text = "Patient 2" },
        new ListItem() { Value = "3", Text = "Patient 3" }
    };

    return this.Json(list);
}

Then, my jQuery is slightly modified to use $.ajax which is just longhand for $.getJSON and it allows a few more options.

$('#DemoGraphSubmit').click(function (e) {
    e.preventDefault();

    $.ajax({
        url: 'SearchByDemographic',
        type: 'POST',
        success: function (data) {
            $.each(data, function (i, optionData) {
                var option = new Option(optionData.Text, optionData.Value);
                $('#PatientListToAdd').append(
                    $('<option></option>').val(optionData.Value).html(optionData.Text)
                );
            });
        }
    });
});

You're using a GET request along with JSON data so first thing's first, you need to allow this using JsonRequestBehavior.AllowGet. Let's say you have a PatientACOController with a SearchByDemographic action

public class PatientACOController : Controller
{
    public ActionResult SearchByDemographic() 
    {  
        // code to get patients (hopefully you have something similar)
        // Patient class has Text and Value Properties
        IEnumerable<Patient> patients = PatientRepository.All()

        return Json(patients, JsonRequestBehavior.AllowGet);
    }

}

Your jQuery code seems ok. You're sending null for data. Some small voice in the back of my head is saying that if you intend to send no data then you should use an empty object or omit it altogether. So

$(function () {
    $("#DemoGraphSubmit").click(function (e) {
        e.preventDefault();
        var options = [];
        $.getJSON("/PatientACO/SearchByDemographic", function (data) {
            options = $.map(data, function (item, i) {
                          return "<option value=" + item.Value + ">" + item.Text + "</option>";
                      });
            $("#PatientListToAdd").html(options.join(""));
        });
    });
});