如何刷新后的表行点击局部视图 [英] How to refresh partial view after table row click

问题描述

我已经表，即与模型联系起来。

I have table, that is linked with model.

@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（行动，新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 进入该脚本。

推荐答案

您可以使用属性来保存 item.Id ，并在事件处理程序获取它。此外，您不需要使用 window.location.href

You can use attributes to save item.Id and fetch it in event handler. Additionally you don't need to use 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;
});

这篇关于如何刷新后的表行点击局部视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！