模型弹出不是从服务器端显示在asp.net
问题描述：
我试图从服务器端显示弹出式模型，但它不工作。我不知道我在做错什么。我的webform页面是从主页面继承的。所有的引导文件都包含在主文件头中。下面是web表单页面的客户端代码：模型弹出不是从服务器端显示在asp.net
<%@ 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">×</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();
}
答
使用服务器端代码来控制客户端控件是不好的节目。如果您可以将客户端的所有客户端调用保存在客户端的浏览器上，并远离服务器，则效果会更好。不幸的是，并非所有的情况都能够实现这一点，有时我们必须使用服务器端脚本来控制客户端浏览器的功能，以及良好的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%;"> </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"> </td>
</tr>
<tr style="text-align:left;height:40px">
<td class="auto-style25" style="vertical-align: top; width: 5%;"> </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"> </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" />
<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控制一个非常基本的例子。
+0
感谢亲爱的工作对我来说 – user1891251
+0
@ user1891251谢谢！你能不能请投票我的答案呢？再次感谢 – Fandango68
+1
@ Fandango68他没有特权Up Vote查看。 – AsifAli72090
你有没有做过任何基本的调试？检查浏览器中的JavaScript控制台是否有错误？验证生成的HTML中的ID是否符合您的期望等等？如果你做了这些事情，你的错误应该会变得很快。你为什么没有在你的问题中显示触发'Add'方法的地方？无论如何，为什么你需要回发到服务器只是为了返回一些JavaScript到客户端执行？为什么不在客户端运行它并丢弃UpdatePanel？ – mason
令人困惑的客户端与服务器端。你的服务器代码实际上调用了一个客户端jquery，如果你想要做的就是显示Modal，这是毫无意义的。我正在为你的下面写一个答案。 – Fandango68