model popup is not showing from server side in asp.net
Question
I am trying to show popup model from server side but its not working. I don't know where i am doing wrong. My webform page is inherit from Master Page.All the bootstrap files are included in master file header. Below is the client side code of web form page:
<%@ 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>
Server side code is below:
protected void Add(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$('#myModal').modal('show');", true);
upModal.Update();
}
1 answers
solution1
0 ACCPTED 2017-09-22 04:54:25
Using server-side code to control client-side controls is not good programming. If you can keep all your client-side calls on the client's browser, and away from the server, the better. Unfortunately not all situations afford this, and at times we have to use server-side scripting to control client browser functionality, for good UX and other business reasons.
For example:
Lets' say you want a popup form to give the user the ability to create new logins...
Here's a sample:
<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>
Ignore the validators, but they're handy to know in these situations.
As you can see I have an UpdatePanel surrounding the whole lot, an MPE control and a Panel control which has my form controls (no need to actually create an asp:form control!).
Code behind...
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;
}
So a very rudimentary example of how to manage AjaxControlToolKit's ModalPopupExtender control from both client and server-side.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
asp.net c# from server side lauch popup and wait for response before executing next line
Custom javascript function showing as Not defined when calling from server side asp.net
Neither client-side or server-side (asp.net) imagemap will popup html form
Modal popup is not showing in asp.net
ASP.NET MVC Client side time convert from model
Loading image is showing all server side request as well as client side request in ASP.NET
Raise error in ajax call from server side asp.net
Calling server side event in asp.net from java script
bootstrap alert from server side asp.net using javascript
Calling server side function with parameter from Javascript in ASP.NET
Related Tags