Question

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

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

2 。我还想使用jquery ajax mathod将文本框数据传输到ashx文件。

任何人都可以帮助我

码

 var lineItemCount = 0;
    $(document).ready(function () {

        $(".commentbox input[type='button']").click(function () {

            var id = $(this).attr("id");

            alert(id);

           var cid = id.substring(5);
           var containerid = "container" + cid;
           alert(containerid);

            //Increase the lineitemcount
            lineItemCount++;
            //Add a new lineitem to the container, pass the lineItemCount to makesure                      
            getLineItem() 
            // can generate a unique lineItem with unique Textbox ids
            $(containerid).append(getLineItem(lineItemCount));
        });
});
 //Create a new DIV with Textboxes
     function getLineItem(number) {
         var div = document.createElement('div');
         //Give the div a unique id
           div.setAttribute('id', 'lineitem_' + number);

         //pass unique values to the getTextbox() function
         var t1 = getTextbox('txt_' + number + '_1');
         div.appendChild(t1);
         return div;
     }

     //Create a textbox, make sure the id passed to this function is unique...
     function getTextbox(id) {
         var textbox = document.createElement('input');
         textbox.setAttribute('id', id);
         textbox.setAttribute('name', id);
         return textbox;
     }

通过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++;}%>

Answer 1

我稍微改变了你的标记，以便在点击事件中获得相应的项目ID

HTML

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

和剧本

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

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

您需要将帖子目标网址更改为处理ajax响应的相关网页。

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

只要您拥有唯一的容器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/

对于要渲染的上述输出，您可能想要编写像这样的

的剃刀语法

<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>

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

单击asp.net mvc中的超链接动态创建div

1 个答案: