How can I update a ASP.NET MVC ViewData via jQuery ajax?

Question

Hi!!

I have a page that highly depends on a IList (in ActionResult "MyEvents") that I pass in ViewData. Something like that: ViewData["events"] = listOfEvents; and in the end, I just return View();

And in my View, I take this ViewData["events"] and do a foreach in it so I can iterate through its contents.

But, this ViewData must be dynamically filled. So, when I click on a day (I'm using jQuery DatePicker), this day is sent as an argument to "MyEvents" and this day will be very important to my listOfEvents that will fill my ViewData["events"].

But, the result I'm getting is that the div that contains my foreach creates another whole page inside it!! I've tried to do $("#myDiv").html(contentFromMyEvents) and this was what happened.

Just for testing, I've tried also to do $("#myDiv").text(contentFromMyEvents) and the whole html code with all its tags and everyting else from my page appeared inside the div! It was a page inside a page!!

So, I think that is happening because I'm returning "return View();" and of course it will render my whole View again.

So, how can I pass just the ViewData["events"] and update it on my page??

Thanks!!

Answer 1

You could use partial rendering or you could have jquery select the element from the return value.

$("#myDiv").empty().append($(contentFromMyEvents).find('#myDiv'));

Also, keep in mind that if you have any datepickers or links that require events inside of here you may have to rebind them.

Answer 2

You should look into passing data back and forth as JSON.

Then using jQuery/Javascript to manipulate and format the data as you see fit.

Remember that once the page is on the client the client's browser has no idea what ViewData is.

Edit: Action Code:

public ActionResult AjaxGetEvents(int id)
{
    IList<object> events = new List<object>();
    foreach( Event event in SomeMethodToGetEvents(id) )
    {
       events.Add( new { Property1 = event.Property1, Property2 = event.Property2 } );
    }
    return JSON(events);
}

Client Side Code:

var url = "some url that returns JSON";
jQuery.getJSON( url, function(data){
    jQuery.each( data ){
        jQuery("#someDiv").append( data.Property1 + " " + data.Property2 "<br/>" );
    });
 });

Answer 3

Look to the load function in jQuery(http://docs.jquery.com/Ajax/load). Call your controller with load and then inject the result into your html document.

$("myDiv").load("/Controller/Action");

Your ViewData will be parsed on the server side. Instead of returning View(), return a PartialView() pointing to a user control. What comes out the is just a HTML fragment.