我有桌子,与模特有联系。
@foreach (var item in Model)
{
<tr onclick="window.location.href = '@Url.Action("Action", new RouteValueDictionary { { "id", item.Id } })'">
<td>@Html.DisplayFor(x => item.Field1)
</td>
<td>@Html.DisplayFor(x => item.Field2)
</td>
</tr>
}
如何使用ajax更新我的局部视图,以便从表中编辑所选模型。
我删除了onclick="window.location.href = '@Url.Action("Action", new RouteValueDictionary { { "id", item.Id } })'"
并添加了脚本:
$(function () {
$('tr').click(function () {
$.ajax({
url: '@Url.Action("Action", new RouteValueDictionary { { "id", ??? } })',
type: 'GET',
cache: false,
success: function (result) {
$('#partialView_div').html(result);
}
});
return false;
});
});
但是,我现在不知道如何将Model.Id
传递到此脚本中。
答案 0 :(得分:6)
您可以使用属性保存item.Id
并在事件处理程序中获取它。此外,您不需要使用window.location.href
CSHTML
@foreach (var item in Model)
{
<tr class="deleteItem" data-url="@Url.Action("Action", new RouteValueDictionary { { "id", item.Id } })">
<td>@Html.DisplayFor(x => item.Field1)
</td>
<td>@Html.DisplayFor(x => item.Field2)
</td>
</tr>
}
的JavaScript
$('tr.deleteItem').click(function () {
$.ajax({
url: $(this).data("url"),
type: 'GET',
cache: false,
success: function (result) {
$('#partialView_div').html(result);
}
});
return false;
});
CSHTML
@foreach (var item in Model)
{
<tr data-item-id="@item.Id" class="deleteItem">
<td>@Html.DisplayFor(x => item.Field1)
</td>
<td>@Html.DisplayFor(x => item.Field2)
</td>
</tr>
}
的JavaScript
$('tr.deleteItem').click(function () {
var url = '@Url.Action("Action", "Controller", { "id" = "???" })';
url = url.replace("???", $(this).data("item-id"));
$.ajax({
url: url,
type: 'GET',
cache: false,
success: function (result) {
$('#partialView_div').html(result);
}
});
return false;
});
答案 1 :(得分:3)
我会尝试制作这个简单的
@foreach (var item in Model)
{
<tr data-item-id="@item.Id">
<td>@Html.DisplayFor(x => item.Field1)
</td>
<td>@Html.DisplayFor(x => item.Field2)
</td>
</tr>
}
的jQuery
$(function () {
$('tr').click(function () {
$.ajax({
url: 'controller/action/',
type: 'GET',
cache: false,
data:{id:$(thi).data("item-id")},
success: function (result) {
$('#partialView_div').html(result);
}
});
return false;
});
});
答案 2 :(得分:0)
请按照以下步骤操作,以便获得所需的输出。 主视图
@model IEnumerable<MvcApplication2.Models.Test>
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('tr.delete').click(function () {
var url = '@Url.Action("Test1", "Home")';
var Itemid = $(this).data("item-id");
$.ajax({
type: "POST",
url: url,
contentType: 'application/json; charset=utf-8',
data: "{'itemid' : " + Itemid + "}",
dataType: 'json',
cache: false,
success: function (result) {
$('#divpartial').html(result);
}
});
return false;
});
});
function printperson(div, item) {
div.append("<br/>" + "FName: " + item.FirstName + " , LName: " + item.LastName);
$.each(item.Addresses, function (i, addr) { printaddress(div, addr); });
}
function printaddress(div, item) {
div.append("<br/>" + "Line1: " + item.Line1);
}
</script>
<table border="1">
@foreach (var item in Model)
{
<tr data-item-id="@item.Id" class="delete">
<td>
@item.Id
</td>
<td>
@item.Field1
</td>
<td>
@item.Field2
</td>
</tr>
}
<div id="divpartial">
</div>
</table>
<强>控制器强>
[HttpGet]
public ActionResult Index()
{
List<Test> obj = new List<Test> {
new Test{Id=1,Field1="Field11",Field2="Field21"},
new Test{Id=2,Field1="Field12",Field2="Field22"},
new Test{Id=3,Field1="Field13",Field2="Field23"},
};
return View(obj);
}
public ActionResult Test1(int itemid)
{
PartialViewModel obj = new PartialViewModel();
obj.Id = itemid;
return PartialView("~/Views/Partial1.cshtml", obj);
}
<强>模型强>
public class Test
{
public int Id;
public string Field1;
public string Field2;
}
public class PartialViewModel
{
public int Id;
}
部分视图
@model MvcApplication2.Models.PartialViewModel
@Model.Id