Getting a Partial View's HTML from inside of the controller

Question

I have developed a simple mechanism for my mvc website to pull in html via jquery which then populates a specified div. All is well and it looks cool.
My problem is that i'm now creating html markup inside of my controller (Which is very easy to do in VB.net btw) I'd rather not mix up the sepparation of concerns.

Is it possible to use a custom 'MVC View User Control' to suit this need? Can I create an instance of a control, pass in the model data and render to html? It would then be a simple matter of rendering and passing back to the calling browser.

Heartsease

Aren't you mixing up the seperation of concerns by making HTML markup in your controller anyway? If you need to do something repeatedly look at using an ascx control? – Ursula

Shouldn't the view be concerned about generating HTML? Why is your markup in your controller? – Springspringboard

2leggedspider.wordpress.com/2009/11/05/… i just needed the same functionality. returning rendered partial in my Json object. This link was usefull for me – Aether

Answer 1

You have several options.

Create a MVC View User Control and action handler in your controller for the view. To render the view use

<% Html.RenderPartial("MyControl") %>

In this case your action handler will need to pass the model data to the view

public ActionResult MyControl ()
{
    // get modelData

    render View (modelData);
}

Your other option is to pass the model data from the parent page. In this case you do not need an action handler and the model type is the same as the parent:

<% Html.RenderPartial("MyControl", ViewData.Model) %>

If your user control has it's own data type you can also construct it within the page

In MyControl.ascx.cs:

public class MyControlViewData
{
    public string Name { get; set; }
    public string Email { get; set; }
}

public partial class MyControl : System.Web.Mvc.ViewUserControl <MyControlViewData>
{
}

And in your page you can initialize your control's data model:

<% Html.RenderPartial("MyControl", new MyControlViewData ()
   {
        Name= ViewData.Model.FirstName,
        Email = ViewData.Model.Email,
   });
 %>

Furlani

this does not give your programmatic access to the HTML that is generated by the view/partial right? I don't understand how this answers the question... although I did learn from the answer, so I appreciate it as a high quality response. – Vibration

This response does not answer the question asked. How do I get a partial view's HTML from inside the controller? – Gunpoint

Are you wanting to capture/modify the HTML before sending it back to the browser? – Furlani

Why is this the accepted answer when it does not answer the question? – Sedgewake

Answer 2

