在强类型视图中呈现Ajax接收到的数据

Question

在我的ASP.NET MVC app ，我有一个从服务器读取记录的Ajax调用，应该在客户端显示它。 视图文件是强类型的，因此我拥有页面上的所有元素。

如何在页面上呈现这些接收的数据？ 请注意，我必须使用Ajax来显示不同的数据。 它是一种SPA application ，但我真的不想使用third-party libraries除非它们具有真正的优势。

Action方法的返回如下所示：

var data = repoH.GetAll().Where(....).FirstOrDefault();
return Json(data);

和Ajax调用：

$(document).ready(function () {
    $.ajax({
        url: '@Url.Action("action", "controller")',
        method: 'post',
        success: function (result) {
            debugger;
        }
    });
});

该视图如下所示：

<form id="formId">
   @Html.HiddenFor(x => x.Id)
   <div class="form-group form-inline col-xs-12">
      <div class="col-xs-6">
         @Html.LabelFor(x => x.fieldA, new { @class = "control-label col-xs-6" })
         @Html.EditorFor(x => x.fieldA)
      </div>......
   </div>

使用一些按钮和一些自定义Ajax调用。 我必须以这种方式实现整个CRUD操作！

欢迎任何建议！ 如果我有什么不对劲请告诉我，这个应用程序已经改变了几次，我真的很困惑！

Answer 1

我真的不明白你是否有可能在服务器端渲染这个，但是是的。

首先这... return Json(data); 实际上并不是一个asp.net mvc方法，因为你没有返回视图。

假设你有这个。

var databaseModel = repoH.GetAll().Where(....).FirstOrDefault();

/* optionally, but best practice var viewModel = map databaseModel to some viewModel */ 

然后使用将viewModel呈现为字符串的方法。

  // this will be in a RenderingHelper class 
  public static string RenderViewToString(ControllerContext context, string viewName, object model)
        {
            if (string.IsNullOrEmpty(viewName))
                viewName = context.RouteData.GetRequiredString("action");

            ViewDataDictionary viewData = new ViewDataDictionary(model);

            using (StringWriter sw = new StringWriter())
            {
                ViewEngineResult viewResult = ViewEngines.Engines.FindPartialView(context, viewName);
                ViewContext viewContext = new ViewContext(context, viewResult.View, viewData, new TempDataDictionary(), sw);
                viewResult.View.Render(viewContext, sw);

                return sw.GetStringBuilder().ToString();
            }
        }

因此，您必须创建一个接受viewModel（databaseModel）的partial，然后存储呈现的html：

string renderedHtml = RenderingHelper.RenderViewToString(this.ControllerContext, "~/Views/MyController/MyPartial", viewModel);

然后你可以返回一个Json，它将包含渲染的html和你想要的另一个数据{ RenderedHtml = renderedHtml, SomeData = someData } 。

并且您将在回复中收到呈现的Html：

success: function (response) {
            // test if you have response.RenderedHtml
            // and then override your container html with what you rendered on the server            $('#your_container_to_render_data_on_the_page').html(response.RenderedHtml);
        }

像这样你创建一个databaseModel（viewModel），然后渲染（服务器端）相应的局部视图，然后在json中返回渲染的html到客户端。

我没有看到其他方法。

Answer 2

例如，你有这样的动作，返回json ：

[HttpGet]
public ActionResult GetValidConnectionTypes(string code)
{
    SelectList validConnectionTypes = GetValidConnectionTypes(code);
    return Json(validConnectionTypes, JsonRequestBehavior.AllowGet);
}

在视图中，您有javascript函数，您可以通过ajax调用此操作并将结果作为data ：

function loadValidConnectionTypes(code) {
    $deferred = $.Deferred();

    $.ajax({
        url: getValidConnectionTypesUrl,
        data: { code: code },
        dataType: "json",
        type: "GET"
    })
    .done(function (data) {
        var items = "";
        $.each(data, function (i, item) {
            items += "<option value=\"" + item.Value + "\">" + item.Text + "</option>";
        });

        var selectItem = $("#ConnectionType");
        selectItem.html(items);

        $deferred.resolve();
    })
    .fail(function (r, s, e) {
        $deferred.reject();
    });

    return $deferred.promise();
} 

然后在done部分中，只需通过创建一个html来解析data （如示例<option></option> ）并将其附加到页面（ selectItem.html(items) ）。 HTH