从局部视图中提取模型

Question

我有一个模型的视图。在这个视图中的一个表格。我使用下面的代码将此表单发布到操作/控制器。我在帖子中调用的操作返回一个局部视图，这个局部视图是强类型的。下面的data 变量接收这个部分视图。问题是，是否可以访问部分视图中使用的模型？

var jqxhr = $.post(....., {
    ....
},
function (data) {
    //(*)
});

Answer 1

当您的 javascript 代码执行时，它接收到的数据就是服务器响应，无论它可能是什么。如果来自局部视图，那么该服务器响应很可能是 html，不，您无法访问用于构造它的模型。

如果您只想从您的 javascript 代码中访问模型数据，那么您可以尝试从您的操作方法返回一个 jsonresult。

如果您需要局部视图但还需要访问模型中的某些数据，那么我会将必要的数据嵌入局部视图中，可能会使用隐藏字段。然后，您的 javascript 代码可以从部分视图内容中检索该数据。

---

为了澄清，您可以使用 jQuery 从服务器响应中的已知元素中提取信息。例如，假设示例中的data参数是如下HTML的字符串：

<tr><td><input id="ID" name="ID" type="hidden" value="1" />1</td><td><input id="Value" name="Value" type="text" value="Data Entity 1" /></td><td><input type="button" value="Update" /></td></tr>

您可以使用以下 javascript 提取“值”文本框的值：

var value = $(data).find("td input[name='Value']").val();

或者您可以使用以下 javascript 提取“ID”隐藏字段的值：

var id = $(data).find("td input[name='ID']").val();

下面是我整理的一个简单页面的相关代码来演示：

List.cshtml

@model AjaxTest.Models.ListOfDataEntities

@{
    ViewBag.Title = "List";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>List</h2>

<table id="Items">
    <thead>
        <tr><th>ID</th><th>Value</th><th></th></tr>
    </thead>
    <tbody>
@foreach (var item in Model.DataEntities)
{
    Html.RenderPartial("ListItem", item);
}
    </tbody>
</table>

<script type="text/javascript" language="javascript">
$("table#Items tbody tr td input[value='Edit']").live("click", function () {
    var row = $(this).closest("tr");
    var id = row.find("td input[name='ID']").val();
    var jqxhr = $.post('@Url.Action("EditListItem")', { id: id }, function (data) {
        // here, data is a string of HTML, such as <tr><td><input id="ID" name="ID" type="hidden" value="1" />1</td><td><input id="Value" name="Value" type="text" value="Data Entity 1" /></td><td><input type="button" value="Update" /></td></tr>
        var value = $(data).find("td input[name='Value']").val();
        alert(value);
        row.replaceWith(data);
    });
});
$("table#Items tbody tr td input[value='Update']").live("click", function () {
    var row = $(this).closest("tr");
    var id = row.find("td input[name='ID']").val();
    var value = row.find("td input[name='Value']").val();
    var jqxhr = $.post('@Url.Action("UpdateListItem")', { id: id, value: value }, function (data) {
        row.replaceWith(data);
    });
});
</script>

ListItem.cshtml

@model AjaxTest.Models.MyDataEntity
        <tr><td>@Html.HiddenFor((x) => x.ID)@Model.ID</td><td>@Model.Value</td><td><input type="button" value="Edit" /></td></tr>

EditListItem.cshtml

@model AjaxTest.Models.MyDataEntity
        <tr><td>@Html.HiddenFor((x) => x.ID)@Model.ID</td><td>@Html.TextBoxFor((x) => x.Value)</td><td><input type="button" value="Update" /></td></tr>

HomeController.cs

using System.Collections.Generic;
using System.Web.Mvc;

using AjaxTest.Models;

namespace AjaxTest.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult List()
        {
            var model = new ListOfDataEntities(new List<MyDataEntity>
            {
                new MyDataEntity { ID = 1, Value = "Data Entity 1" },
                new MyDataEntity { ID = 2, Value = "Data Entity 2" },
                new MyDataEntity { ID = 3, Value = "Data Entity 3" },
                new MyDataEntity { ID = 4, Value = "Data Entity 4" },
                new MyDataEntity { ID = 5, Value = "Data Entity 5" },
            });

            return View(model);
        }

        public PartialViewResult EditListItem(int id)
        {
            // ideally the model would be retrieved from some data source,
            // but this is just a proof of concept
            var model = new MyDataEntity { ID = id, Value = "Data Entity " + id };

            return PartialView(model);
        }

        public PartialViewResult UpdateListItem(MyDataEntity model)
        {
            return PartialView("ListItem", model);
        }
    }
}

MyDataEntity.cs

@model AjaxTest.Models.MyDataEntity
        <tr><td>@Html.HiddenFor((x) => x.ID)@Model.ID</td><td>@Html.TextBoxFor((x) => x.Value)</td><td><input type="button" value="Update" /></td></tr>
namespace AjaxTest.Models
{
    public class MyDataEntity
    {
        public int ID { get; set; }

        public string Value { get; set; }
    }
}

ListOfDataEntities.cs

using System.Collections.Generic;

namespace AjaxTest.Models
{
    public class ListOfDataEntities
    {
        List<MyDataEntity> _DataEntities;

        public ListOfDataEntities(List<MyDataEntity> dataEntities)
        {
            _DataEntities = dataEntities;
        }

        public IEnumerable<MyDataEntity> DataEntities
        {
            get { return _DataEntities; }
        }
    }
}