ASP.NET MVCでビューモデルをJSONオブジェクトに変換する方法

私は.NETを初めて使用するJava開発者です。ウィジェットをラップするための部分的なビューが必要な.NET MVC2プロジェクトに取り組んでいます。各JavaScriptウィジェットオブジェクトには、モデルデータによって入力されるJSONデータオブジェクトがあります。次に、このデータを更新するメソッドは、ウィジェットでデータが変更された場合、またはそのデータが別のウィジェットで変更された場合に、イベントにバインドされます。

コードは次のようなものです：

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>

私が知らないのは、どのようにデータを送信しSomeModelView、それを使用してウィジェットにデータを入力し、JSONに変換できるかです。私はコントローラでそれを行う実際の簡単な方法を見ましたが、ビューでは見ていませんでした。私はこれが基本的な質問だと思いますが、私はこれを滑らかにするために数時間行ってきました。

かみそりを使用したMVC3の場合 @Html.Raw(Json.Encode(object))、トリックを行うようです。

よくできました。MVCを使い始めたばかりで、最初の大きな欠陥を見つけました。

これらの場所はどちらも意味がないため、ビューで実際にJSONに変換する必要はなく、コントローラーで変換する必要もありません。残念ながら、このような状況に陥っています。

私が見つけた最善のことは、次のように、ViewModelのビューにJSONを送信することです。

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

return View("viewname", viewModel);

次に使用します

<%= Model.JsonData %>

あなたの見解で。標準の.NET JavaScriptSerializerはかなりくだらないことに注意してください。

コントローラーでそれを行うと、少なくともテスト可能になります（上記とまったく同じではありません。おそらく、モックできるようにISerializerを依存関係として使用する必要があります）。

更新も、あなたのJavaScriptに関しては、あなたがそうのように、上記したすべてのウィジェットJSをラップする良い練習になります：

(
    // all js here
)();

このように、ページに複数のウィジェットを配置した場合、競合は発生しません（ページの他の場所からメソッドにアクセスする必要がない限り、その場合はウィジェットを何らかのウィジェットフレームワークに登録する必要があります）。今は問題にならないかもしれませんが、ブラケットを追加して、将来的に要件が大きくなったときの労力を節約できるようにすることをお勧めします。また、機能をカプセル化することもオブジェクト指向の優れた方法です。

私はそれをこのように行うのがかなり良いことがわかりました（ビューでの使用）：

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

ヘルパーメソッド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());
    }
}

それは非常に洗練されていませんが、それをどこに配置するかという問題を解決します（コントローラー内またはビュー内？）答えは明らかに：どちらでもありません;）

Jsonアクションから直接使用でき、

あなたの行動は次のようになります：

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

編集する

これはModelビューであると想定しているので、上記は厳密には正しくありませAjaxん。これを取得するには、コントローラーメソッドを呼び出す必要があります。ascxモデル自体はありません。コードはそのままにします。万が一に備えて電話を修正できるように

編集2 はコードにIDを入れるだけです

@ Html.Raw（Json.Encode（object））を使用して、ビューモーダルオブジェクトをJSONに変換できます

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

https://highspeedlowdrag.wordpress.com/2014/08/23/mvc-data-to-jquery-data/を参照してください

以下に行ったところ、それは魅力のように機能します。

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

デイブからの素晴らしい答えを拡張します。単純なHtmlHelperを作成できます。

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

そしてあなたの見解では：

@Html.RenderAsJson(Model)

このようにして、何らかの理由で後でロジックを変更したい場合に、JSONを作成するためのロジックを集中化できます。

アンドリューは素晴らしい反応を示しましたが、少し調整したいと思いました。これが異なる点は、ModelViewにオーバーヘッドデータが含まれないようにすることです。オブジェクトのデータのみ。ViewDataはオーバーヘッドデータの請求に適合しているようですが、もちろんこれは初めてです。私はこのようなことをすることをお勧めします。

コントローラ

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

見る

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

これにより、JSONにはModelViewと同じデータが提供されるため、JSONをコントローラーに返すことができ、すべてのパーツが含まれます。これは、JSONRequestを介して要求するのと似ていますが、呼び出しが1つ少ないため、オーバーヘッドを節約できます。ところでこれはDatesにとってファンキーですが、それは別のスレッドのようです。