วิธีการแปลงมุมมองแบบจำลองเป็นวัตถุ JSON ใน ASP.NET MVC

ฉันเป็นผู้พัฒนา 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)

นี่คือวิธีการขยายระดับผู้ช่วยตาม:

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จะไม่มีรุ่นต่อ se ฉันจะทิ้งโค้ดไว้ ในกรณีที่เป็นประโยชน์กับคุณและคุณสามารถแก้ไขการโทรได้

แก้ไข 2 เพียงใส่รหัสลงในรหัส

@ Html.Raw (Json.Encode (object)) สามารถใช้ในการแปลง View Modal Object เป็น JSON

ขยายคำตอบที่ดีจากเดฟ คุณสามารถสร้างง่ายHtmlHelper

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

และในมุมมองของคุณ:

@Html.RenderAsJson(Model)

วิธีนี้คุณสามารถรวมตรรกะในการสร้าง 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))'>

แอนดรูว์ได้รับการตอบรับที่ดี แต่ฉันต้องการที่จะพูดเกินจริงเล็กน้อย วิธีที่แตกต่างคือฉันชอบ 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 แต่จะต้องใช้การโทรที่น้อยลงหนึ่งรายการเพื่อช่วยให้คุณประหยัดค่าใช้จ่าย BTW นี้เป็นขี้ขลาดสำหรับวันที่ แต่ดูเหมือนว่าหัวข้ออื่น