使用@url.action调用局部视图单击using jquery

在@url.action上调用部分视图。我正在使用url.action显示记录，并希望在用户单击记录时加载部分视图

这是我的代码，当用户单击部分视图时，我想调用它

<td>
<a href="@Url.Action("Details", new { id=item.TeamId})">
 @Html.DisplayFor(modelItem => item.TeamName)
</a>
</td>

---

您可以使用ajax获取列表详细信息并呈现局部视图，而无需刷新整个页面

首先使用命令安装jQuery.Ajax.Unobtrusive包

安装jQuery.Ajax.Unobtrusive包

并确保jQuery-xxxx.js和jQuery.unobtrusive ajax.js包含在列表之前

修改我希望在用户单击局部视图时调用其的代码

<a  href="@Url.Action("Details", new { id=item.TeamId})" data-ajax='true' data-ajax-update='#detailsPlace' data-ajax-mode='replace'>

在视图的顶部添加以下代码

if (Request.IsAjaxRequest())
{
   Layout=null;
}

---

有关更多信息，请访问如果要将PartialView放置在

div

中，您可能需要尝试

Ajax

helper。首先，尝试将

ActionResult

更改为

PartialViewResult

。

Ajax

helper的定义之一如下：

@Ajax.ActionLink("Display name",
        "Your partial action name",
        "Controller name",
        new { /* object values */ }, // e.g. ID = yourmodel.ID or null
            new AjaxOptions {
                HttpMethod = "GET",
                UpdateTargetId = "your div id without #",
                InsertionMode = InsertionMode.Replace
            })

---

要做到这一点，您需要Ajax。首先，使用以下代码在视图中添加脚本块：

<script type="text/javascript">
    $(function () {
        $('.details').click(function () {
            var $buttonClicked = $(this);
            var id = $buttonClicked.attr('data-id');

            $.ajax({
                url: '@Url.Action("Details")',
                type: 'GET',
                data: { id: id },
                success: function (partialView) {
                    $('#detailsPlace').html(partialView);
                    $('#detailsPlace').show();
                }
            });
        });
    });
</script>

$（函数（）{
$（'.details'）。单击（函数（）{
变量$buttonClicked=$（此项）；
变量id=$buttonClicked.attr（'data-id'）；
$.ajax({
url:“@url.Action”（“详细信息”），
键入：“GET”，
数据：{id:id}，
成功：功能（partialView）{
$（'#detailsPlace'）.html（partialView）；
$（'#detailsPlace'）.show（）；
}
});
});
});

然后将锚定标记更改为：

<a href="#" class="details" data-id="@item.TeamId">Details</a>

---

只要单击具有详细信息类的元素，就会触发ajax调用。单击后，存储在数据Id属性中的Id将传递给控制器。当控制器返回部分视图时，部分视图将加载到ajax调用的success函数中，并且会显示detailsPlace，因为它的显示设置为none。

那么代码有什么问题呢？？是否将局部视图作为整体视图加载？？您能解释一下实际的问题/错误消息吗？如果您想从web页面动态地执行此操作，您需要了解Ajax。本质上，您希望Ajax方法在控制器上调用和操作，从而返回partialview。然后在OnSuccess中执行类似$（myContainer）.html（partialView）的操作，或者在Ajax方法中执行Done回调；在视图的末尾，如果它不工作，告诉我它现在正在工作，但是当我第一次点击记录时，另一个问题出现了，它只是显示一个带有十字符号的淡入淡出屏幕，但当我下次点击它时，它会显示弹出窗口。我不明白你能不能解释更多当我第一次点击记录时，当加载部分视图时，弹出窗口不工作，但同时我再次点击记录时，它会显示弹出窗口。这才是真正的问题。你现在明白我的意思了吗？@Ajax.ActionLink（“详细信息”，“详细信息”，new{id=item.TeamId}，new AjaxOptions{HttpMethod=“get”，InsertionMode=InsertionMode.Replace，UpdateTargetId=“dialog_window_id”，OnComplete=“$（'.#detailsPlace'）.show（）；”）谢谢，它现在正在工作，但另一个问题发生在我第一次点击唱片时，它只是显示一个带有十字符号的淡入淡出屏幕，但当我下次点击它时，它会显示弹出窗口。实际问题是什么。你能添加问题的屏幕截图吗？我无法在评论中添加屏幕截图。主要问题是，当页面第一次回发时，除了带有弹出窗口十字符号的空白淡入屏幕外，它不会显示任何内容，但在再次关闭该弹出窗口后，我单击href链接记录，它会按预期工作。你明白了吗。把它添加到你的初始问题中，而不是评论中。@Josh我在我的初始问题中添加截图

if (Request.IsAjaxRequest())
{
   Layout=null;
}

@Ajax.ActionLink("Display name",
        "Your partial action name",
        "Controller name",
        new { /* object values */ }, // e.g. ID = yourmodel.ID or null
            new AjaxOptions {
                HttpMethod = "GET",
                UpdateTargetId = "your div id without #",
                InsertionMode = InsertionMode.Replace
            })

<script type="text/javascript">
    $(function () {
        $('.details').click(function () {
            var $buttonClicked = $(this);
            var id = $buttonClicked.attr('data-id');

            $.ajax({
                url: '@Url.Action("Details")',
                type: 'GET',
                data: { id: id },
                success: function (partialView) {
                    $('#detailsPlace').html(partialView);
                    $('#detailsPlace').show();
                }
            });
        });
    });
</script>

<a href="#" class="details" data-id="@item.TeamId">Details</a>