在強類型視圖中呈現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