Question

我在使用@Ajax.ActionLink在同一页面中渲染部分视图时遇到问题。我想创建一个可扩展的行，如下图所示：

dataTable child-row

PersonController.cs：

[HttpGet]
public ActionResult _SubDetails(int id)
{
    FooBarContext db = new FooBarContext();
    ContactViewModel contactViewModel = _db.Persons.Where(p => p.PersonId == id)
        .Select(c => new ContactViewModel
        {
            EmailAddress = p.EmailAddress,
            Website = p.Website
        }).FirstOrDefault();
    return PartialView(contactViewModel);
}

Index.cshtml ：

@foreach (var item in Model.Persons.Records)
{
    <tr>
        <td>
            @*<a href="javascript:getView(@item.PersonId);">Details</a>*@
            @Ajax.ActionLink(
            "Detail of Person",
            "_SubDetails",
            new { id = item.PersonId },
            new AjaxOptions
                {
                    UpdateTargetId = "ExpandInfo",
                    InsertionMode = InsertionMode.Replace,
                    HttpMethod = "GET"
                })
            <div id="ExpandInfo"></div>
        </td>
}

<script src="@Url.Content("~/Scripts/jquery-2.0.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>

使用Ajax.ActionLink，代码工作正常，但点击＆＃34;人员详细信息＆＃34;后，我将被带到另一页。

作为替代方案，我也试图用jQuery完成同样的事情（不使用ajax.actionlink），除了我的问题是在局部视图中，我得到了整个页面（行扩展了但是有一整页内容。）

Index.cshtml（jQuery）：

@foreach (var item in Model.Person.Records)
{
    <tr>
        <td>
            <a href="javascript:getView(@item.PersonId);">Details</a>
            <div id="PersonDetail">
            </div>
}

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
    function getView(personId) {
        $.ajax({
            Url: '/Person/_SubDetails/' + personId,
            contentType: "application/html; charset=utf-8",
            type: 'GET',
            dataType: 'html'
        }).success(function (result) {
                $('#PersonDetail').html(result);
            }).error(function (xhr, status) {
                console.log(status);
            })
    };
</script>

我想知道是否有人能够看到我在这两种情况下遗失或做错的事情？无论哪一个更容易解决都会有所帮助。

Answer 1

可能您可能错过了设置return false.

确定您已添加Partial View而不是视图（来自Mater页面，因此将呈现整页）。

根据信息：使用Ajax.ActionLink，代码工作正常，但点击“人员详情”后，我被带走了到另一页。

一旦函数被调用html或Jscript函数，就放return false。喜欢下面。，

   function getView(personId) {
        $.ajax({
            Url: '/Person/_SubDetails/' + personId,
            contentType: "application/html; charset=utf-8",
            type: 'GET',
            dataType: 'html'
        }).success(function (result) { $('#PersonDetail').html(result); 
        }).error(function (xhr, status) { console.log(status); });
        return false; //  Add this line
   }

或者使用Html链接：

@*<a href="javascript:getView(@item.PersonId); return false; ">Details</a>*@

Answer 2

在做了一些研究后，我弄明白自己做错了什么。那时我意识到我需要在我的项目中添加2个脚本（我认为它们已经包含在内）：

<强> jquery.unobtrusive-ajax.js

<强> jquery.unobtrusive-ajax.min.js

最后，在我的控制器中，我添加了：

        if (Request.IsAjaxRequest())
        {
            return PartialView("_SubDetails", contactViewModel);
        }

        return PartialView(contactViewModel);

Ajax.ActionLink在同一页面内的部分视图（也是jQuery尝试）

2 个答案: