更新面板中的ASP.NET gridview => rowcommand无法正常工作

时间:2014-09-09 18:37:27

标签: asp.net twitter-bootstrap gridview updatepanel rowcommand

一直在打破这个问题。无法弄清楚为什么我的rowcommand没有触发。

我在页面加载时有一个空网格。在按钮上单击我启动一个具有保存按钮的模式。保存按钮通过将新行绑定到数据表来向Grid添加新行。 当我点击新行上的链接按钮=>行命令没有触发。

我在以前的项目中已经做了很多次,从来没有遇到过这个问题。我想知道它是否是由Modal中的bootstrap验证器引起的。

所以这是我的HTML:

 <asp:UpdatePanel runat="server" ID="gridPanel" ChildrenAsTriggers="true" UpdateMode="Conditional">
                        <ContentTemplate>
                            <asp:GridView runat="server" ID="batchDetailGrid" CssClass="table table-responsive"
                                 OnRowCommand="batchDetailGrid_RowCommand1">
                                <Columns>
                                    <asp:TemplateField >
                                        <ItemTemplate>
                                            <asp:LinkButton id="cmdDelete" runat="server" class="btn "
                                                CommandName ="DeleteRecord" 
                                                CommandArgument="<%# CType(Container,GridViewRow).RowIndex %>" 
                                                Text="" ToolTip="Delete Record">
                                                <i  class="glyphicon glyphicon-remove"></i>
                                            </asp:LinkButton>
                                            <asp:LinkButton ID="cmdEdit" CssClass="btn" runat="server"
                                                CommandName ="EditRecord" 
                                                CommandArgument="<%# CType(Container,GridViewRow).RowIndex %>" 
                                                ToolTip="Edit Record">
                                                <i  class="glyphicon glyphicon-pencil"></i>
                                            </asp:LinkButton>
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                </Columns>      
                            </asp:GridView>
                        </ContentTemplate>
                        <Triggers>
                            <asp:AsyncPostBackTrigger ControlID="cmdCreate" EventName="click" />
                            <asp:AsyncPostBackTrigger ControlID="batchDetailGrid" EventName="rowcommand" />
                        </Triggers>
                    </asp:UpdatePanel>

                <!-- Modal -->
            <div class="  modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
              <div class="modal-dialog modal-lg">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="myModalLabel">Card Details</h4>
                  </div>
                  <div class="modal-body">
                       <!--First Name Surname-->
                       <div class="form-group">
                            <asp:Label runat="server" CssClass="control-label col-md-2">First Name</asp:Label>
                            <div class="col-md-4">
                                <input type="text" name="firstname" id="firstname" class="form-control"
                                    data-bv-notempty="true"
                                    data-bv-notempty-message="First Name cannot be blank" />
                            </div>
                            <asp:Label runat="server" CssClass="control-label col-md-2">Surname</asp:Label>
                            <div class="col-md-4">
                                <input type="text" name="surname" id="surname" class="form-control"
                                    data-bv-notempty="true"
                                    data-bv-notempty-message="Surname cannot be blank"/>
                            </div>
                       </div>
                       <!--NRC-->
                       <div class="form-group">
                           <asp:Label runat="server" CssClass="control-label col-md-2">NRC</asp:Label>
                           <div class="col-md-4">
                                <input type="text" name="NRC" id="NRC" class="form-control"
                                    data-bv-notempty="true"
                                    data-bv-notempty-message="NRC cannot be blank"/>
                           </div>
                       </div>
                       <!--Current Card-->
                       <div class="form-group">
                           <asp:Label runat="server" CssClass="control-label col-md-2">Current Card</asp:Label>
                           <div class="col-md-4">
                                <input type="text" name="card" id="card" class="form-control"
                                    data-bv-notempty="true"
                                    data-bv-notempty-message="Current Card cannot be blank"/>
                           </div>
                       </div>
                       <!--Action-->
                       <div class="form-group">
                           <asp:Label runat="server" CssClass="control-label col-md-2">Requested Action</asp:Label>
                           <div class="col-md-4">
                                <input type="text" name="action" id="action" class="form-control"
                                    data-bv-notempty="true"
                                    data-bv-notempty-message="Action cannot be blank"/>
                           </div>
                       </div>
                       <!--Reason-->
                       <div class="form-group">
                           <asp:Label runat="server" CssClass="control-label col-md-2">Reason</asp:Label>
                           <div class="col-md-4">
                                <input type="text" name="reason" id="reason" class="form-control"
                                    data-bv-notempty="true"
                                    data-bv-notempty-message="Reason cannot be blank"/>
                           </div>
                       </div>
                       <!--Date requested-->
                       <div class="form-group">
                           <asp:Label runat="server" CssClass="control-label col-md-2">Date Requested</asp:Label>
                           <div class="col-md-4">
                                <input type="text" name="dtrequested" id="dtrequested" class="form-control"/>
                           </div>
                       </div>
                       <!--Re-issue Required-->
                       <div class="form-group">
                           <div class="col-md-offset-2 col-md-4">
                               <asp:CheckBox runat="server" ID="chkIssue" Checked="true" CssClass="checkbox" Text="Re-issue required" />
                           </div>
                       </div>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <asp:UpdatePanel ChildrenAsTriggers="true" UpdateMode="Conditional" runat="server" ID="btnPanel">
                        <ContentTemplate>
                            <asp:Button runat="server" ID="cmdCreate" Text="Create Request" CssClass="btn btn-primary" />
                        </ContentTemplate>
                    </asp:UpdatePanel>
                  </div>
                </div>
              </div>
            </div>

