Render Partial View using Jquery Ajax with variable data

Question

I have already read this post, but I am not sure know to make it work taking data from the user. Here is the ajax jquery I am using. I know (or at least think) that this cant render a partial. But it works all the way until the render fails. I thought it may be helpful to have.

 $.ajax(
     {
         type: 'POST',
         contentType: 'application/json; charset=utf-8',
         data: "{'test':" + "'" + dateText + "'}",
         dataType: 'json',
         url: 'Site/Grab/',
         success: function (result) {
         alert('Success');
         },

         error: function (error) {
            alert('Fail');
         }
      });

Here is my controller

[HttpPost]
    public ActionResult Grab(string test)
    {
        DateTime lineDate= Convert.ToDateTime(test);
        List<Info> myInfo= GameCache.Data(lineDate);
       return PartialView("_PartialView", myInfo);
    }

If it works until it tries rendering the partial, the problem is most likely in the partial view's markup. Please provide that code, as well as the error you're receiving. — StriplingWarrior, Jun 15 '11 at 02:25

RPM1984 · Accepted Answer · 2011-06-15T02:34:36.363

Okay, couple of things to try:

1) dataType is the expected result of the ajax call. In your case, your sending JSON, but receiving HTML. The content-type parameter specifies the request, which you have (and what you have is correct). So the data type should be:

dataType: 'html',

2) You need to serialize the JSON. Try grabbing the lightweight JSON library and stringify'ing:

var test = { test: 'testvalue' };
$.ajax {
   ...
   data: JSON.stringify(test),
   ...
});

Much easier than trying to coerce a JSON string with quoatations. Create a regular JS variable, then stringify it.

The rest of your code looks fine.

If it's a problem with the HTML/markup of the partial view itself, run in debug mode and Visual Studio should stop on the line in the markup that is causing the problem.

Bonus Hint: ASP.NET MVC 3 includes built-in JSON model binding. So you can create a basic POCO that matches the fields of your JSON object, then accept it as a strongly-typed object in the action method:

[HttpPost]
public ActionResult Grab(MyJsonObject obj) 
{
   DateTime lineDate= Convert.ToDateTime(obj.test);
   List<Info> myInfo= GameCache.Data(lineDate);
   return PartialView("_PartialView", myInfo);
}

Since your only sending one parameter, it's overkill - but if you have more than 2 then it's worthwhile using a JSON POCO.

when I switched data data type to html is repaired the problem. — dan_vitch, Jun 15 '11 at 17:18

score 3 · Answer 2 · edited Jan 05 '12 at 11:07

3

Change your controller code to:

public ActionResult Grab(string test) {
  DateTime lineDate= Convert.ToDateTime(test);
  List<Info> myInfo= GameCache.Data(lineDate);

  return Json(new { data = this.RenderPartialViewToString("_PartialView", myInfo) });
}

edited Jan 05 '12 at 11:07

Jehof

34,674
10
123
155

answered Jan 05 '12 at 10:34

Rashid Hussain Siddiqui

41
1

where the "RenderPartialViewToString()" method exists? – Muneer Mar 04 '12 at 09:38
Here http://www.c-sharpcorner.com/blogs/7150/implementing-renderpartialviewtostring-in-asp-net-mvc-3.aspx or here http://craftycodeblog.com/2010/05/15/asp-net-mvc-render-partial-view-to-string/ – Marc Jun 29 '12 at 12:37

Render Partial View using Jquery Ajax with variable data

2 Answers2