使用@url.action 调用局部视图点击使用jquery答案

【问题标题】：call a partial view using @url.action click using jquery使用@url.action 调用局部视图点击使用jquery
【发布时间】：2015-01-14 12:53:08
【问题描述】：

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

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

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

这是我放置部分视图的 Div

<div id="detailsPlace" class="dialog_content3" style="display:none"></div>
         @Html.Partial("_TeamDetails")
    </div>

这是我要渲染的局部视图

@model light.ViewModels.ViewDetailTeam
@{
    var item = Model.Team;
}

    <div class="dialogModal_header">@Html.Label(item.TeamName)</div>
    <div class="dialogModal_content">
        <div class="main-content">
            <div class="navi-but">
                    @Html.Label(item.TeamName)
                </div>
                    @Html.Label(item.Description)
                </div>
            </div>
        </div>

这是我的控制器

public ActionResult Details(int id)
        {

            lightCoreModel.User loggedInUser = new lightCoreModel.User();


                ViewDetailTeam viewDetailTeam = new ViewDetailTeam();
                ViewData["DetailModel"] = viewDetailTeam;
                viewDetailTeam.Retrieve(id);
                return PartialView("_TeamDetails",viewDetailTeam);

        }
now i am facing this problem with pop up its showing me the following screen.

【问题讨论】：

那么你的代码有什么问题？？是否将部分视图作为整体视图加载？你能解释一下实际的问题/错误信息吗？
如果您想从网页动态地执行此操作，则需要查看 Ajax。本质上，您希望您的 Ajax 方法在您的控制器上调用和操作，这将返回您的局部视图。然后，您在 Ajax 方法中的 OnSuccess 或 Done 回调中执行 $(myContainer).html(partialView) 之类的操作。

标签： jquery asp.net-mvc razor url.action

【解决方案1】：

您需要 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>

然后将您的锚标记更改为：

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

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

【讨论】：

谢谢它现在可以工作了，但是当我第一次点击记录时会出现另一个问题，它只是显示一个带有弹出十字符号的淡入淡出屏幕，但是当我下次点击它时它会显示弹出up。什么是实际问题。
能否添加问题截图？
我无法在 cmets 中添加屏幕截图。主要问题是当页面第一次回发时，除了带有弹出十字符号的空白淡入淡出屏幕外，它不显示任何内容，但在再次关闭该弹出窗口后，我单击 href 链接记录，它按预期工作。你找到我了吗？
将其添加到您的初始问题中，而不是 cmets。
@Josh 我在我最初的问题中添加了截图

【解决方案2】：

您可以使用 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'>

或

@Ajax.ActionLink("Details", 
                 "Details", 
                  new { id=item.TeamId}, 
                 new AjaxOptions { HttpMethod = "GET", 
                 InsertionMode = InsertionMode.Replace, 
                 UpdateTargetId = "detailsPlace"})

并在您的视图顶部添加此代码

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

【讨论】：

尝试在视图末尾调用 $('#detailsPlace').show();如果它不起作用告诉我
它现在可以工作了，但是当我第一次点击记录时会出现另一个问题，它只是显示一个带有弹出十字符号的淡入淡出屏幕，但是当我下次点击它时它会显示弹出窗口.
看不懂，能不能多解释一下
当我在加载部分视图时第一次单击记录时，弹出窗口不起作用，但同时我再次单击该记录，它显示弹出窗口。笏是实际问题。你现在找到我了吗？
@Ajax.ActionLink("Details", "Details", new { id=item.TeamId}, new AjaxOptions { HttpMethod = "GET", InsertionMode = InsertionMode.Replace, UpdateTargetId = "dialog_window_id" , OnComplete = "$('#detailsPlace').show();" })

【解决方案3】：

如果您想将 PartialView 放在 div 中，您可能想尝试 Ajax 助手。首先，尝试将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
            })

【讨论】：