这是jquery:

   <script>
        $(function () {
            $('.btn').tooltip();

            $('#cmdNewCard').click(function(){
                $('#myModal').modal('show');
            });

        });
</script>
<script>
    $(function () {
        $('#dtrequested').datepicker({
            autoclose: true
        });

    });
</script>
<script>

    $(function () {
        $('#form1').bootstrapValidator({
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                dtrequested: {
                    message: 'The Date is not valid',
                    validators: {
                        notEmpty: {
                            message: 'The date is required and cannot be empty'
                        },
                        date: {
                            format: 'MM/DD/YYYY',
                            message: 'The value is not a valid date'
                        }
                    }
                },
            }
        })

        .on('success.form.bv', function (e) {


            var $form = $(e.target),
                validator = $form.data('bootstrapValidator'),
                submitButton = validator.getSubmitButton();

        });

        $('#dtrequested').on('change', function (e) {
            // Validate the date when user change it
            $('#form1').bootstrapValidator('revalidateField', 'dtrequested');

        });
    });

</script>

这是我在cmdCreate_click上的服务器代码和未触发的rowCommand

    Private Sub loadGrid(Optional index As Integer = 0)
    With batchDetailGrid
        .AutoGenerateColumns = True
        .DataSource = ViewState("Batch")
        .PageIndex = index
        .DataBind()
    End With
End Sub
    Protected Sub batchDetailGrid_RowCommand1(sender As Object, e As GridViewCommandEventArgs)
    MsgBox("")
    If (e.CommandName = "EditRecord") Then
        MsgBox("editing")
        Dim index As Integer = (e.CommandArgument)
        Dim row As GridViewRow = batchDetailGrid.Rows(index)
        ScriptManager.RegisterStartupScript(Page, GetType(Page), "Modal", "$(#myModal).modal('show');", True)
    End If
End Sub

2 个答案:

答案 0 :(得分:0)

这是不可容忍的,因为rowcommand没有触发的原因是因为模态中的某些输入控件具有name和id就像action一样。

我使用网格和模态(但工作的那个)复制了类似页面中的代码,并开始修改它,使其看起来像上面描述的那样。

最终发现当我通过Modal Mark up时,rowCommand停止了射击。然后我删除了模态中的所有输入控件,除了名字和姓氏。 Rowcommand开始射击,然后我意识到这可能是因为我将输入控件命名为“action”。

答案 1 :(得分:0)

在我的情况下,Gridview RowCommand可以由updatePanel中的<asp:Button>触发(我使用Visual Studio 2012)