Utilisation du modèle Razor dans la variable Javascript

Question

J'ai une fonction javascript comme celle-ci qui est utilisée avec 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;
}

Et cela fonctionne, bien que la construction du HTML soit fastidieuse lorsqu'il s'agit d'une chaîne de caractères.

Ce que je voudrais faire, c'est en faire un partiel pour faciliter la maintenance et l'édition.

Idéalement, je veux quelque chose comme ça.

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

    return markup;
}

Mais comment puis-je insérer le item les variables reviennent ? Dois-je simplement mettre une valeur de remplacement et utiliser la fonction replace() en el markup variable telle que markup = markup.replace('item.Title', item.Title) ? Existe-t-il une meilleure solution ?

Answer 1

Il y a deux façons de le faire, en utilisant JavaScript :

1. Un appel Ajax au serveur pour renvoyer la vue partielle sous la forme d'une chaîne équivalente à la sortie de votre fonction.
2. Déclarer la variable var markup en JavaScript puis l'initialiser dans une vue MVC Razor

Pour la solution 1, créez une extension de contrôleur :

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

Ensuite, un ActionResult con item comme paramètre renvoie un résultat Json à l'appel Ajax.

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

Answer 2

Vous pouvez utiliser MustacheJs

Voir

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

Js

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

Mais cela introduira une dépendance externe (Mustache.js) dans votre projet, ce que vous voudrez peut-être éviter.