如何在ASP.NET MVC中将视图模型转换为JSON对象？

我是Java开发人员，刚接触.NET。我正在一个.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，也不想在控制器中将其转换，因为这两个位置都没有意义。不幸的是，您被这种情况所困扰。

我发现要做的最好的事情是将JSON发送到ViewModel中的视图中，如下所示：

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

这样，如果您在页面上放置了多个小部件，就不会发生冲突（除非您需要从页面的其他位置访问方法，但是在这种情况下，无论如何，您都应该在某个小部件框架中注册该小部件）。现在可能不成问题，但是最好在现在添加括号，以免日后需要时节省很多工作，这是一个很好的做法，封装功能也是一种OO做法。

我发现这样做很不错（在视图中使用）：

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

它不是超级复杂的，但是它解决了将其放置在哪里的问题（在Controller还是视图中？）答案显然是：都不;）

您可以使用 Json直接从操作中，

您的操作将如下所示：

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

编辑

刚刚看到您认为这是ModelView的，因此上述内容并非严格正确，您必须Ajax调用controller方法来获取此信息，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))'>

扩展了Dave的回答。您可以创建一个简单的HtmlHelper。

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

在您看来：

@Html.RenderAsJson(Model)

这样，如果您出于某种原因想要稍后更改逻辑，则可以集中创建JSON的逻辑。

安德鲁的反应很好，但我想稍微周一点。不同之处在于我希望ModelViews中没有开销数据。只是对象的数据。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进行请求，但是它需要少调用一次，因此可以节省您的开销。顺便说一句，这对于Dates很时髦，但这似乎又是另一个话题。