Bagaimana cara mengubah View Model menjadi objek JSON di ASP.NET MVC?

Saya adalah pengembang Java, baru mengenal .NET. Saya sedang mengerjakan proyek .NET MVC2 di mana saya ingin memiliki tampilan parsial untuk membungkus widget. Setiap objek widget JavaScript memiliki objek data JSON yang akan diisi oleh data model. Kemudian metode untuk memperbarui data ini terikat dengan peristiwa ketika data diubah di widget atau jika data itu diubah di widget lain.

Kodenya kira-kira seperti ini:

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>

Apa yang saya tidak tahu adalah bagaimana mengirim data sebagai SomeModelViewdan kemudian dapat menggunakannya untuk mengisi widget serta mengubahnya menjadi JSON. Saya telah melihat beberapa cara sederhana untuk melakukannya di controller tetapi tidak dalam tampilan. Saya pikir ini adalah pertanyaan mendasar, tetapi saya sudah mencoba selama beberapa jam untuk menjadikannya apik.

Di MVC3 dengan pisau cukur @Html.Raw(Json.Encode(object))tampaknya melakukan trik.

Bagus sekali, Anda baru saja mulai menggunakan MVC dan Anda telah menemukan cacat besar pertamanya.

Anda tidak benar-benar ingin mengubahnya menjadi JSON dalam tampilan, dan Anda tidak benar-benar ingin mengubahnya di controller, karena tidak satu pun dari lokasi ini masuk akal. Sayangnya, Anda terjebak dengan situasi ini.

Hal terbaik yang saya temukan lakukan adalah mengirim JSON ke tampilan dalam ViewModel, seperti ini:

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

return View("viewname", viewModel);

lalu gunakan

<%= Model.JsonData %>

menurut Anda. Ketahuilah bahwa standar .NET JavaScriptSerializer cukup jelek.

melakukannya di pengontrol setidaknya membuatnya dapat diuji (walaupun tidak persis seperti di atas - Anda mungkin ingin mengambil ISerializer sebagai dependensi sehingga Anda dapat mengejeknya)

Perbarui juga, mengenai JavaScript Anda, itu akan menjadi praktik yang baik untuk membungkus SEMUA widget JS yang Anda miliki di atas seperti:

(
    // all js here
)();

dengan cara ini jika Anda meletakkan banyak widget di sebuah halaman, Anda tidak akan mendapatkan konflik (kecuali jika Anda perlu mengakses metode dari tempat lain di halaman, tetapi dalam hal ini Anda harus mendaftarkan widget dengan beberapa kerangka kerja widget tetap). Ini mungkin tidak menjadi masalah sekarang, tetapi akan menjadi praktik yang baik untuk menambahkan tanda kurung sekarang untuk menyelamatkan diri Anda dari banyak upaya di masa depan ketika itu menjadi persyaratan, itu juga praktik OO yang baik untuk merangkum fungsionalitas.

Saya merasa cukup baik melakukannya seperti ini (penggunaan dalam tampilan):

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

Berikut ini adalah kelas ekstensi metode helper menurut:

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

Ini bukan super-sofanggih, tetapi memecahkan masalah di mana harus meletakkannya (dalam Pengontrol atau dalam tampilan?) Jawabannya jelas: tidak;)

Anda dapat menggunakan Jsondari tindakan secara langsung,

Tindakan Anda akan menjadi seperti ini:

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

Edit

Hanya melihat bahwa Anda menganggap ini adalah Modeltampilan sehingga di atas tidak sepenuhnya benar, Anda harus membuat Ajaxpanggilan ke metode controller untuk mendapatkan ini, maka ascxtidak akan memiliki model sendiri, saya akan meninggalkan kode saya kalau-kalau itu berguna bagi Anda dan Anda dapat mengubah panggilan

Edit 2 cukup masukkan id ke dalam kode

@ Html.Raw (Json.Encode (objek)) dapat digunakan untuk mengonversi View Modal Object ke JSON

Memperluas jawaban yang bagus dari Dave . Anda dapat membuat HtmlHelper sederhana .

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

Dan menurut Anda:

@Html.RenderAsJson(Model)

Dengan cara ini Anda dapat memusatkan logika untuk membuat JSON jika Anda, karena suatu alasan, ingin mengubah logika nanti.

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

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

Saya lakukan di bawah dan ini bekerja seperti pesona.

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

Andrew memiliki respons yang hebat tetapi saya ingin sedikit mengubahnya. Cara ini berbeda adalah bahwa saya suka ModelViews saya tidak memiliki data overhead di dalamnya. Hanya data untuk objek. Tampaknya ViewData sesuai dengan tagihan untuk data di atas kepala, tapi tentu saja saya baru dalam hal ini. Saya sarankan melakukan sesuatu seperti ini.

Pengendali

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

Melihat

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

Apa ini bagi Anda adalah memberi Anda data yang sama di JSON Anda seperti di ModelView Anda sehingga Anda berpotensi mengembalikan JSON kembali ke controller Anda dan itu akan memiliki semua bagian. Ini mirip dengan hanya memintanya melalui JSONRequest namun itu membutuhkan satu panggilan lebih sedikit sehingga menghemat overhead Anda. BTW ini funky untuk Tanggal tetapi sepertinya utas lainnya.