Ajax 表单视图问题，asp.net mvc 3

Question

我想在我的表单中添加一些 ajax。这是主要视图：

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

// here I display each post from Posts collection
@foreach (var post in Model.Posts)
{   
<div>
<div>
    <strong>
        Title: @post.Title
    </strong>
</div>
<div>@post.Text</div>
<div>Posted by: @post.User.UserName</div>
<div>Posted Date: @post.CreatedDate</div>

@{ var membershipUser = Membership.GetUser(); }
@if (membershipUser != null)
{
    var providerUserKey = membershipUser.ProviderUserKey;
    if (providerUserKey != null && post.CreatedBy == (Guid) providerUserKey)
    {
        <div style="display: none; color: red;" id="postEditLoading">Loading..</div>

        <p id="postEdit">

            // EditPost method returns edit view asynchronously

            @Ajax.ActionLink("Edit", "EditPost", new {id = post.PostId, @class = "averageLink"},
                new AjaxOptions {UpdateTargetId = "postEdit", LoadingElementId = "postEditLoading", LoadingElementDuration = 3000})

            @Html.ActionLink("Delete", "DeletePost", new {id = post.PostId}, new {@class = "averageLink"})
        </p>
    }
}

一切正常，除了这个奇怪的事情：EditPost 方法返回的表单出现在第一篇文章的正下方，无论我想编辑第一篇还是最后一篇。

我该如何解决这个问题，所以表单会出现在我要编辑的帖子下方？？

提前感谢您的帮助！

Answer 1

我认为这是因为您在 ActionLink 中使用了 updatetargetid。更新元素的 id 是“postEdit”，但对于每个项目，您将创建一个具有相同 id 的 p。我认为您必须根据每个项目更改 p 的 id 并根据该项目更改 updatetargetid。

类似这样的：

@{string UpdatepID = "postEdit" + post.PostId;}
<p id=@UpdatepID>

            // EditPost method returns edit view asynchronously

            @Ajax.ActionLink("Edit", "EditPost", new {id = post.PostId, @class = "averageLink"},
                new AjaxOptions {UpdateTargetId = UpdatepID, LoadingElementId = "postEditLoading", LoadingElementDuration = 3000})

Answer 2

每个帖子都有这 2 个标签，不是吗？

    <div id="postEditLoading">Loading..</div>

    <p id="postEdit">
    </p>

在这种情况下，您有多个具有相同 id 的标签，这实际上是对 html 的违反。在这种情况下，js 会采用它可以到达的第一个标签。

要修复它，您可以根据一些帖子信息命名标签：

    <div id="postEditLoading-@post.PostId">Loading..</div>

    <p id="postEdit-@post.PostId">
    </p>