使用jQuery通过@url.action单击调用部分视图

Question

使用jQuery通过@url.action单击调用部分视图

7

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

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

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

这是我的Div，我在其中放置了Partial View。

<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.

enter image description here

- Reshav

2

那么你的代码有什么问题？它是将部分视图加载为整个视图吗？你能否解释一下实际的问题/错误信息？ - wf4

如果您想从网页动态执行此操作，您需要查看Ajax。基本上，您希望您的Ajax方法调用控制器上的操作，该操作将返回您的partialview。然后，在Ajax方法的OnSuccess或Done回调中执行类似于$(myContainer).html(partialView)的操作。 - Steve

3个回答

5

您需要使用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将显示，因为它的显示设置为none。

- JB06

你能添加一张问题的截图吗？ - JB06

我无法在评论中添加截图。主要问题是当页面第一次回传时，除了一个带有弹出窗口交叉符号的空白淡出屏幕外，什么也没有显示，但在关闭该弹出窗口后，再次单击href链接记录，它会按预期工作。你明白我的意思吗？ - Reshav

1

将其添加到您的初始问题中，而不是评论中。 - JB06

@ Josh 我正在将截图添加到我的初始问题中。 - Reshav

嗯，你有实现这种淡入淡出效果的JavaScript代码吗？另外，我建议你调试一下那个方法，看看当你使用ajax调用该方法时它到底去了哪里。此外，如果你只是返回一些数据，我不建议使用POST，因为POST通常用于向数据库发送数据，例如添加、更新或删除记录。如果你只是获取数据以供显示，我会使用GET。 - JB06

显示剩余2条评论

1

如果你想在一个

中放置PartialView，你可以尝试使用Ajax助手。首先，尝试将ActionResult更改为PartialViewResult。其中一个Ajax助手的定义如下：

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

- Celdor

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ahmed Salah Hussein · Accepted Answer

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

首先，使用以下命令安装jQuery.Ajax.Unobtrusive包：

Install-Package 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;
}

欲知更多信息，请访问http://chsakell.com/2013/05/12/mvc-unobtrusive-ajax/