Wie konvertiere ich das Ansichtsmodell in ein JSON-Objekt in ASP.NET MVC?

Ich bin ein Java-Entwickler, neu in .NET. Ich arbeite an einem .NET MVC2-Projekt, in dem ich eine Teilansicht zum Umschließen eines Widgets haben möchte. Jedes JavaScript-Widget-Objekt verfügt über ein JSON-Datenobjekt, das mit den Modelldaten gefüllt wird. Dann sind Methoden zum Aktualisieren dieser Daten an Ereignisse gebunden, wenn Daten im Widget geändert werden oder wenn diese Daten in einem anderen Widget geändert werden.

Der Code ist ungefähr so:

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>

Was ich nicht weiß, ist, wie man die Daten als sendet SomeModelViewund diese dann zum Auffüllen des Widgets sowie zum Konvertieren in JSON verwenden kann. Ich hatte einige wirklich einfache Möglichkeiten gesehen, dies in der Steuerung zu tun, aber nicht in der Ansicht. Ich denke, das ist eine grundlegende Frage, aber ich habe ein paar Stunden lang versucht, diesen Slick zu machen.

In mvc3 mit Rasiermesser @Html.Raw(Json.Encode(object))scheint der Trick zu tun.

Gut gemacht, Sie haben gerade erst angefangen, MVC zu verwenden, und Sie haben den ersten großen Fehler gefunden.

Sie möchten es in der Ansicht nicht wirklich in JSON konvertieren, und Sie möchten es nicht wirklich in den Controller konvertieren, da keiner dieser Speicherorte sinnvoll ist. Leider stecken Sie in dieser Situation fest.

Das Beste, was ich gefunden habe, ist, den JSON wie folgt an die Ansicht in einem ViewModel zu senden:

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

return View("viewname", viewModel);

dann benutze

<%= Model.JsonData %>

aus Ihrer Sicht. Beachten Sie, dass der Standard .NET JavaScriptSerializer ziemlich beschissen ist.

Wenn Sie dies zumindest im Controller tun, ist es testbar (obwohl dies nicht genau wie oben beschrieben ist - Sie möchten wahrscheinlich einen ISerializer als Abhängigkeit verwenden, damit Sie ihn verspotten können).

Aktualisieren Sie auch in Bezug auf Ihr JavaScript. Es wird empfohlen, ALLE Widget-JS, die Sie oben haben, wie folgt zu verpacken:

(
    // all js here
)();

Auf diese Weise erhalten Sie keine Konflikte, wenn Sie mehrere Widgets auf einer Seite platzieren (es sei denn, Sie müssen von einer anderen Stelle auf der Seite auf die Methoden zugreifen, aber in diesem Fall sollten Sie das Widget trotzdem mit einem Widget-Framework registrieren). Es mag jetzt kein Problem sein, aber es wäre eine gute Praxis, die Klammern jetzt hinzuzufügen, um sich in Zukunft viel Mühe zu sparen, wenn dies erforderlich wird. Es ist auch eine gute OO-Praxis, die Funktionalität zu kapseln.

Ich fand es ziemlich nett, es so zu machen (Verwendung in der Ansicht):

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

Hier ist die entsprechende Hilfsmethode Erweiterungsklasse:

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

Es ist nicht sehr ausgefeilt, aber es löst das Problem, wo es abgelegt werden soll (in Controller oder in Sicht?). Die Antwort lautet offensichtlich: weder; noch;)

Sie können Jsonaus der Aktion direkt verwenden,

Ihre Aktion wäre ungefähr so:

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

Bearbeiten

Ich habe gerade gesehen, dass Sie davon ausgehen, dass es sich um Modeleine Ansicht handelt. Daher ist das oben Gesagte nicht unbedingt korrekt. Sie müssten Ajaxdie Controller-Methode aufrufen, um dies zu erhalten. ascxDann hätten Sie kein Modell an sich. Ich werde meinen Code verlassen für den Fall, dass es für Sie nützlich ist und Sie den Anruf ändern können

Bearbeiten 2 Geben Sie einfach die ID in den Code ein

@ Html.Raw (Json.Encode (Objekt)) kann verwendet werden, um das View Modal Object in JSON zu konvertieren

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

Siehe https://highspeedlowdrag.wordpress.com/2014/08/23/mvc-data-to-jquery-data/

Ich habe unten getan und es funktioniert wie Charme.

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

Erweiterung der großartigen Antwort von Dave . Sie können einen einfachen HtmlHelper erstellen .

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

Und aus Ihrer Sicht:

@Html.RenderAsJson(Model)

Auf diese Weise können Sie die Logik zum Erstellen des JSON zentralisieren, wenn Sie die Logik aus irgendeinem Grund später ändern möchten.

Andrew hatte eine großartige Antwort, aber ich wollte sie ein wenig twittern. Dies unterscheidet sich dadurch, dass ich möchte, dass meine ModelViews keine Overhead-Daten enthalten. Nur die Daten für das Objekt. Es scheint, dass ViewData die Rechnung für Overhead-Daten passt, aber natürlich bin ich neu in diesem Bereich. Ich schlage vor, so etwas zu tun.

Regler

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

Aussicht

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

Dies bedeutet für Sie, dass Sie in Ihrem JSON dieselben Daten wie in Ihrer ModelView erhalten, sodass Sie den JSON möglicherweise an Ihren Controller zurückgeben können und alle Teile enthalten. Dies ähnelt dem Anfordern über eine JSONRequest, erfordert jedoch einen Anruf weniger, sodass Sie diesen Overhead sparen. Übrigens ist das funky für Dates, aber das scheint ein anderer Thread zu sein.