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

2020/10/31 17:23 · javascript ·  · 0评论

我是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))似乎可以解决问题。

Well done, you've only just started using MVC and you've found its first major flaw.

You don't really want to be converting it to JSON in the view, and you don't really want to convert it in the controller, as neither of these locations make sense. Unfortunately, you're stuck with this situation.

The best thing I've found to do is send the JSON to the view in a ViewModel, like this:

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

return View("viewname", viewModel);

then use

<%= Model.JsonData %>

in your view. Be aware that the standard .NET JavaScriptSerializer is pretty crap.

在控制器中执行它至少使其可测试(尽管与上面的不完全相同-您可能希望将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)) can be used to convert the View Modal Object to JSON

Extending the great answer from Dave. You can create a simple HtmlHelper.

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

And in your view:

@Html.RenderAsJson(Model)

This way you can centralize the logic for creating the JSON if you, for some reason, would like to change the logic later.

<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))'>

安德鲁的反应很好,但我想稍微周一点。不同之处在于我希望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很时髦,但这似乎又是另一个话题。

本文地址:http://javascript.askforanswer.com/ruhezaiasp-net-mvczhongjiangshitumoxingzhuanhuanweijsonduixiang.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!