javascript - 返回带有 HTML 和 JavaScript 的 PartialView

Question

我正在进行 AJAX 调用(使用 jQuery)来检索 PartialView .除了 HTML，我还想发回 View 显示的对象的 JSON 表示。我一直使用的糟糕方法是将属性作为隐藏输入嵌入到 HTML 中，这很快就会变得笨拙并且紧密耦合了太多东西。

我可以在 <script> 中发送 JavaScript标记在 HTML 之后，但我真的很讨厌将这些东西分开。看起来像这样:

<%@ Control Language="C#" AutoEventWireup="true" Inherits="System.Web.Mvc.ViewUserControl<Person>" %>
<div class="person">
  First Name: <%= Html.TextBox("FirstName", Model.FirstName) %>
  Last Name: <%= Html.TextBox("LastName", Model.LastName) %>
</div>
<script type="text/javascript">
  // JsonSerialized object goes here
</script>

我考虑的另一个选择是对返回 JsonResult 的操作进行第二次 AJAX 调用，但这也感觉像是糟糕的设计。

Answer 1

我想我找到了一个很好的方法来做到这一点，只需将 JSON 包装在 HtmlHelper 扩展中。这是类(class):

using System.Web.Script.Serialization;

public static class JsonExtensions {
    public static string Json(this HtmlHelper html, string variableName) {
        return Json(html, variableName, html.ViewData.Model);
    }

    public static string Json(this HtmlHelper html, string variableName, object model) {
        TagBuilder tag = new TagBuilder("script");
        tag.Attributes.Add("type", "text/javascript");
        JavaScriptSerializer jsonSerializer = new JavaScriptSerializer();
        tag.InnerHtml = "var " + variableName + " = " + jsonSerializer.Serialize(model) + ";";
        return tag.ToString();
    }
}

然后您通过以下方式调用它:

<%= Html.Json("foo") %>
<%= Html.Json("bar", Model.Something) %>

我能想到的一个问题是它不是完全完美的分离；你仍然在技术上将 JavaScript 放在 HTML 中。 但是，它不会对服务器进行额外的调用，而且 IDE 中的标记仍然非常干净。