This is a solution that is working with ASP.Net MVC 1.0 (many that claim to work with beta 3 don't work with 1.0), doesn't suffer of the 'Server cannot set content type after HTTP headers have been sent' problem and can be called from within a controller (not only a view):

/// <summary>
/// Render a view into a string. It's a hack, it may fail badly.
/// </summary>
/// <param name="name">Name of the view, that is, its path.</param>
/// <param name="data">Data to pass to the view, a model or something like that.</param>
/// <returns>A string with the (HTML of) view.</returns>
public static string RenderPartialToString(string controlName, object viewData) {
    ViewPage viewPage = new ViewPage() { ViewContext = new ViewContext() };
    viewPage.Url = GetBogusUrlHelper();

    viewPage.ViewData = new ViewDataDictionary(viewData);
    viewPage.Controls.Add(viewPage.LoadControl(controlName));

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

    return sb.ToString();
}

public static UrlHelper GetBogusUrlHelper() {
  var httpContext = HttpContext.Current;

  if (httpContext == null) {
    var request = new HttpRequest("/", Config.Url.ToString(), "");
    var response = new HttpResponse(new StringWriter());
    httpContext = new HttpContext(request, response);
  }

  var httpContextBase = new HttpContextWrapper(httpContext);
  var routeData = new RouteData();
  var requestContext = new RequestContext(httpContextBase, routeData);

  return new UrlHelper(requestContext);
}

It's a static method you can drop somewhere you find it convenient. You can call it this way:

string view = RenderPartialToString("~/Views/Controller/AView.ascx", someModelObject); 

Pentathlon

This is still something which is frequently needed on any major MVC project. So thanks for the method – Heartsease

This doesn't seem to work for me because my partials make use of the UrlHelper class stuffed into the Url property of the ViewUserControl, and this method seems to leave that property null, resulting in Exceptions on my helper calls. Any advice? – Gunpoint

Michael, maybe some info in #2032495 can help you. I don't remember having trouble with Url though and I think I was using it. – Pentathlon

Michael Lang, there I fixed it for your case. – Pentathlon

How to render Razor partial view? – Reproachful

The StringBuilder is not necessary as StringWriter default constructor makes one underneath and the ToString of a default constructed StringWriter gives you the StringBuilder ToString – Furan

Answer 3

I put together a rough framework which allows you to render views to a string from a controller method in MVC Beta. This should help solve this limitation for now.

Additionally, I also put together a Rails-like RJS javascript generating framework for MVC Beta.

Check it out at http://www.brightmix.com/blog/how-to-renderpartial-to-string-in-asp-net-mvc and let me know what you think.

Chantey

Answer 4

You would create your action like this:

        public PartialViewResult LoginForm()
        {
            var model = // get model data from somewhere
            return PartialView(model);
        }

And the action would return the rendered partial view to your jquery response.

Your jquery could look something like this:

$('#targetdiv').load('/MyController/LoginForm',function(){alert('complete!');});

Pharyngo

Answer 5

You should use jquery to populate your divs (and create new html elements if needed), and Json serialization for ActionResult.

Other way is to use jquery to call some controller/action, but instead json use regular View (aspx or ascx, webforms view engine) for rendering content, and with jquery just inject that html to some div. This is half way to UpdatePanels from asp.net ajax...

I would probably go with first method, with json, where you have little more job to do, but it's much more "optimized", because you don't transfer whole html over the wire, there are just serialized objects. It's the way that "big ones" (gmail, g docs, hotmail,..) do it - lot of JS code that manipulates with UI.

If you don't need ajax, then you basically have two ways of calling partial views:

• html.renderpartial("name of ascx")
• html.RenderAction(x=>x.ActionName) from Microsoft.web.mvc (mvc futures)

Adenoidal

In the first method you suggested, are you referring to using partial views? – Indefinite

No, there's no View for rendering content, at least no on server side, just Json object that is returned to jQuery, which then needs to perform rendering: dynamically create Divs, Spans, Tables, ... and populate them with data from json ajax request. Second method renders whole HTML on server and returns it to client. – Adenoidal

Answer 6

After much digging in google i have found the answer. You can not get easy access to the html outputted by the view.

http://ayende.com/Blog/archive/2008/11/11/another-asp.net-mvc-bug-rendering-views-to-different-output-source.aspx

Heartsease

Answer 7

I've done something similar for an app I'm working on. I have partial views returning rendered content can be called using their REST path or using:

<% Html.RenderAction("Action", "Controller"); %>

Then in my actual display HTML I have a DIV which is filled from jQuery:

<div class="onload">/controller/action</div>

The jQuery looks like this:

<script type="text/javascript">
    $.ajaxSetup({ cache: false });

    $(document).ready(function () {
        $('div.onload').each(function () {
            var source = $(this).html();
            if (source != "") {
                $(this).load(source);
            }
        });
    });
</script>

This scans for all DIV that match the "onload" class and reads the REST path from their content. It then does a jQuery.load on that REST path and populates the DIV with the result.

Sorry gotta go catch my ride home. Let me know if you want me to elaborate more.

Strangury

Answer 8

In rails this is called rendering a partial view, and you do it with render :partial => 'yourfilename'. I believe ASP.NET MVC has a similar RenderPartial method, but I can't find the official docs for MVC to confirm or deny such a thing.

Schooling

I have been googling this issue; seems there are a few methods which have been broken/removed since MVC went to beta. Still hunting for an answer – Heartsease

Answer 9

it is very simple you just have to create a strongly typed partial view(or user control) then in your cotroller something like this:

public PartialViewResult yourpartialviewresult()
{
    var yourModel
    return PartialView("yourPartialView", yourModel);
}

then you can use JQuery to perform the request whener you want:

$.ajax({
    type: 'GET',
    url: '/home/yourpartialviewresult',
    dataType: 'html', //be sure to use html dataType
    contentType: 'application/json; charset=utf-8',
    success: function(data){
         $(container).html(data);
    },
    complete: function(){ }
 });    

Misjoinder

Answer 10

I found this one line code to work perfectly. orderModel being my model object. In my case I had a helper method in which I had to merge a partial view's html.

System.Web.Mvc.Html.PartialExtensions.Partial(html, "~/Views/Orders/OrdersPartialView.cshtml", orderModel).ToString();

Dacosta