Using Razor template in Javascript variable

Question

I have a javascript function like this which is used with Select2.

function formatResult(item) {
    var markup = '<div class="card">\
                        <div class="card-header">\
                            <div class="avatar">\
                                <img src="http://mysite/profile/' + item.Username + '_thumb.jpg"/>\
                            </div>\
                            <div class="name">' + item.FirstName + ' ' + item.LastName + '</div>\
                            <div class="title">' + item.Title + '</div>\
                        </div>\
                    </div>';

    return markup;
}

And it works, although building the HTML is tedious when making it as a string.

What I would like to do is make this into a partial for easier maintainability and editing.

Ideally I want something like this.

function formatResult_User(item) {
    var markup = '@Html.Raw(Html.Partial("_UserCardTemplate").ToString().Replace(Environment.NewLine, ""))';

    return markup;
}

But how can I insert the item variables back in? Would I just put a placeholder value and use replace() on the markup variable such as markup = markup.replace('item.Title', item.Title)? Is there a better way?

Another option would be to have just <div class="title"></div> in the partial, and after the html has been added to the DOM, use $(element).find('.title').text(item.title); (and its not really necessary to create a separate partial - you can just create a (hidden) template and clone it) — user3559349
– user3559349, Commented Mar 18, 2018 at 12:03
Yes I know. But I assume you must be adding that html to the DOM, so I mean in the view <div id="template" style="display:none;><div class="card">....</div></div> and then var clone = $('#template').html().clone(); // add to DOM, then clone.find('.title').text(item.title); inside your function — user3559349
– user3559349, Commented Mar 18, 2018 at 12:12

tchelidze · Accepted Answer · 2018-03-18 12:06:09Z

1

You can use MustacheJs

View

<div>
    {{item.Title}}
</div>

Js

function formatResult_User(item) {
   var markup = '@Html.Partial("_UserCardTemplate")';
   return Mustache.render(markup, view);
}

Thought it will introduce external dependency (Mustache.js) in you project, which you may want to avoid

answered Mar 18, 2018 at 12:06

tchelidze

8,3781 gold badge33 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Peter Smith · Accepted Answer · 2018-03-18 13:06:30Z

There are two ways to do this, using JavaScript:

An Ajax call to the server to return the partial view as a string which is equivalent to the output from your function
Declare the variable var markup in JavaScript then initialise it in an MVC Razor view

For solution 1, create a controller extension:

public static class ControllerExtensions
{
    /// <summary>
    /// Renders the specified partial view to a string.
    /// </summary>
    /// <param name="controller">The current controller instance.</param>
    /// <param name="viewName">The name of the partial view.</param>
    /// <param name="model">The model.</param>
    /// <returns>The partial view as a string.</returns>
    public static string RenderPartialViewToString(this Controller controller, string viewName, object model)
    {
        if (string.IsNullOrEmpty(viewName))
        {
            viewName = controller.ControllerContext.RouteData.GetRequiredString("action");
        }

        controller.ViewData.Model = model;

        using (var sw = new StringWriter())
        {
            // Find the partial view by its name and the current controller context.
            ViewEngineResult viewResult = ViewEngines.Engines.FindPartialView(controller.ControllerContext, viewName);

            // Create a view context.
            var viewContext = new ViewContext(controller.ControllerContext, viewResult.View, controller.ViewData, controller.TempData, sw);

            // Render the view using the StringWriter object.
            viewResult.View.Render(viewContext, sw);

            return sw.GetStringBuilder().ToString();
        }
    }
}

Then, an ActionResult with item as a parameter return a Json result to the Ajax call.

var userCardTemplate = this.RenderPartialViewToString ("UserCardTemplate", item);
 return Json(new {formatResult = userCardTemplate });

Collectives™ on Stack Overflow

Using Razor template in Javascript variable

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related