Returning the view with JSON parameters in .NET MVC and updating the DOM

Question

I have a .NET action which basically returns a set of JSON results like this:

 return Json(new
 {
   lineData = groupedByDate,
  // more properties returned here...
   dataForTable = View("Index") // note this one
  }, JsonRequestBehavior.AllowGet);

Before the return function I set up the data source for my ViewBag which is the source of data for my table in HTML like this:

ViewBag.Items = items.ToList();

And in my view:

<table id="tableProducts" class="table table-striped table-hover table-fw-widget">
       <tbody>
       @if (ViewBag.Items != null)
       {
        foreach (var item in ViewBag.Items)
        {
           <tr>
                  <td>@item.Title//for example</td>                                                                      
           </tr>
        }
       }
       </tbody>
</table>

And here is the part that's not working for me... I'm actually setting up the json values in my .done method from post like this:

($.post...).done(function(data){
graph.SetData(data.lineData); // this is fine
And now I would like to simply inject the returned view here as well in the DOM.. Like this:

    var products= $('<table />').append(data.dataForTable).find('#tableProducts').html();
    $('#tableProducts').html(products);

});

And so this is the problem:

 var products= $('<table />').append(data.dataForTable).find('#tableProducts').html();
        $('#tableProducts').html(products);

I'm expecting to inject the returned part of the view into the DOM but nothing happens when I do this... The table is still empty as it was in the beginning...

What am I doing wrong here?

check the ajax request and see whether the json returning from server is what you expected. — Shyju, Jul 02 '17 at 15:55
@Shyju it says this: Object {MasterName: "", Model: null, TempData: Array(0), View: null, ViewBag: Object…}MasterName: ""Model: nullTempData: Array(0)View: nullViewBag: ObjectViewData: Array(2)ViewEngineCollection: Array(2)ViewName: "Index"__proto__: Object — User987, Jul 02 '17 at 15:57
Maybe I should state the path to my view or something like that ? — User987, Jul 02 '17 at 15:58
@User987 your JSON is empty, you should put a breakpoint in your JSON method to check values there, as you post in comment it is empty so you table is empty. — Roxy'Pro, Jul 02 '17 at 17:39
@Roxy'Pro i figured it out... I had to parse the View as string and then pass it as a json property, and then simple parse it in jquery and inject needed data into the dom... :) — User987, Jul 02 '17 at 18:11

score 0 · Answer 1 · answered Jul 03 '17 at 06:22

If you want implement this kind of functionality then you can use below flow:

1) Create partial view for html

2) Convert partial view into html string using some function

3) Pass that string into json parameter

4) Using ajax call method

5) In ajax success you get your html string replace it wherever you want

Check this link for reference

Returning the view with JSON parameters in .NET MVC and updating the DOM

1 Answers1