我有一个模型的视图。在这个视图中一个表单。我将此表单发布到动作/控制器,代码如下。我在帖子中调用的动作返回一个部分视图,这个部分视图是强类型的。以下data
变量会收到此部分视图。问题是,是否可以访问部分视图中使用的模型?
var jqxhr = $.post(....., {
....
},
function (data) {
//(*)
});
答案 0 :(得分:3)
当您的javascript代码执行时,它接收的数据是服务器响应,无论可能是什么。如果来自局部视图,则该服务器响应很可能是html,不,您无法访问用于构建它的模型。
如果你想要的只是从你的javascript代码访问模型数据,那么你可以尝试从你的action方法返回一个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();
下面是一个简单页面的相关代码,我将它们放在一起来证明这一点:
@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>
@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>
@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>
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);
}
}
}
@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; }
}
}
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; }
}
}
}