javascript - 模式弹出窗口未在 ASP.NET 中的服务器端显示

Question

我试图从服务器端显示弹出模型，但它不起作用。我不知道我哪里做错了。我的网络表单页面继承自母版页。所有引导文件都包含在主文件头中。下面是Web表单页面的客户端代码:

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="UploadDocument.aspx.cs" Inherits="DMS_WebApp.UploadDocument" %>




<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <section class="panel">
        <header class="panel-heading">
            Upload Documents
        </header>
        <div class="row">
            <div class="col-md-12">
                <div class="form-group">
                    <div class="row">
                        <div class="col-md-12">
                            <asp:GridView ID="GridView1" runat="server" CssClass="table table-striped table-advance table-hover" AutoGenerateColumns="true"
                                Style="max-width: 500px">
                                <Columns>
                                    <asp:TemplateField HeaderText="">
                                        <ItemTemplate>
                                            <asp:Button ID="btnEdit" runat="server" Text="Edit" OnClick="Edit" class="btn btn-primary" />

                                        </ItemTemplate>
                                    </asp:TemplateField>

                                </Columns>

                            </asp:GridView>
                        </div>
                    </div>
                </div>

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

    <!-- Bootstrap Modal Dialog -->

    <div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">

            <asp:UpdatePanel ID="upModal" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
                <ContentTemplate>
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title">
                                <asp:Label ID="lblModalTitle" runat="server" Text=""></asp:Label></h4>
                        </div>
                        <div class="modal-body">
                            <asp:Label ID="lblModalBody" runat="server" Text=""></asp:Label>
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>
                        </div>
                    </div>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </div>

</asp:Content>

服务器端代码如下:

    protected void Add(object sender, EventArgs e)
      {

       ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$('#myModal').modal('show');", true);
        upModal.Update();

    }

Answer 1

使用服务器端代码来控制客户端控件并不是好的编程。如果您可以将所有客户端调用保留在客户端浏览器上，并且远离服务器，那就更好了。不幸的是，并非所有情况都能承受这种情况，有时，出于良好的用户体验和其他业务原因，我们必须使用服务器端脚本来控制客户端浏览器功能。

例如:

假设您想要一个弹出表单来让用户能够创建新的登录名...

这是一个示例:

