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

Je suis un développeur Java, nouveau sur .NET. Je travaille sur un projet .NET MVC2 où je souhaite avoir une vue partielle pour envelopper un widget. Chaque objet de widget JavaScript a un objet de données JSON qui serait rempli par les données du modèle. Ensuite, les méthodes pour mettre à jour ces données sont liées aux é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 au fur SomeModelViewet à mesure , puis pouvoir les utiliser pour remplir le widget et le convertir en JSON. J'avais vu des moyens très simples de le faire dans le contrôleur mais pas dans la vue. Je suppose que c'est une question de base, mais j'essaie depuis quelques heures de créer cette nappe.

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

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

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

La meilleure chose que j'ai trouvée à 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 utilisez

<%= Model.JsonData %>

à votre avis. Sachez que le JavaScriptSerializer standard de .NET est une merde.

le faire dans le contrôleur le rend au moins testable (mais pas exactement comme ci-dessus - vous voulez probablement prendre un ISerializer comme dépendance afin que vous puissiez vous en moquer)

Mettez à jour également, concernant votre JavaScript, il serait bon d'encapsuler TOUS les widgets JS que vous avez ci-dessus comme ceci:

(
    // all js here
)();

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

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

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

Voici la classe d'extension de la méthode d'assistance correspondante:

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 Controller ou en vue?) La réponse est évidemment: ni l'un ni l'autre;)

Vous pouvez utiliser Jsondirectement à partir de l'action,

Votre action serait quelque chose comme ceci:

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

Éditer

Je viens de voir que vous supposez que c'est la vue Modeld'une vue, donc ce qui précède n'est pas strictement correct, vous devrez faire un Ajaxappel à la méthode du contrôleur pour obtenir cela, il ascxn'aurait alors pas de modèle en soi, je laisserai mon code au cas où cela vous serait utile et vous pouvez modifier l'appel

Edit 2 il suffit de mettre l'identifiant dans le code

@ Html.Raw (Json.Encode (object)) peut être utilisé pour convertir l'objet modal View en JSON

Prolonger la grande réponse de Dave . Vous pouvez créer un HtmlHelper simple .

public static IHtmlString RenderAsJson(this HtmlHelper helper, object model)
{
    return helper.Raw(Json.Encode(model));
}

Et à votre avis:

@Html.RenderAsJson(Model)

De cette façon, vous pouvez centraliser la logique de création du JSON si, pour une raison quelconque, vous souhaitez modifier la logique ultérieurement.

<htmltag id=’elementId’ data-ZZZZ’=’@Html.Raw(Json.Encode(Model))’ />

Reportez-vous à https://highspeedlowdrag.wordpress.com/2014/08/23/mvc-data-to-jquery-data/

Je l'ai fait ci-dessous et ça marche comme du charme.

<input id="hdnElement" class="hdnElement" type="hidden" value='@Html.Raw(Json.Encode(Model))'>

Andrew a eu une bonne réponse mais je voulais la tweek un peu. La différence est que j'aime que mes ModelViews ne contiennent pas de données de surcharge. Juste les données de l'objet. Il semble que ViewData corresponde à la facture des données supplémentaires, mais bien sûr, je suis nouveau dans ce domaine. Je suggère de faire quelque chose comme ça.

Manette

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

Vue

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

Ce que cela fait pour vous, c'est qu'il vous donne les mêmes données dans votre JSON que dans votre ModelView afin que vous puissiez potentiellement renvoyer le JSON à votre contrôleur et il aurait toutes les parties. Ceci est similaire à la simple demande via un JSONRequest, mais cela nécessite un appel de moins, ce qui vous évite cette surcharge. BTW c'est génial pour Dates mais cela semble être un autre fil.