Comment convertir le View Model en objet JSON en ASP.NET MVC ?

Question

Je suis un développeur Java, novice en .NET. Je travaille sur un projet .NET MVC2 dans lequel je veux avoir une vue partielle pour envelopper un widget. Chaque objet widget JavaScript possède un objet de données JSON qui serait alimenté par les données du modèle. Ensuite, les méthodes de mise à jour de ces données sont liées à des événements lorsque les données sont modifiées dans le widget ou si ces données sont modifiées dans un autre widget.

Le code est quelque chose comme ceci :

MyController :

virtual public ActionResult DisplaySomeWidget(int id) {
  SomeModelView returnData = someDataMapper.getbyid(1);

  return View(myview, returnData);
}

myview.ascx :

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<SomeModelView>" %>

<script type="text/javascript">
  //creates base widget object;
  var thisWidgetName = new Widget();

  thisWidgetName.updateTable = function() {
    //  UpdatesData
  };
  $(document).ready(function () {
    thisWidgetName.data = <% converttoJSON(model) %>
    $(document).bind('DATA_CHANGED', thisWidgetName.updateTable());
  });
</script>

<div><%:model.name%></div>

Ce que je ne sais pas, c'est comment envoyer les données en tant que SomeModelView et ensuite être capable de l'utiliser pour remplir le widget ainsi que de le convertir en JSON. J'ai vu des moyens très simples de le faire dans le contrôleur, mais pas dans la vue. J'imagine que c'est une question basique, mais j'ai passé quelques heures à essayer de rendre cela simple.

Answer 1

Dans mvc3 avec razor @Html.Raw(Json.Encode(object)) semble faire l'affaire.

Answer 2

Bravo, vous venez à peine de commencer à utiliser MVC et vous avez trouvé son premier défaut majeur.

Vous n'avez pas vraiment envie de le convertir en JSON dans la vue, et vous n'avez pas vraiment envie de le convertir dans le contrôleur, car aucun de ces emplacements n'a de sens. Malheureusement, vous êtes coincé avec cette situation.

La meilleure chose que j'ai trouvé à faire est d'envoyer le JSON à la vue dans un ViewModel, comme ceci :

var data = somedata;
var viewModel = new ViewModel();
var serializer = new JavaScriptSerializer();
viewModel.JsonData = serializer.Serialize(data);

return View("viewname", viewModel);

puis utiliser

<%= Model.JsonData %>

à votre avis. Sachez que le JavaScriptSerializer standard de .NET est plutôt merdique.

le faire dans le contrôleur le rend au moins testable (même si ce n'est pas exactement comme ci-dessus - vous voudrez probablement prendre un ISerializer comme dépendance pour pouvoir le simuler).

Mise à jour De plus, en ce qui concerne votre JavaScript, il serait bon d'envelopper TOUS les widgets JS que vous avez ci-dessus de la manière suivante :

(
    // all js here
)();

De cette façon, si vous placez plusieurs widgets sur une page, vous n'aurez pas de conflits (à moins que vous n'ayez besoin d'accéder aux méthodes à partir d'un autre endroit de la page, mais dans ce cas, vous devriez de toute façon enregistrer le widget auprès d'un framework de widgets). Ce n'est peut-être pas un problème aujourd'hui, mais il serait bon d'ajouter les parenthèses maintenant pour vous épargner beaucoup d'efforts à l'avenir, lorsque cela deviendra une exigence, c'est aussi une bonne pratique OO d'encapsuler la fonctionnalité.

Answer 3

J'ai trouvé que c'était plutôt agréable de faire comme ça (utilisation dans la vue) :

    @Html.HiddenJsonFor(m => m.TrackingTypes)

Voici la méthode d'aide correspondante de la classe Extension :

public static class DataHelpers
{
    public static MvcHtmlString HiddenJsonFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression)
    {
        return HiddenJsonFor(htmlHelper, expression, (IDictionary<string, object>) null);
    }

    public static MvcHtmlString HiddenJsonFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, object htmlAttributes)
    {
        return HiddenJsonFor(htmlHelper, expression, HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes));
    }

    public static MvcHtmlString HiddenJsonFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, IDictionary<string, object> htmlAttributes)
    {
        var name = ExpressionHelper.GetExpressionText(expression);
        var metadata = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData);

        var tagBuilder = new TagBuilder("input");
        tagBuilder.MergeAttributes(htmlAttributes);
        tagBuilder.MergeAttribute("name", name);
        tagBuilder.MergeAttribute("type", "hidden");

        var json = JsonConvert.SerializeObject(metadata.Model);

        tagBuilder.MergeAttribute("value", json);

        return MvcHtmlString.Create(tagBuilder.ToString());
    }
}

Ce n'est pas super sophistiqué, mais cela résout le problème de savoir où le mettre (dans le contrôleur ou dans la vue ?) La réponse est évidemment : aucun des deux ;)

Answer 4

Vous pouvez utiliser Json de l'action directement,

Votre action ressemblerait à ceci :

virtual public JsonResult DisplaySomeWidget(int id)
{
    SomeModelView returnData = someDataMapper.getbyid(id);
    return Json(returnData);
}

Editar

Je viens de voir que vous supposez que c'est le Model d'une vue, donc ce qui précède n'est pas tout à fait correct, il faudrait faire une modification de l'ordre de grandeur de la vue. Ajax à la méthode du contrôleur pour l'obtenir, l'élément ascx n'aurait pas de modèle à proprement parler, je vais laisser mon code au cas où il vous serait utile et où vous pourriez modifier l'appel.

Edit 2 j

Answer 5

Andrew a donné une excellente réponse, mais je voulais la modifier un peu. La différence est que j'aime que mes ModelViews ne contiennent pas de données générales. Juste les données de l'objet. Il semble que ViewData convienne pour les données générales, mais bien sûr, je suis nouveau dans ce domaine. Je suggère de faire quelque chose comme ceci.

Contrôleur

virtual public ActionResult DisplaySomeWidget(int id)
{
    SomeModelView returnData = someDataMapper.getbyid(1);
    var serializer = new JavaScriptSerializer();
    ViewData["JSON"] = serializer.Serialize(returnData);
    return View(myview, returnData);
}

Voir

//create base js object;
var myWidget= new Widget(); //Widget is a class with a public member variable called data.
myWidget.data= <%= ViewData["JSON"] %>;

Cela vous donne les mêmes données dans votre JSON que dans votre ModelView. Vous pouvez donc potentiellement renvoyer le JSON à votre contrôleur et il aura toutes les parties. C'est similaire à une simple demande via un JSONRequest, mais cela nécessite un appel de moins, ce qui vous évite cette surcharge. BTW, c'est funky pour les dates mais cela semble être un autre sujet.