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

Question

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!!

AGuyCalledGerald · Accepted Answer · 2021-10-08 09:33:48Z

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 then is just a HTML fragment.

edited Oct 8, 2021 at 9:33

AGuyCalledGerald

8,22818 gold badges79 silver badges124 bronze badges

answered Feb 12, 2009 at 4:46

Josh Bush

2,7284 gold badges24 silver badges25 bronze badges

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

4 Comments

Kelly Over a year ago

This way will work but I personally think it is a bad practice to send html over the pipe.

Josh Bush Over a year ago

Agreed. I think there might be some circumstances where my example is acceptable though. I just provided it for the sake of completeness.

Josh Bush Over a year ago

Thinking about this a little more, I used this technique recently when I needed to inline an existing entry form into another form. The form layout was already in another view, and I just needed a modal with that same GUI for a "quick add" feature.

André Miranda Over a year ago

Thanks Josh! I just modified a little bit what you've told me, but I used much of your tip!! Thanks you too Kelly!

bendewey · Accepted Answer · 2009-02-11 22:02:02Z

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.

answered Feb 11, 2009 at 22:02

bendewey

40.4k13 gold badges105 silver badges127 bronze badges

Comments

Kelly · Accepted Answer · 2009-02-12 05:15:35Z

1

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

edited Feb 12, 2009 at 5:15

answered Feb 11, 2009 at 22:25

Kelly

1871 silver badge8 bronze badges

3 Comments

André Miranda Over a year ago

Kelly, I'm doing this when I ckick on a day: $.ajax({ url: 'Admin/Schedule/MyEvents/?data=' + date, type: 'GET', success: function(content) { $("#myDiv").html(content) )}; It's something like that. The problem is that "return View();" (in my ActionResult) is (continues...)

André Miranda Over a year ago

(continuing...) is returning my whole page to that "success" $.ajax option. I think I've got to return any other kind of data in my ActionResult... I don't know, maybe "return JSON (ViewData["events"]);" ???

André Miranda Over a year ago

In my page I'm doing this: foreach (UserEvents event in (IEnumerable)ViewData["events"]) { //do all iteration here }... So, how can I get a JSON and treat this ViewData???

Collectives™ on Stack Overflow

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

3 Answers 3

4 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related