使用引导模式

Question

我正在构建一个动态DataTable（.net），其中包含一个aspx Gridview。在其中一个Gridview列中，我有一个aspx Button，它使用CommandEvent将click事件和参数发送到后面的代码。处理完毕后，按钮方法应该打开一个模态，其中包含一个表格，该表格显示在DataTable上。

代码背后

protected void btnTRCInfo_Click(object sender, GridViewCommandEventArgs e)
{
        PendingAndSelectedTRCS PST = new PendingAndSelectedTRCS();

        //Not Pager command Argument 
        if (e.CommandName != "Page")
        {
            PST.ownChange = e.CommandArgument.ToString();
            string[] values = PST.ownChange.Split(',');

            Year = values[0];
            trcNo = values[1];
            Code = values[2];

            if (e.CommandName == "OwnerChange"){
                    TRCListingDetail TLD = new TRCListingDetail();
                    DataSet ds = TLD.GetDataSet(Year, trcNo, Code);

                    GetOwnerChangeData(ds, stateCode);

                    //gdvPSTrc.Visible = false;
                    ScriptManager.RegisterStartupScript(this, this.GetType(), "Show Modal Popup", "openModal('mdlOwnerChange');", true);
                    break;

            }
        }
    }

这是Gridview HTML

<div class="container-fluid">
    <div class="row">
        <div class="table">    
            <asp:GridView 
                id="gdvPSTrc" 
                runat="server" 
                DataSourceID="dsPSTrc" 
                OnRowDataBound="gdvPSTrc_RowCreated"
                OnRowCommand="btnTRCInfo_Click"
                CssClass="table table-hover table-striped trcTable" 
                HorizontalAlign="Center"
                AllowPaging="false" 
                AllowSorting="false"
                AutoGenerateColumns="false"
                GridLines="None" 
                ShowFooter="true" 
                Width="100%"
                BorderStyle="none" 
                SelectedRowStyle-CssClass="selected">
                <Columns>
                    <asp:TemplateField HeaderText="<center>TAX YEAR</center>" ItemStyle-HorizontalAlign="Center"><%-- HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderStyle-BackColor="LightGray" FooterStyle-BackColor="LightGray"--%>
                        <ItemTemplate>
                            <%# Eval("YEAR") %>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="<center>OWNER CHANGE</center>" ItemStyle-HorizontalAlign="Center"><%-- HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderStyle-BackColor="LightGray" FooterStyle-BackColor="LightGray"--%>
                        <ItemTemplate>
                            <asp:Button id="btnOwnerChange" 
                                runat="server" 
                                type="button"
                                CssClass="btn btn-info btn-xs" 
                                data-container="body" 
                                data-toggle="modal" 
                                CommandName="OwnerChange" 
                                CommandArgument='<%# Eval("YEAR") + "," + Eval("TRC_NO") + "," + Eval("CODE") %>'
                                Text="+" 
                                UseSubmitBehavior="false"/>
                        </ItemTemplate>
                    </asp:TemplateField>
                 </Columns>
            </asp:GridView>
            <asp:objectdatasource id="dsPSTrc" runat="server" selectmethod="GetDataSet" typename="PCTO.TTCS.PASTRC" />

这是按钮背后的代码打开的模式

<div class="modal fade viewport" id="mdlOwnerChange" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static" 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 hidden" data-dismiss="modal" aria-hidden="true">x</button><center><h4 class="modal-title"><asp:Label runat="server" ID="lbl_Title3" /></h4></center>
            </div>
            <div class="modal-body">
                <div class="panel panel-info">
                    <div class="panel-heading">
                        <div class="panel-title"><asp:Label runat="server" ID="lblOwnerChangeTitle" /></div>
                    </div>
                    <div class="panel-body" style="padding:0px;">
                        <div class="form">
                            <div class="row">
                                <div class="col-sm-12">
                                    <asp:Table ID='tblOwnerChange' runat='server' CssClass="table table-hover table-striped" style="margin-bottom:0px;"><%--OnRowDataBound="gdvOwnerChange_RowCreated" DataSourceID="dsOC"--%>
                                        <asp:TableHeaderRow>
                                            <asp:TableHeaderCell BackColor="LightGray" Width="10%" ><center>
                                                <asp:Label Text='RECORDED' runat="server" /></center>
                                            </asp:TableHeaderCell>
                                            <asp:TableHeaderCell BackColor="LightGray" Width="10%" ><center>
                                                <asp:Label Text='SEQUENCE' runat="server" /></center>
                                            </asp:TableHeaderCell>
                                        </asp:TableHeaderRow>
                                        <asp:TableRow>
                                            <asp:TableCell>
                                                <asp:Label ID='lblRecorded' runat='server' />
                                            </asp:TableCell>
                                            <asp:TableCell>
                                                <asp:Label ID='lblSequence' runat='server' />
                                            </asp:TableCell>
                                        </asp:TableRow>
                                    </asp:Table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

当页面从尝试的数据表重新加载和模态打开重新加载时，我不断收到js mData错误。当我在列按钮单击事件之前查看Datatable / Gridview的源时，会出现thead和tbody标记。但是一旦我单击列按钮，页面就会重新加载，而Datatable / Gridview现在缺少thead / tbody，而这会返回抛出mData错误。

JS

var tblTRCs = $('#cphPage_gdvPSTrc').DataTable({
    ordering: false, //turn sorting on/off
    lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, 'All']], 
    responsive: {
        details: {
            display: $.fn.dataTable.Responsive.display.childRow
        }
    },
    stateSave: true, 
    stateDuration: -1 
});

//OPEN MODAL FUNCTION
function openModal(parm) {
$('#' + parm).modal('show');};

最后，在任何这些事件中，模态都不会显示。如果我查看其后面的代码及其表和数据，它已经准备好了，但openModal函数对于这个特定的模态不能正常工作。这可能与重新加载的时间有关，还是在页面后面显示？