MVC, Jquery, and Ajax to display object based on dropdown

Question

I'm trying to design a view to accept donations, sell memberships, or sell tickets to events.

I have a dropdown list that displays "Make a donation", "Purchase membership", and the subsequent options are populated from the IList<Event> Model passed from the controller. I use javascript to determine which panel (membership, donation, or event) should be displayed based on the selection.

The problem I'm having is that once an event is selected, I need to be able to dynamically populate the Event panel with the properties of the selected event (without, of course, having to put the user through a browser refresh). I was told by someone that I should be able to use Ajax to accomplish this. Supposedly I could go to my server/home/GetEventById action to do this. However, I haven't been able to find any examples or any tutorials that would help me accomplish this.

Could anybody shed some light on this for me by means of how to go about this, or provide examples or tutorials that would help me?

Answer 1

I'm not sure how MVC changes this, but here is how I do a callback with Ajax:

In the onchange event of the dropdownlist box you would call a java function that uses Ajax's PageMethod, something like this:

       PageMethods.getVersions(LoadVersionsCallback);

The method you are calling in your .aspx.cs file has to be static, it can take parameters and looks something like:

     [System.Web.Services.WebMethod]    
    public static string getVersions()    {      
    StringBuilder sb = new StringBuilder();       
    ... etc.      
    return sb.ToString();    
    }

The javascript function that you specified when you called the method will run when the method completes. It will be passed the results.

   function LoadVersionsCallback(result) {    
// do something with the results - I load a dropdown list box.   
...etc.     
 }

Answer 2

Your question is a bit too broad. I assume you already implemented your Action in controller so we concentrate only on client side scripting.

Following should within $.ready:

$("#ddlSelectEvent").change(function() { // this will fire when drop down list is changed
    var selection = $(this).attr("selected"); // text representation of selected value
    $(".panels").hide();
    $("#panel_" + selection).show(); // Assume the panel naming will be panel_MakeDonation and those...
    // Now is time for ajax - load html directly
    $.get("server/home/geteventbyId",
        {id: "12345"},
        function (data) { // callback when data is loaded
            $("#panel_" + selection).html(data);
        }
    );
});

Above codes assume you populate content of panel with html. You might use JSON or other types depending on how you implement it. http://docs.jquery.com/Ajax/jQuery.get#urldatacallbacktype

Answer 3

Here is a code example of fetching some content by calling a controller method through ajax, and then populating a jQuery dialog with it. Hopefully this helps point you in the right direction.

The controller method:

[AcceptVerbs(HttpVerbs.Get)]
public ActionResult GetItemsForJson()
{
    var items = Repository.GetItems();
    var result = Json(items);

    return result;
}

And the jQuery to make it happen:

$('#dialog_link').click(function() {
      $.getJSON("/Items/GetItemsForJson/", getItems);
   });


 function getItems(items) {

        $("#itemlist").text("");
        $.each(items, function(i, item) {
            $("#itemlist").append("<li>" + item.Id + item.Name + "</li>");
        });

 }