模型彈出不是從服務器端顯示在asp.net

Question

我試圖從服務器端顯示彈出式模型，但它不工作。我不知道我在做錯什麼。我的webform頁面是從主頁面繼承的。所有的引導文件都包含在主文件頭中。下面是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

使用服務器端代碼來控制客戶端控件是不好的節目。如果您可以將客戶端的所有客戶端調用保存在客戶端的瀏覽器上，並遠離服務器，則效果會更好。不幸的是，並非所有的情況都能夠實現這一點，有時我們必須使用服務器端腳本來控制客戶端瀏覽器的功能，以及良好的UX和其他商業原因。

例如：

讓那你就要一個彈出的形式給用戶創造新的登錄的能力...

這裏有一個例子：

<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：表單控件）。

代碼背後...

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控制一個非常基本的例子。