ajax.beginform inside a for loop

Question

so I am using a foreach loop to iterate through comments. The comment section is wrapped inside "Comments" div. My function DeleteComment fetches comments again once you delete a comment and rebinds it to the control. However, after you delete a comment, anytime you try to delete another comment, the commentId of the very first deleted comment would keep getting passed to DeleteComment function instead of the passing the commentId of the comment you are trying to delete. If you refresh the page, then you can delete ONE comment again, and the same problem if you try to delete another.

<table>
 <% foreach (var item in Model) { %>
<tr> <td>item.Comment </td>
    <td>
                    <%if (HttpContext.Current.User.Identity.IsAuthenticated && item.Poster.UserName == HttpContext.Current.User.Identity.Name)
                      { %>
                      <%using (Ajax.BeginForm("DeleteComment", "Home", new AjaxOptions {UpdateTargetId = "Comments"}))
                          {%>
                        <%=Html.Hidden("articleId", item.CarrierId) %>  
                        <%=Html.Hidden("num_comments", (int)ViewData["num_comments"]) %> 
                        <%=Html.Hidden("commentId", item.CommentId) %>
                        <input type = "submit" value = "delete" />
                        <%} %>
                    <%} %>
                </td>
</tr>
<table>

For example, you delete comment with commentId 1... then you try to delete some other comment, but commentId 1 would keep getting passed. You refresh the page, problem gone... for one comment...

<div id = "Comments">
    <%if ((int)ViewData["num_comments"] > 0)
      { %>
    <%Html.RenderPartial("CommentsX", Model.Comments, new ViewDataDictionary{{"num_comments", ViewData["num_comments"] }}); %>
    <%} %>
    </div>

where CommentsX is the ascx control that contains the for loop code I posted above.

Answer 1

Sometimes having multiple elements on the same page with the same ids can cause funky results like you are seeing. Try making the id's unique like below:

  <table>
 <% int index=1;
    foreach (var item in Model) { %>
<tr> <td>item.Comment </td>
    <td>
       <%if (HttpContext.Current.User.Identity.IsAuthenticated && item.Poster.UserName == HttpContext.Current.User.Identity.Name)
         { %>
            <%using (Ajax.BeginForm("DeleteComment", "Home", new AjaxOptions {UpdateTargetId = "Comments"}))
             {%>
                    <%=Html.Hidden("articleId" + index, item.CarrierId) %>  
                    <%=Html.Hidden("num_comments" + index, (int)ViewData["num_comments"]) %> 
                    <%=Html.Hidden("commentId" + index, item.CommentId) %>
                    <input type = "submit" value = "delete" />
            <%} %>
        <%    index++;
          } %>
    </td>
</tr>
<table>