Question

我正在为我的网络应用程序使用母版页有一个内容页面我们可以称之为银行数据有一个GridView显示所有库并有一个编辑，添加，删除按钮我的魔杖显示一个带有输入数据的bootstrap模式来编辑或添加新的bank并使用asp RequiredFieldValidator进行验证

这是ASPX代码

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

在没有使用Jquery

的情况下，是否有任何想法使用ASP代码执行此操作

Answer 1

可能你需要这样的东西。记住两件事

1.不要忘记将ClientIDMode="Static"添加到asp.net控件

2. e.preventDefault()阻止回发在点击事件中添加jQuery功能

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

在ASP.NET中的Bootstrap弹出模式中加载和保存数据

1 个答案: