在 Javascript 变量中使用 Razor 模板答案

【问题标题】：Using Razor template in Javascript variable在 Javascript 变量中使用 Razor 模板
【发布时间】：2018-03-18 11:54:22
【问题描述】：

我有一个这样的 javascript 函数，它与 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;
}

它可以工作，虽然将 HTML 制作成字符串时会很乏味。

我想做的是把它变成一个局部，以便于维护和编辑。

理想情况下，我想要这样的东西。

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

    return markup;
}

但是我怎样才能重新插入item 变量呢？我是否只需放置一个占位符值并在markup 变量上使用replace()，例如markup = markup.replace('item.Title', item.Title)？有没有更好的办法？

【问题讨论】：

你必须使用占位符。
另一种选择是在部分中只包含<div class="title"></div>，并且在将 html 添加到 DOM 后，使用 $(element).find('.title').text(item.title); （并且实际上没有必要创建单独的部分 - 你可以创建一个（隐藏的）模板并克隆它）
@StephenMuecke HTML 在函数中。
是的，我知道。但我假设您必须将该 html 添加到 DOM，所以我的意思是在视图中 <div id="template" style="display:none;><div class="card">....</div></div> 然后 var clone = $('#template').html().clone(); // add to DOM, then clone.find('.title').text(item.title); 在您的函数中

标签： javascript c# html asp.net-mvc razor

【解决方案1】：

您可以使用MustacheJs

查看

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

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

认为它会在您的项目中引入外部依赖（Mustache.js），您可能希望避免这种情况

【讨论】：

【解决方案2】：

有两种方法可以做到这一点，使用 JavaScript：

对服务器的 Ajax 调用以将部分视图作为字符串返回，该字符串等效于函数的输出
在 JavaScript 中声明变量 var markup，然后在 MVC Razor 视图中对其进行初始化

对于解决方案 1，创建一个控制器扩展：

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();
        }
    }
}

然后，以item为参数的ActionResult将Json结果返回给Ajax调用。

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

【讨论】：