如何在表格行单击后刷新部分视图答案

【问题标题】：How to refresh partial view after table row click如何在表格行单击后刷新部分视图
【发布时间】：2014-02-12 02:37:51
【问题描述】：

我有表，它与模型链接。

@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 传递到这个脚本中。

【问题讨论】：

标签： jquery asp.net-mvc asp.net-mvc-partialview

【解决方案1】：

您可以使用属性保存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
@Murali，是的，伙计，但口味略有不同
太棒了。多谢！

【解决方案2】：

我会尽量简化

  @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;
    });
});

【讨论】：

【解决方案3】：

请按照以下步骤操作，以便您获得所需的输出。 主视图

@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

【讨论】：