Question

我的搜索未能找到我认为是一个旅行良好的主题。我在底部列出的选项反映了我发现的一些事情。

我需要从服务器端渲染视图作为ViewModel或通过JSON对象。 JSON对象将来自服务器。

在客户端，我使用ajax，有时我会根据页面上的其他id /属性确定插入是否我追加/ prepend / replace或ignore-placement到目标元素。

我有什么选项可以为ViewModels或JSON对象使用相同的视图？

我在编译时考虑过渲染File.Js版本的视图。将其作为资源添加到页面上并执行var ViewHtmlTemplate = "<div>@Model.Message</div>上的替换。在将所有格式化/ if语句逻辑移动到也将被JSON序列化的viewmodel时，我必须非常自律。

或者，该视图有一个脚本标记，用于将已加工的ViewModel绑定到js var，然后在文档就绪时运行一个函数。

第三个选项不是返回一个JSON对象，而是返回一个服务器端已经是html渲染的视图数组。

Answer 1

我所做的是在我的视图模型中，我将有一个字段，它是一个串行json结构的字符串。

public class SomeVM
{
 /* other properties */
 public string jsonString { get; set; }
}

在控制器中，我将一些数据序列化为jsonString。然后在视图中，我将字符串赋值给变量

@model SomeVM
<script>
 var jsonVM = @( Html.Raw(Model.jsonString) );
</script>

Answer 2

我正在使用在json对象中返回Html的解决方案。如果这样做有任何问题，请告诉我。这是我如何去做的。

用于渲染局部视图的控制器扩展（此解决方案中包含但未使用的是RenderViewToString）。这可以在不同的答案中以各种形式找到，这些答案似乎与我的定制版本不符，我不予以赞扬。

namespace System.Web.Mvc
{
    using System.IO;

    public static class MvcControllerExtension
    {
        public static string RenderPartialViewToString(this Controller controller, string viewName = null, object model = null)
        {
            if (string.IsNullOrEmpty(viewName))
            {
                viewName = controller.ControllerContext.RouteData.GetRequiredString("action");
            }

            controller.ViewData.Model = model;

            using (StringWriter sw = new StringWriter())
            {
                ViewEngineResult viewResult = ViewEngines.Engines.FindPartialView(controller.ControllerContext, viewName);
                ViewContext viewContext = new ViewContext(controller.ControllerContext, viewResult.View, controller.ViewData, controller.TempData, sw);
                viewResult.View.Render(viewContext, sw);
                return sw.GetStringBuilder().ToString();
            }
        }

        public static string RenderViewToString(this Controller controller, string viewName = null, object model = null, string masterName = null)
        {
            if (string.IsNullOrEmpty(viewName))
            {
                viewName = controller.ControllerContext.RouteData.GetRequiredString("action");
            }

            controller.ViewData.Model = model;

            using (StringWriter sw = new StringWriter())
            {
                ViewEngineResult viewResult = ViewEngines.Engines.FindView(controller.ControllerContext, viewName, masterName);
                ViewContext viewContext = new ViewContext(controller.ControllerContext, viewResult.View, controller.ViewData, controller.TempData, sw);
                viewResult.View.Render(viewContext, sw);
                return sw.GetStringBuilder().ToString();
            }
        }
    }
}

在控制器操作中返回JsonResult

public JsonResult _DisplayByFoo(int catId)
{
    var myRealModel = new MyRealModel(catId);
    // .... omitted the construction of MyRealModel
    var jsonModel = new JsonModel(myRealModel);
    jsonModel.Html = this.RenderPartialViewToString("_Display", myRealModel);
    return Json(jsonModel);
}

我还在json对象上包含了其他属性，这些属性可以帮助我确定插入模式。

在Js; 之后我的AjaxCall到Json动作。运行OnSuccess方法，除了其他逻辑之外，还执行以下操作。

$("#" + targetId).append(MyJson.Html);

使用ViewModel或JSON对象呈现视图

2 个答案: