Asp.net mvc 在asp.net mvc中单击超链接时动态创建div

1。我想在单击按钮时动态生成包含唯一id的文本框的div

      <input id="<%:rid %>" type="button" value="reply"/>

通过aspx页面中的模型进行迭代

<%var i=1;%>
 <%foreach (var commentitem in item.commentsModelList)
  { 
    <table border="0"  class="commentbox">
    <tr>
      <%var rid = "reply" + i;%>
       <div id="<%:containerid %>">
        <td>  <input id="<%:rid %>" type="button" value="reply"/>
       </div>
    </td>
   </tr>
  </table>
  <% i++;}%>

---

我稍微更改了您的标记，以获取单击事件中项目的相应id

HTML

某些项目文本

剧本呢

 $(function(){     
      $(".commentbox .btnReply").click(function(){
        $(this).hide();
        var id=$(this).attr("id").split("-")[1]        
        var strDiv="<input type='text' class='txtCmnt' id='txtReply-"+id+"' /> <input type='button' class='btnSave' value='Save' id='btnSave-"+id+"' /> ";
        $("#container-"+id).html(strDiv);          
      });

       $(".commentbox").on("click",".btnSave",function(){
          var itemId=$(this).attr("id").split("-")[1]         
           var txt=$(this).parent().find(".txtCmnt").val();
           $.post("/echo/json/", {reply: txt, id: itemId},function(data){                            
               alert(data);
               //do whatever with the response
           })           
       });       
    });

$（函数（）{
$（“.commentbox.btnReply”）。单击（函数（）{
$（this.hide（）；
var id=$（this.attr（“id”）.split（“-”）[1]
var strDiv=“”；
$（“#容器-”+id）.html（strDiv）；
});
$（“.commentbox”）。在（“单击”，“.btnSave”，函数（）上{
var itemId=$（this.attr（“id”）.split（“-”）[1]
var txt=$（this.parent（）.find（“.txtCmnt”）.val（）；
$.post（“/echo/json/”，{reply:txt，id:itemId}，函数（数据）{
警报（数据）；
//对回应做任何事
})           
});       
});

以下是JSFIDLE示例：

您需要将post目标url更改为处理ajax响应的相关页面

编辑：根据关于处理多个div的评论

只要容器div id是唯一的，它就会工作，我只是将标记更改为包含多个项

 <table border="0"  class="commentbox">
    <tr>
        <td>Some Item text<br/>                
             <div id="container-1" ></div>
             <input type="button" class='btnReply' id="reply-1" value="Reply" />             
         </td>
     </tr>
      <tr>
        <td>Some Another Content here <br/>               
             <div id="container-2" ></div>
             <input type="button" class='btnReply' id="reply-2" value="Reply" />             
         </td>
     </tr>
</table>

某些项目文本

这里还有其他一些内容

以下是示例：http://jsfiddle.net/UGMkq/44/

对于要呈现的上述输出，您可能希望这样编写razor语法

<table border="0"  class="commentbox">
@foreach (var commentitem in item.commentsModelList)
{
   <tr>
      <td>Some Another Content here<br/>
          <div id="container-@(commentitem.Id)" ></div>
          <input type="button" class='btnReply' id="reply-@(commentitem.Id)" value="Reply" />             
       </td>
    </tr>
}
</table>

@foreach（item.commentsModelList中的var commentitem）
{
这里还有其他一些内容

}

---

我没有为每个项目创建一个新表，而是在现有表中创建了一个新行。

如果我有多个id的miltiple div，使用ony work拆分id为container的div，该怎么办。使用类作为选择器。我可以稍后发布一个示例$（“.commentbox”）。在（“单击“，”.btnSave”）上，function（）{显示错误对象不支持IEif中的此属性或方法，如果我使用modelItem。标识特定div的Id将拆分函数工作请查看我想将div附加到div。我发布了一个新问题

 <table border="0"  class="commentbox">
    <tr>
        <td>Some Item text<br/>                
             <div id="container-1" ></div>
             <input type="button" class='btnReply' id="reply-1" value="Reply" />             
         </td>
     </tr>
      <tr>
        <td>Some Another Content here <br/>               
             <div id="container-2" ></div>
             <input type="button" class='btnReply' id="reply-2" value="Reply" />             
         </td>
     </tr>
</table>

<table border="0"  class="commentbox">
@foreach (var commentitem in item.commentsModelList)
{
   <tr>
      <td>Some Another Content here<br/>
          <div id="container-@(commentitem.Id)" ></div>
          <input type="button" class='btnReply' id="reply-@(commentitem.Id)" value="Reply" />             
       </td>
    </tr>
}
</table>