Question

I am developing MVC 3 application and using razor syntax.

In this application I am giving comment facility.

I have added a partial view, which loads the comment/Records from DB.

Now, I have added the Comment link in every row of Grid/Table.
When user click on that comment link, it loads the partial view which contains group of controls for Adding comments.

Check below screen.

Now the problem is, when user click on the comment link, every row’s comment’s partial view get opens…

Please check below screen.

I want to open only one partial view of the row where user clicked…

How do I do ?

I have below code….

 @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

Don’t search for your comments box from the root element because your search matches all such element. Search starting from the click point like this:

$(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;
        });
});