<asp:UpdatePanel ID="upADDMAIN" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:Button ID="btnADD" runat="server" Text="NEW LOGIN" BackColor="Blue" Font-Bold="True" ForeColor="#FFFFCC" OnClick="btnADD_Click" />
        <asp:Button ID="btnDUM" runat="server" style="display:none" />
        <div style="height:20px">
        </div>
        <ajaxToolkit:ModalPopupExtender ID="mpeADD" runat="server"
            targetcontrolid="btnDUM" 
            popupcontrolid="pnlADD" 
            backgroundcssclass="modelbackground">    
        </ajaxToolkit:ModalPopupExtender>
        <asp:Panel ID="pnlADD" runat="server" Width="750px" HorizontalAlign="Center" CssClass="auto-style10" Height="250px">
            <div class="hdr" id="puHDR">
                <div class="text-center" style="background-color: #FFCC66; height:30px; vertical-align:middle">
                    <strong style="background-color: #FFCC66; vertical-align: middle;">ENTER NEW LOGIN DETAILS</strong></div>
            </div>
            <div class="auto-style31" id="puBDY">
                <table style="padding: 2px; text-align: left; vertical-align: top;" class="auto-style4">
                    <tr style="text-align:left;height:10px">
                        <td class="auto-style32" style="vertical-align: top; " colspan="4"></td>
                    </tr>
                    <tr style="text-align:left;">
                        <td class="auto-style5" style="vertical-align: top; width: 5%;"></td>
                        <td class="auto-style2" style="vertical-align: top"><strong>POTL Login ID</strong></td>
                        <td class="auto-style7" style="vertical-align: top">
                            <asp:TextBox ID="txtLOGIN" runat="server" ValidationGroup="vgAdd"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtLogin" Display="Dynamic" ErrorMessage="* Required" SetFocusOnError="True" ValidationGroup="vgAdd"></asp:RequiredFieldValidator>
                            <asp:CustomValidator ID="cv1" runat="server" ControlToValidate="txtLOGIN" Display="Dynamic" ErrorMessage="This login already exits!" OnServerValidate="cv1_ServerValidate" ValidateEmptyText="true" ValidationGroup="vgAdd"></asp:CustomValidator>
                        </td>
                        <td class="auto-style3" style="width: 10%;">
                            <asp:CheckBox ID="cbISActive" runat="server" Checked="True" CssClass="myCheckBox" TabIndex="4" Text="Active?  " TextAlign="Left" ValidationGroup="vgAdd" Width="100%" />
                        </td>
                    </tr>
                    <tr style="text-align:left;height:40px">
                        <td class="auto-style25" style="vertical-align: top; width: 5%;">&nbsp;</td>
                        <td class="auto-style18" style="vertical-align: top"><strong>Password</strong></td>
                        <td class="auto-style36" style="vertical-align: top">
                            <asp:TextBox ID="txtPWD" runat="server" 
                                TextMode="Password"
                                ToolTip="Enter at least an 8 character password with a mix of numbers, capitals, and letters."
                                ValidationGroup="vgAdd" TabIndex="1"></asp:TextBox>
                            <asp:CheckBox ID="cbShow" runat="server" />
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" 
                                ControlToValidate="txtPWD" 
                                ErrorMessage="* Required" 
                                ValidationGroup="vgAdd" 
                                Display="Dynamic"
                                SetFocusOnError="True"></asp:RequiredFieldValidator>
                        </td>
                        <td style="width: 10%;" class="auto-style37">&nbsp;</td>
                    </tr>
                    <tr style="text-align:left;height:40px">
                        <td class="auto-style25" style="vertical-align: top; width: 5%;">&nbsp;</td>
                        <td class="auto-style18" style="vertical-align: top"><strong>Password (CONFIRM)</strong></td>
                        <td class="auto-style36" style="vertical-align: top">
                            <asp:TextBox ID="txtPWDCONF" runat="server" 
                                TextMode="Password"
                                ToolTip="Enter at least an 8 character password with a mix of numbers, capitals, and letters." 
                                ValidationGroup="vgAdd" TabIndex="2"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" 
                                ControlToValidate="txtPWDCONF" 
                                ErrorMessage="* Required" 
                                SetFocusOnError="True" 
                                Display="Dynamic"
                                ValidationGroup="vgAdd"></asp:RequiredFieldValidator>
                            <asp:CompareValidator ID="CompareValidator1" runat="server" 
                                ControlToValidate="txtPWDCONF" 
                                ValidationGroup="vgAdd" 
                                SetFocusOnError="true"
                                Display="Dynamic"
                                ControlToCompare="txtPWD" 
                                ErrorMessage="Passwords do not match!" />
                        </td>
                        <td style="width: 10%;" class="auto-style37">&nbsp;</td>
                    </tr>
                    <tr style="text-align:left;">
                        <td class="auto-style27" style="vertical-align: top; width: 5%;"></td>
                        <td class="auto-style28" style="vertical-align: top;"><strong>Default Agent</strong></td>
                        <td class="auto-style29" style="vertical-align: top;">
                            <asp:DropDownList ID="ddlAgent" runat="server" AppendDataBoundItems="true" Width="370px"
                                DataSourceID="sdsDEBmaster2" DataTextField="AgentName" DataValueField="AgentID" ValidationGroup="vgAdd" TabIndex="3">
                                <asp:ListItem Selected="True" Value="0">Select...</asp:ListItem>
                            </asp:DropDownList>
                            <asp:SqlDataSource ID="sdsDEBmaster2" runat="server" ConnectionString="<%$ ConnectionStrings:SpotConnectionString %>" 
                                SelectCommand="SELECT ...blahblah"></asp:SqlDataSource>
                        </td>
                        <td style="width: 10%;" class="auto-style30">
                            <asp:RequiredFieldValidator ID="rfvddl0" runat="server" 
                                ControlToValidate="ddlAgent" 
                                InitialValue="0" 
                                ErrorMessage="* Required" 
                                ValidationGroup="vgAdd" 
                                Display="Dynamic"
                                SetFocusOnError="True"></asp:RequiredFieldValidator>
                        </td>
                    </tr>
                    <tr style="text-align:left;height:40px">
                        <td class="text-center" style="vertical-align: top; " colspan="4">
                            <asp:Button ID="btnOK" runat="server" 
                                CausesValidation="true" 
                                OnClick="btnOK_Click" 
                                style="width: 80px" 
                                TabIndex="5" 
                                Text="OK" 
                                UseSubmitBehavior="true" 
                                ValidationGroup="vgAdd" />
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <asp:Button ID="btnCAN" runat="server" 
                                CausesValidation="False" 
                                OnClick="btnCAN_Click" 
                                style="width: 80px" 
                                TabIndex="6" 
                                Text="CANCEL" />
                        </td>
                    </tr>
                </table>
            </div>
        </asp:Panel>
    </ContentTemplate>
</asp:UpdatePanel>

忽略验证器，但在这些情况下它们很容易知道。

如您所见，我有一个 UpdatePanel 围绕着整个区域，一个 MPE 控件和一个 Panel 控件，其中包含我的表单控件(无需实际创建 asp:form 控件!)。

背后的代码...

protected void btnADD_Click(object sender, EventArgs e)
        {
            ClearADDform();
            mpeADD.Show(); //show the MPE control when the user has clicked the ADD button control
        }

        protected void btnOK_Click(object sender, EventArgs e)
        {
            Page.Validate("vgAdd");
            if (Page.IsValid)
            {
                try
                {
//blahblah

                    //hide the mpe
                    mpeADD.Hide();

                    //reload the page
                    Page.Response.Redirect(Page.Request.Url.ToString(), true);
                }
                catch (Exception exc)
                {
                    ScriptManager.RegisterStartupScript(this, GetType(), "ServerControlScript", "alert('" + exc.Message + "');", true);
                }
            }
            else
                //show the mpe and continue showing until either CANCEL or fields are validated
                mpeADD.Show();
        }

        protected void btnCAN_Click(object sender, EventArgs e)
        {
            mpeADD.Hide();
        }

        protected void ClearADDform()
        {
            txtLOGIN.Text = string.Empty;
            cbISActive.Checked = true;
            txtPWD.Text = string.Empty;
            ddlAgent.SelectedIndex = -1;
        }

这是一个非常基本的示例，说明如何从客户端和服务器端管理 AjaxControlToolKit 的 ModalPopupExtender 控件。