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

Question

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) {
            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>

David Fox · Accepted Answer · 2011-07-28 20:40:00Z

1

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)
                );
            });
        }
    });
});

answered Jul 28, 2011 at 20:40

David Fox

10.8k9 gold badges53 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

SoftwareSavant Over a year ago

Both good comments... Do you know why my browser keeps asking me to save the JSON data if I do not include e.preventDefault, and it does nothing when I leave it in?

David Fox Over a year ago

@DmainEvent the preventDefault() function keeps the element from firing its default event e.g. an anchor will not browse to its href value, a submit button will not submit the form in which it resides, etc.

SoftwareSavant Over a year ago

So why do we use it? And how do I get the action to fire if I so use it?

Russ Cam Over a year ago

@DmainEvent - we use it when we want to do something client side and prevent the element from performing it's default action e.g. an <a> element when clicked will navigate the browser to the href value as David says. If you're using an <a> element to pull data from the server via AJAX and the URL you are using is the href attribute value, you want to prevent the default action from happening when you click on the <a>. So, inside of a click event handler, you would call preventDefault on the event object (this is a standard w3c event normalized across browsers by jQuery) to do so.

SoftwareSavant Over a year ago

So I guess I need to call my action method using jquery. I thought I was doing that, but the breakpoints in my method never get called. And the method never executes... What am I doing wrong?

|

Russ Cam · Accepted Answer · 2011-07-28 20:52:59Z

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(""));
        });
    });
});

Collectives™ on Stack Overflow

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

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related