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

Question

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

如何在页面上呈现那些接收到的数据？请注意，我必须使用Ajax来显示不同的数据。有点像 SPA application，但我真的不喜欢使用 third-party libraries，除非他们有真正的优势。

操作方法的 return 如下所示：

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

例如你有这样的动作 returns 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（如示例 <option></option>）来解析 data 并将其附加到页面（selectItem.html(items)). HTH

Answer 2

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

首先，这个 ... return Json(data); 并不是真正的 asp.net mvc 方法，因为您没有 return 查看视图。

假设你有这个。

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

然后您可以 return 一个 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），然后渲染（服务器端）相应的局部视图，然后 return 在 json 中渲染 html 给客户端-边.

我没有看到其他方法。

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

Render Ajax's received Data in a strongly-typed view

javascript

ajax

asp.net-mvc

jquery

single-page-application