Javascript 渲染Ajax'；s在强类型视图中接收数据

在我的

ASP.NET MVC应用程序中

，我有一个

Ajax

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

如何在页面上呈现接收到的数据？注意，我必须使用Ajax来显示不同的数据。这是一种

SPA应用程序

，但我真的不喜欢使用

第三方库

，除非它们有真正的优势

操作方法的返回如下所示：

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

<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调用：

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

视图如下所示：

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

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

@Html.HiddenFor（x=>x.Id）
@LabelFor（x=>x.fieldA，新的{@class=“controllabel col-xs-6”}）
@EditorFor（x=>x.fieldA）
......

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

---

欢迎任何建议！请让我知道，如果我有什么错误，这个应用程序已经改变了好几次，我真的很困惑

例如，您有这样的操作，返回

json

：

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

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

数据
：

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

函数loadValidConnectionTypes（代码）{
$deferred=$.deferred（）；
$.ajax({
url:getValidConnectionTypesUrl，
数据：{code:code}，
数据类型：“json”，
键入：“获取”
})
.完成（功能（数据）{
var项目=”；
$。每个（数据、功能（i、项）{
项目+=“”+项目。文本+“”；
});
var selectItem=$（“#连接类型”）；
选择item.html（items）；
$deferred.resolve（）；
})
.失败（功能（r、s、e）{
$deferred.reject（）；
});
返回$deferred.promise（）；
} 

然后在
done
部分中，只需通过创建html（如示例
）解析
数据，并将其附加到页面（
selectItem.html（items）
）。HTH
我真的不明白你是否有可能在服务器端渲染这个，但是是的

首先，这个
。。。返回Json（数据）实际上不是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）的分部，然后存储呈现的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);
        }

像这样，您创建一个数据库模型（viewModel），然后呈现（服务器端）相应的部分视图，然后在json内部将呈现的html返回到客户端

我没有看到其他方法。
您的视图是什么样子的？如果您希望以强类型方式更新视图，我会从controller返回部分视图，而不是JSONI。在ajax调用的成功部分，只需解析结果并将其作为html附加到您的页面，到数据所属的某个目标元素。我在页面上有其他元素，因此我认为返回部分视图不起作用@迪，我怎么能解析它？我想避免重复，任何foreach？是什么让你认为部分视图不起作用-页面上有其他元素与此无关。在ajax成功回调中，只需使用
$（'#someElement'）.html（结果）
其中
someElement
是
返回的部分视图将被插入到
div
中，谢谢，但我有很多元素，不仅仅是其中一个。它们来自不同的类型。好吧，这只是一个“一般”可以做到的例子。或者也可以从操作返回完整的html，而不是json。意味着创建部分视图并以html形式从操作返回。Angular JS中有什么意义吗？我真的不知道这是否与这类问题有关。你没有指定你有角度。使用Angular还有另一种方法：WebAPI。您总是只从服务器返回数据，并在客户端呈现视图。这是一种完全不同的方法。如果你处于一个项目的中间，最好的方法就是坚持这项技术。如果您的所有视图都是用razor（asp.net）编写的，则每个视图只需10分钟即可将它们从razor移动到angular（用于渲染的客户端模板）。此外，您还需要3小时进行设置，1小时进行表单验证等。这是在您熟悉该框架之后，Angular正在使用客户端路由。混合路由（客户端和服务器端）很难管理，而且非常奇怪。因此，无论您选择混合还是只保留客户端路由，这都需要花费很多时间。