Returning a PartialView with both HTML and JavaScript

Question

I am making an AJAX call (with jQuery) to retrieve a PartialView. Along with the HTML I'd like to send back a JSON representation of the object the View is displaying. The crappy way that I've been using is embedding properties as hidden inputs in the HTML, which quickly becomes unwieldy and tightly couples far too much stuff.

I could just send the JavaScript in a <script> tag after the HTML, but I'm really anal about keeping those things separate. That would look like this:

<%@ Control Language="C#" AutoEventWireup="true" Inherits="System.Web.Mvc.ViewUserControl<Person>" %>
<div class="person">
  First Name: <%= Html.TextBox("FirstName", Model.FirstName) %>
  Last Name: <%= Html.TextBox("LastName", Model.LastName) %>
</div>
<script type="text/javascript">
  // JsonSerialized object goes here
</script>

Another option I considered is to make a second AJAX call to an action that returns JsonResult, but that also feels like bad design.

Answer 1

Probably not the most elegant answer you'll get, but just to throw this out there:

You could return purely json from your action method,

something that would look like this:

{
    Html: "<div class=\"person\"> etc...",
    Json: { // your object here
          }
}

in your controller you'll need something like this to render your view:

var existingContext = HttpContext.Current;
var writer = new StringWriter();
var response = new HttpResponse(writer);
var httpContext = new HttpContext(existingContext.Request, response);

var viewResult = myAction(bla);

HttpContext.Current = httpContext;

viewResult.ExecuteResult(this.ControllerContext)

HttpContext.Current = existingContext;
var viewAsHtml = writer.ToString();

Answer 2

The same solution as Andrew, but maybe a bit more MVC'ish...

Create a new class which inherits from ViewPage. Override its Render method to render the page itself, and then stuff that into the output Andrew suggested. So that all the hacking occurs in the Render method, where it should happen.

Now each view that you create you change the line:

<%@ Page Title="" Language="C#" Inherits="System.Web.Mvc.ViewPage<MyModel>" %>

with

<%@ Page Title="" Language="C#" Inherits="CustomViewPage<MyModel>" %>

I didn't check it myself, but guess it should work. If you want I can try and build it.

Answer 3

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 4

I think I found a pretty good way to do this, just wrap the JSON up in an HtmlHelper extension. Here's the class:

using System.Web.Script.Serialization;

public static class JsonExtensions {
    public static string Json(this HtmlHelper html, string variableName) {
        return Json(html, variableName, html.ViewData.Model);
    }

    public static string Json(this HtmlHelper html, string variableName, object model) {
        TagBuilder tag = new TagBuilder("script");
        tag.Attributes.Add("type", "text/javascript");
        JavaScriptSerializer jsonSerializer = new JavaScriptSerializer();
        tag.InnerHtml = "var " + variableName + " = " + jsonSerializer.Serialize(model) + ";";
        return tag.ToString();
    }
}

And you call it via:

<%= Html.Json("foo") %>
<%= Html.Json("bar", Model.Something) %>

The one catch that I can think of is that it isn't a completely perfect separation; you are still technically putting JavaScript in the HTML. But, it doesn't make an extra call to the server, and the markup in the IDE is still very clean.