Question

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

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

行动方法的回报如下：

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

渲染Ajax在强类型视图中接收的数据

2 个答案: