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

Question

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

Answer 1

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

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

Answer 2

您将需要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调用的成功函数中，并且由于显示位置设置为none，因此将显示detailsPlace。