在Javascript变量中使用Razor模板

我有一个类似于Select2的javascript函数

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

---

但是如何将

项

变量重新插入？我是否只需要放置一个占位符值并在

markup

变量上使用

replace（）

，例如

markup=markup.replace（'item.Title'，item.Title）

？有更好的方法吗？

有两种方法，使用JavaScript：

对服务器的Ajax调用，以字符串形式返回部分视图，该字符串相当于函数的输出

在JavaScript中声明变量

var markup

，然后在MVC视图中初始化它

对于解决方案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();
        }
    }
}

你可以用

看法

---

虽然它会在您的项目中引入外部依赖（Mustache.js），您可能希望避免这种情况，但您必须使用占位符。另一种选择是在部分中只使用

，在html添加到DOM后，使用

$（元素）。查找（'.title'）。文本（item.title）（实际上不需要创建单独的部分-您可以创建一个（隐藏）模板并克隆它）@StephenMuecke HTML在函数中。是的，我知道。但是我假设您必须将html添加到DOM中，所以我的意思是在视图

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

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

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

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