ASP.NET의 부트 스트랩 팝업 모달에 데이터로드 및 저장

Question

웹 응용 프로그램에 마스터 페이지를 사용하고 있습니다. 우리가 호출 할 수있는 콘텐츠 페이지가 있습니다. 은행 데이터에 GridView가 있습니다. 모든 은행이 표시되고 편집, 추가, 삭제가 있습니다. 버튼 나는 어떤 사람이 어떤 아이디어가 있습니까 영문 코드

       <Columns> 
            <asp:BoundField DataField="bankCode" HeaderText="Bank Code" /> 
            <asp:BoundField DataField="bankName" HeaderText="Bank Name" /> 

            <asp:TemplateField > 
             <ItemTemplate > 
              <asp:LinkButton ID="lb_Edit" runat="server" CssClass="btn btn-sm btn-default" data-toggle="modal" data-target="#AddBankModal" CommandName="BankEdit" CommandArgument='<%#Eval("bankCode") %>' OnClick="lb_Edit_Click"><strong>Edit</strong></asp:LinkButton> 
              <asp:LinkButton ID="LB_Delete" runat="server" CssClass="btn btn-sm btn-danger" CommandName="BankDelete" CommandArgument='<%#Eval("bankCode") %>'><strong>Delete</strong></asp:LinkButton> 

             </ItemTemplate> 
            </asp:TemplateField> 
           </Columns> 
            <RowStyle Height="15px" HorizontalAlign="Right" VerticalAlign="Middle" /> 

           </asp:GridView> 
           <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnStringDb1 %>" SelectCommand="SELECT [bankCode], [bankNameAr], [bankNameEng] FROM [Bank]"></asp:SqlDataSource> 

        <!-- Modal --> 
        <div id="AddBankModal" class="modal fade" role="dialog"> 
          <div class="modal-dialog"> 

          <!-- Modal content--> 
          <div class="modal-content" > 
           <div class="modal-header"> 
           <button type="button" class="close" data-dismiss="modal">&times;</button> 
           <h4 class="modal-title" style="text-align:right">Bank Data </h4> 
           </div> 
           <div class="modal-body"> 


           <asp:Label ID="lblBankCode" runat="server" Text="Bank Code" CssClass="label" style="text-align:right;font-weight:bold"></asp:Label> 
           <asp:TextBox ID="txtBankCode" runat="server" CssClass="form-control"></asp:TextBox> 

           <asp:Label ID="lblBankNameAr" runat="server" Text="Bank Name" CssClass="label" style="text-align:right;font-weight:bold"></asp:Label> 
           <asp:TextBox ID="txtBankNameAr" runat="server" CssClass="form-control"></asp:TextBox> 


           <div class="row" > 
            <div class="col-lg-12"> 

             <asp:Button ID="btnUpdateBank" runat="server" Text="Save Data" CssClass="btn btn-outline btn-primary" style="width:100px" OnClick="btnUpdateBank_Click" /> 
             <button type="button" class="btn btn-outline btn-primary" data-dismiss="modal" style="width:100px">Close</button> 
            </div> 
           </div> 



          </div> 

           </div> 
           </div> 
         </div> 

을 편집하거나 새 은행을 추가하고 이것이의 ASP의 RequiredFieldValidator

를 사용하여 유효성을 검사하기 위해 입력 데이터와 부트 스트랩 모달를 표시 지팡이 usi없이 ASP 코드를 사용하여이 작업을 수행하십시오. NG JQuery와는

Answer 1

는

1.가이 asp.net 컨트롤에 ClientIDMode="Static"을 추가하는 것을 잊지 this.Remember 두 가지 같이 어떤 일을해야 할 수 있음 2.Postback는 jQuery에 기능을 추가하는 e.preventDefault()에 의해 방지 할 수있다

클릭 이벤트

<asp:GridView ID="GridView1" runat="server" ClientIDMode="Static"> 
     <Columns> 
      <asp:TemplateField > 
             <ItemTemplate > 
              <asp:LinkButton ID="lb_Edit" runat="server" CssClass="btn btn-sm btn-default" data-toggle="modal" data-target="#AddBankModal" ClientIDMode="Static"><strong>Edit</strong> 
              </asp:LinkButton> 
             </ItemTemplate> 
            </asp:TemplateField> 
     </Columns> 
    </asp:GridView> 
    <div id="AddBankModal" class="modal fade" role="dialog"> 
     <div class="modal-dialog"> 
      <!-- Modal content--> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal"> 
         &times;</button> 
        <h4 class="modal-title" style="text-align: right"> 
         Bank Data 
        </h4> 
       </div> 
       <div class="modal-body"> 
        <asp:Label ID="lblBankCode" runat="server" Text="Bank Code" CssClass="label" Style="text-align: right; 
         font-weight: bold"></asp:Label> 
        <asp:TextBox ID="txtBankCode" runat="server" CssClass="form-control"></asp:TextBox> 
        <asp:Label ID="lblBankNameAr" runat="server" Text="Bank Name" CssClass="label" Style="text-align: right; 
         font-weight: bold"></asp:Label> 
        <asp:TextBox ID="txtBankNameAr" runat="server" CssClass="form-control"></asp:TextBox> 
        <div class="row"> 
         <div class="col-lg-12"> 
          <asp:Button ID="btnUpdateBank" runat="server" Text="Save Data" ClientIDMode="Static" CssClass="btn btn-outline btn-primary" 
           Style="width: 100px" /> 
          <button type="button" class="btn btn-outline btn-primary" data-dismiss="modal" style="width: 100px"> 
           Close</button> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <script> 
     $(function() { 
      $('.btn').on('click', function (e) { 
       e.preventDefault(); 

       var buttonid = $(this).attr('id'); 
       console.log(buttonid); 
       if (buttonid == "lb_Edit") { 
        $('#AddBankModal').modal({ 
         show: true, 
         backdrop: 'static' 
        }); 
       } 
       if (buttonid == "btnUpdateBank") { 
        // 
        alert('Do some ajax to send data to Backend'); 
       } 
       //currentRow.remove(); 

      }); 
     }) 
    </script>