javascript - 如何在 MVC 3 的 HTML 表格中使用滑动切换？

Question

我正在开发 MVC 3 应用程序并使用剃刀语法。

在这个应用程序中，我提供评论功能。

我添加了一个局部视图，它从数据库加载评论/记录。

现在，我在 Grid/Table 的每一行中添加了 Comment 链接。当用户单击该评论链接时，它会加载包含用于添加评论的控件组的局部视图。

检查下面的屏幕。

现在的问题是，当用户点击评论链接时，每行评论的部分视图都会打开......

请检查下面的屏幕。

我只想打开用户单击的行的一个部分视图...

我该怎么办 ？

我有以下代码....

 @model PagedList.IPagedList <CRMEntities.Location>


@{
    ViewBag.Title = "Index";
}

<div id="LocationListPageWise">
<table>
    <tr>
        <th>
            Name
        </th>
        <th>
            Remark
        </th>
        <th>
            State
        </th>
        <th>
            Region
        </th>
        <th>
            PinCode
        </th>
        <th>
            Country
        </th>
        <th>
            City
        </th>
        <th>
            Owner
        </th>
        <th>


        </th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Remark)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.State)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Region)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.PinCode)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Country)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.City)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Owner.FirstName)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
            @Html.ActionLink("Details", "Details", new { id=item.Id }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.Id })

            <span>@Ajax.ActionLink("Comments", null, null, null, new { id = item.Id, @class = "AddComments" })</span>   

            <div class="CommentBox"></div>
            <span class="CommentAdd"></span>

            <span class="LinkSeparator"></span>
        </td>
        <td>
          <span id="flagMenus">
            @Html.Action("ShowFlag", "Flagging", new { entityId=item.Id, entityType="Location"})
         </span>
        </td>
    </tr>
}






</table>
</div> 

<div class="PagingBox">
        @Html.Action("CreateLinks", "Pager", new { hasPreviousPage = Model.HasPreviousPage, hasNextPage = Model.HasNextPage, pageNumber = Model.PageNumber, pageCount = Model.PageCount })

 </div>

<div style="float:left;width:100%;margin-top:30px;">
<div style="font-weight:bold;">All location Customers with open opportunities</div>
@Html.Action("AllLocationCustomersWithOpenOpprtunity", "Customer")
</div>



 <script type="text/javascript">

     $(document).ready(function () {

         $("a.pagenumber").click(function () {

             var page = 0;
             page = parseInt($(this).attr("id"));

             $.ajax({
                 url: '@Url.Action("GetPagedLocations")',
                 data: { "page": page },
                 success: function (data) 
                 { 
                 $("#LocationListPageWise").html(data);
                 }


             });
             return false;
         });

           $(document).ready(function () {

        $('.CommentBox').hide();

        $('a.AddComments').click(function () {


            var url="@Html.Raw(Url.Action("ShowCommentBox", "Comment", new { Id = "idValue", EntityType = "Location" }))";

            url=url.replace("idValue",event.target.id);
            $('.CommentBox').load(url);

            $(this).closest('div').find('div.CommentBox').slideToggle();
            return false;
        });
     });

     });   

</script>

Answer 1

不要从根元素搜索您的评论框，因为您的搜索匹配所有此类元素。从点击点开始搜索，如下所示：

$(document).ready(function () {

        $('.CommentBox').hide();

        $('a.AddComments').click(function () {


            var url="@Html.Raw(Url.Action("ShowCommentBox", "Comment", new { Id = "idValue", EntityType = "Location" }))";

            url=url.replace("idValue",event.target.id);
            $('.CommentBox').load(url);

            $(this).closest('td').find('div.CommentBox').slideToggle();
            return false;
        });
});