Set the result of Html.Partial to a js string

Question

This is a simplified version of what I'm trying to accomplish:

@{
    Thing t = new Thing(); // create an object
    IHtmlString TV = Html.Partial("ThingView", t); // get html based on that model
}
<script>
    $(function(){
        var tv = "@TV"; // hold the html in a js variable
    }
</script>

However I get a javascript error:

SyntaxError: unterminated string literal

var tv = "

I understand the problem is the Html.Partial is generating html with a bunch of white space, and it's messing up javascript, however it seems like there should be a way to say @TV.NoWhiteSpace() or something.

I've searched for a solution, but all I'm seeing are Regex solutions, which seems like a sloppy, and possibly mistake-ridden solution.

Is there a cleaner or preferred way to do this?

You could try to some heredoc syntax hacks as shown [here](http://stackoverflow.com/q/4376431/21727). — mbeckish, Aug 24 '15 at 18:40

score 1 · Answer 1 · answered Aug 24 '15 at 19:30

I let JQuery take care of it instead:

First, store the results of html.partial in a hidden div:

<div id="T1" style="display:none;">@T1</div>

Then, use JQuery to save the contents of the div to the js variable:

var t1 = $("#T1").html();

Note: I am only posting this answer because I can't find a better one anywhere. I won't mark it as the answer in hopes that C# will fix this obvious oversight, and someone can answer it in the future.

score 1 · Answer 2 · answered Aug 24 '15 at 20:19

1

Use Html.ToJson:

var value = @(Html.ToJson(value));

In some cases I've had to use JSON.Parse as well:

var value = JSON.Parse(@(Html.ToJson(value)));

Here's an article that might help: https://iterativo.wordpress.com/2013/04/04/converting-c-razor-models-into-javascript-objects/

answered Aug 24 '15 at 20:19

tsacodes

350
3
8

Sorry, I realized my title suggests I wanted a javascript object. However, I simply need a string of the view with no unnecessary white space. I changed the title to be a better descriptor of what I'm looking for. – Travis Heeter Aug 25 '15 at 11:34
1

Let me ask you this, what problem are you trying to solve here? Why would you want this rendered into a javascript string instead of as an html element? – tsacodes Aug 25 '15 at 12:37
Here's how my program works: Basically when one select box changes, it causes another option to switch between one of three possible lists (which are generated via html.partial). I want to use JQuery to handle all the switching, so I want to store all three possible lists on the window object so they can be switched quickly. C#, as far as I can tell, does not render views in a condensed html output for some reason, meaning there does not seem to be an easy way to assign view-generated html to a js string, hence the question. – Travis Heeter Aug 25 '15 at 13:41
I'm picking up what you're putting down. I think? Personally, I'd tell you for what you're doing, you may want to look into a databinding framework, such as angular, kendo ui, knockout.js, etc. Alternatively, if you wanted to lazy load and your using jQuery I'd do the following: -create X number of hidden divs to store my partials, each with a unique id. -create controller methods to serve the partials. -use jquery ajax calls to call the controller method and place the the html into the respective hidden div -when switching buttons check if the div has content, and get hide/show accordingly – tsacodes Aug 25 '15 at 14:41
Further more, if you wanted, you could just render the partials into hidden divs and use jquery to hide and show based on click. – tsacodes Aug 25 '15 at 14:42
Haha, that's actually exactly what I did - rendering the output into hidden divs, I answered my own question with that yesterday (see below) because I realized C# really has no way of doing it easily, and JQuery does it automatically. It's so weird that C# doesn't do it. – Travis Heeter Aug 25 '15 at 14:45
Hah, right on! I did see that the syntax through me off a bit though. That and I didn't realize you answered you own question, so I assumed you didn't want that one =P – tsacodes Aug 25 '15 at 14:48

score 1 · Answer 3 · answered Mar 10 '18 at 15:29

1

Try:

@{
    Thing t = new Thing();
    IHtmlString TV = Html.Partial("ThingView", t);
}

<script>
$(function(){
    var tv = `@TV`;
}
</script>

guys notice that the only thing you need to do is to enclosing @TV variable in those quote marks "``"

answered Mar 10 '18 at 15:29

HenryGuillen17

370
1
3
13

score 0 · Answer 4 · answered Aug 24 '15 at 18:40

0

Try doing:

var tv = "@Html.Raw(TV.ToHtmlString())";

answered Aug 24 '15 at 18:40

Brian Mains

50,520
35
148
257

Sorry, that didn't change anything. – Travis Heeter Aug 24 '15 at 18:51
Just try outputing the raw of the partial view to the screen, not in the JS variable. If nothing comes back, then there is a bigger issue. You may need to replace any instances of a double-quote with a single-quote too, a requirement for strings that have quote data within them. Or use a single-quote for the outer string, and ensure there is no single quotes returned from the view. – Brian Mains Aug 24 '15 at 18:53
I tried chaning the double quotes to single, still no luck. I printed TV, and it produces the html I expected. BTW, thanks for the help. – Travis Heeter Aug 24 '15 at 18:56

score 0 · Answer 5 · edited Jun 19 '18 at 10:59

First at all you call Html.Partial("ThingView", Thing); insted of Html.Partial("ThingView", t); Anyway i use custom extension to get html from view:

controllerContext.renderViewToString.

This method should be declared somewhere in project:

public static class ViewHelper
{
    public static string RenderViewToString(this Controller controller, string viewName, object model)
    {
        using (var writer = new StringWriter())
        {
          var viewResult = ViewEngines.Engines.FindPartialView(controller.ControllerContext, viewName);
          controller.ViewData.Model = model;
          var viewCxt = new ViewContext(controller.ControllerContext, viewResult.View, controller.ViewData, controller.TempData, writer);
          viewCxt.View.Render(viewCxt, writer);
          return writer.ToString();
        }
    }
}

With above code you can use it like this:

@{

var html = Request.ControllerContext.renderViewToString("ThingView", new ThingView())
}
<script>
$(function(){
var t = "@html";
});
</script>

No, I call it with an instance of a model. I wanted t, not Thing. But I like your answer otherwise. — Travis Heeter, Aug 25 '15 at 09:07

Set the result of Html.Partial to a js string

5 Answers5