ASP MVC View Content as JSON

Question

I have a MVC app with quite a few Controller Actions that are called using Ajax (jQuery) and return partial views content which updates a part of the screen. But what I would rather do is return JSON something like this.

return Json(new { 
    Result = true, 
    Message = "Item has been saved", 
    Content = View("Partial") 
});

Where the HTML is just a property of the Json. What this means is I need to retrieve the HTML that is rendered by the View method. Is there any easy way to do this, a few examples I have seen are quite convoluted.

Edit: This question was originally for ASP.NET MVC 1, but if version 2 makes it easier I would like to hear the answer.

Answer 1

Here is the answer! It is slight change from Martin From's method and it seems to work. If there are things missing please can people contribute any code changes in the comments section. Thanks.

From you controller call it like this:

string HTMLOutput = Utils.RenderPartialToString("~/Views/Setting/IndexMain.ascx", "", items, this.ControllerContext.RequestContext);

Add this to a class

public static string RenderPartialToString(string controlName, object viewData, object model, System.Web.Routing.RequestContext viewContext)
{
     ViewDataDictionary vd = new ViewDataDictionary(viewData);
     ViewPage vp = new ViewPage { ViewData = vd };

     vp.ViewData = vd;
     vp.ViewData.Model = model;
     vp.ViewContext = new ViewContext();
     vp.Url = new UrlHelper(viewContext);

     Control control = vp.LoadControl(controlName);

     vp.Controls.Add(control);

     StringBuilder sb = new StringBuilder();

     using (StringWriter sw = new StringWriter(sb))
     using (HtmlTextWriter tw = new HtmlTextWriter(sw))
     {
         vp.RenderControl(tw);
     }

     return sb.ToString();
}

Answer 2

This is a good solution to the problem: http://craftycode.wordpress.com/2010/05/15/asp-net-mvc-render-partial-view-to-string/

Answer 3

I've spent ages trying to do the same thing. I have a quick solution which will need to be extended on.

NOTE: I can see one issue already.. Any cookies and other variables are lost :(

What I did:

1. Create new ActionResult

   public class JsonHtmlViewResult : ViewResult
   {
       public IJsonHtml Data { get; set; }
   
       public override void ExecuteResult(ControllerContext context)
       {
           if (Data == null)
           {
               Data = new DefaultJsonHtml();
           }
   
           using (StringWriter sw = new StringWriter())
           {
               HttpRequest request = HttpContext.Current.Request;
               HttpContext.Current = new HttpContext(request, new HttpResponse(sw));
   
               base.ExecuteResult(context);
   
               Data.HtmlContent = sw.ToString();
           }
   
           // Do the serialization stuff.
           HttpResponseBase response = context.HttpContext.Response;
           response.ClearContent();
           response.ContentType = "application/json";
   
           JavaScriptSerializer serializer = new JavaScriptSerializer();
           response.Write(serializer.Serialize(Data));
       }
   }
   

2. The Data class

   public interface IJsonHtml
   {
       String HtmlContent { get; set; }
   }
   
   public class DefaultJsonHtml : IJsonHtml
   {
       public String HtmlContent { get; set; }
   }
   

3. The controller extensions

   public static ActionResult JsonHtmlViewResult(this Controller controller, string viewName, string masterName, object model, IJsonHtml data)
   {
       if (model != null)
       {
           controller.ViewData.Model = model;
       }
   
       return new JsonHtmlViewResult
       {
           Data = data,
           ViewName = viewName,
           MasterName = masterName,
           ViewData = controller.ViewData,
           TempData = controller.TempData
       };
   }
   

Answer 4

Why not just have static html "partials" and grab all the dynamic content from the json? You should be able to load the html files with jquery when the page loads or when needed quite easily.

This link on JQuery Ajax gives this example:

//Alert out the results from requesting test.php (HTML or XML, depending on what was returned).
$.get("test.php", function(data){
  alert("Data Loaded: " + data);
});

Answer 5

NerdDinner has some pretty good examples of this. Here is the SearchController in NerdDinner, which has a method called SearchByLocation that returns a list of JsonDinners (source code for NerdDinner is Creative Commons):

namespace NerdDinner.Controllers {

    public class JsonDinner {
        public int      DinnerID    { get; set; }
        public string   Title       { get; set; }
        public double   Latitude    { get; set; }
        public double   Longitude   { get; set; }
        public string   Description { get; set; }
        public int      RSVPCount   { get; set; }
    }

    public class SearchController : Controller {

        IDinnerRepository dinnerRepository;

        //
        // Dependency Injection enabled constructors

        public SearchController()
            : this(new DinnerRepository()) {
        }

        public SearchController(IDinnerRepository repository) {
            dinnerRepository = repository;
        }

        //
        // AJAX: /Search/FindByLocation?longitude=45&latitude=-90

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult SearchByLocation(float latitude, float longitude) {

            var dinners = dinnerRepository.FindByLocation(latitude, longitude);

            var jsonDinners = from dinner in dinners
                              select new JsonDinner {
                                  DinnerID = dinner.DinnerID,
                                  Latitude = dinner.Latitude,
                                  Longitude = dinner.Longitude,
                                  Title = dinner.Title,
                                  Description = dinner.Description,
                                  RSVPCount = dinner.RSVPs.Count
                              };

            return Json(jsonDinners.ToList());
        }
    }
}

Answer 6

I am using the HTML Helper from this article: Render partial view to string in ASP.NET MVC. It works perfectly!