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

call a partial view using @url.action click using jquery

提问by Reshav

call a partial view on @url.action. i am displaying the records using url.action and want to load the partial view when user click on the records.

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

here is my code on which i want to call the partial view when user click on it.

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

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

here is my Div in which i am placing the Partial view

这是我放置局部视图的 Div

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

here is my partial view which i want to render

这是我想要渲染的部分视图

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

and here is my controller

这是我的控制器

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.

采纳答案by JB06

You would need Ajax to do this. First, add a script block in your view with this code:

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

Then change your anchor tag to this:

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

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

The ajax call will be fired whenever an element with the class of details is clicked. Once clicked, the Id that is stored in the data-id attribute will be passed along to the controller. When your controller passes the partial view back, the partial view will be loaded in the success function of the ajax call, and the detailsPlace will be shown, since it's display is set to none.

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

回答by Ahmed Salah Hussein

You Can use ajax to Get your List Details and Render the partial view without refreshing the entire page

您可以使用 ajax 获取您的列表详细信息并在不刷新整个页面的情况下呈现部分视图

First install package jQuery.Ajax.Unobtrusive using command

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

Install-Package jQuery.Ajax.Unobtrusive

安装包 jQuery.Ajax.Unobtrusive

and make sure jQuery-xxxx.js and jquery.unobtrusive-ajax.jsare included before the list

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

modify your code on which i want to call the partial view when user click on it

修改你的代码，当用户点击它时我想调用它的局部视图

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

or

或者

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

and at the top of your View add this Code

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

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

for more info visit http://chsakell.com/2013/05/12/mvc-unobtrusive-ajax/

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

回答by Celdor

If you want to place PartialView in a div, you might want to try Ajaxhelper. First, try to change ActionResultto PartialViewResult. The one of the definitions of Ajaxhelper is following:

如果您想将 PartialView 放在 a 中div，您可能想尝试Ajaxhelper。首先，尝试更改ActionResult为PartialViewResult. Ajaxhelper的定义之一如下：

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