I want to show modal popup after I click the Save button to save values in DB and while showing modal popup, it should continue saving, without closing modal popup
I am using this code
protected void btsave_Click(object sender, EventArgs e)
{
ModalPopupExtender1.Show();
//My Code
}
and my aspx code
<input type="button" runat="server" id="btmodel" style="display: none" />
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btmodel"
PopupControlID="Panel1" PopupDragHandleControlID="PopupHeader" Drag="true" DropShadow="true"
OkControlID="OkButton" CancelControlID="CancelButton" BackgroundCssClass="ModalPopupBG">
</ajaxToolkit:ModalPopupExtender>
<asp:Panel ID="Panel1" Style="display: none" runat="server">
<div class="progress-popup">
<div class="potit">
Saving
</div>
<img src="/images/prog.png" alt="" style="margin: 0 auto; display: block;" />
<div class="potit-cancel">
<span class="cncl">
<asp:Button ID="btnOkay" runat="server" Text="Ok" OnClick="btnOkay_Click" ValidationGroup="vg"
CssClass="popupcancl" />
</span>
</div>
</div>
</asp:Panel>
With this code, It first Saving Data in DB, then showing Modalpopup
add a hidden field on your page. Assign to it a value (let say, 'showed') when you press the button and then, in page_load, with string.compare, see if the value of the hidden field is 'showed'. If it is, then show again the modal control. When you press the cancel button, delete the value from hidden field (make it string.empty).
Related
I have a bootstrap modal with a label control in it. It is launched by clicking a button and I want to change the text of the label before it launches. The text that appears will come from the C# end of it... but that never triggers. I guess the postback never occurs (I am guessing showing the modal is blocking it?) so the text isn't set.
What I am trying to achieve is: Click button, set label text (the text has to come from the back end), show modal. Here is what I have so far:
<asp:Button ID="btnEasy" runat="server" CssClass="btn btn-success" Text="Easy" Width="200px" Height="50px" data-toggle="modal" data-target="#modalQuestion" data-backdrop="static" data-keyboard="false" OnClick="btnEasy_Click"/>
<div class="modal fade" id="modalQuestion" tabindex="-1" role="dialog" aria-labelledby="questionHeader">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="questionHeader">Easy Question</h4>
</div>
<div class="modal-body">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="lblQuestion" runat="server" Text="Question"></asp:Label>
<br />
<br />
<asp:Label ID="lblAnswer" runat="server" Text="Answer"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnEasy" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="btnShowAnswer" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</div>
<div class="modal-footer">
<asp:Button ID="btnShowAnswer" runat="server" CssClass="btn btn-primary" Text="Show Answer" UseSubmitBehavior="false" OnClick="btnShowAnswer_Click"/>
<asp:Button runat="server" CssClass="btn btn-default" data-dismiss="modal" Text="Close" />
</div>
</div>
</div>
</div>
C#:
protected void btnEasy_Click(object sender, EventArgs e)
{
lblQuestion.Text = "Easy clicked";
}
In the btnEasy_Click function, after setting the text value, emit the javascript code which will be executed.
eg.
protected void btnEasy_Click(object sender, EventArgs e)
{
lblQuestion.Text = "Easy clicked";
if(!ClientScript.IsStartupScriptRegistered("JSScript"))
{
ClientScript.RegisterStartupScript(this.GetType(),"JSScript",
"ShowModalPopUp()");
}
}
Write your js function:
<script>
function ShowModalPopUp(){
$('#modalQuestion').modal('show');
}
</script>
You can easily do this by using JS. Here i'm showing an example using jQuery. Bind an onclick event with your button that will open the modal. and change the label text on that time. like this way-
//button code
<asp:Button ID="btnEasy" runat="server" CssClass="btn btn-success" Text="Easy" Width="200px" Height="50px" data-backdrop="static" data-keyboard="false" OnClientClick="showModal();"/>
//scripts
<script>
function showModal(){
$('#<%=lblQuestion.ClientID%>').text('Easy clicked');
$('#modalQuestion').modal('show');
}
</script>
Using a one pager template for asp.net application, and as ASP supports one form per page so can only use one big form in that page, testing my first panel in the page after entering a value and clicking submit in that panel! the value is null in textbox, and select only return 0 whatever the value is selected.
What can i do? can't i use just one form and to get values from all input fields.
<body>
<form id="mainform" class="subscriptionForm" runat="server">
.
.
.
<asp:Panel ID="timepanel" runat="server" >
<label for="intext">Enter Time</label>
<select id="hr" runat="server" style="background-color:#fff; display:inline; color:#0f8094; width:10%; border-style:none; opacity:.7;" name="hr">
<option>0</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option>
<option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option></select><%--<asp:TextBox name="name" id="asdas" runat="server" />--%>
Hr
<select id="min" runat="server" style="background-color:#fff; display:inline; color:#0f8094; width:10%; border-style:none; opacity:.7;">
<option>0</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option><option>13</option><option>14</option><option>15</option><option>16</option><option>17</option><option>18</option><option>19</option><option>20</option><option>21</option><option>22</option><option>23</option><option>24</option><option>25</option><option>26</option><option>27</option><option>28</option><option>29</option><option>30</option><option>31</option><option>32</option><option>33</option><option>34</option><option>35</option><option>36</option><option>37</option><option>38</option><option>39</option><option>40</option><option>41</option><option>42</option><option>43</option><option>44</option><option>45</option><option>46</option><option>47</option><option>48</option><option>49</option><option>50</option><option>51</option><option>52</option><option>53</option><option>54</option><option>55</option><option>56</option><option>57</option><option>58</option><option>59</option></select> Min
<%--<label style="display:inline; "><input type="checkbox" id="textalert" style="display:inline;" />Text Alert</label>
<label><input type="checkbox" id="soundalert" />Sound Alert</label>--%>
<%--<div style="margin-left:150px; margin-top:20px;">--%>
<asp:LinkButton runat="server" ID="send_input" style="padding:15px; background-color:green;" OnClick="start_timer" Text="Enter" />
<%--</div>--%>
</asp:Panel>
.
.
.
</form>
</body>
Here's the scenario:
I've a page(Homepage.aspx) which has a button.
When clicked i used to Pass some values in cookies inside _Click method of the button in .CS file and then open a different aspx page(Detail_Report.aspx) where i was retrieving the values from the cookies and then display the content of the page which uses the values i've retrieved.
Now recently i've decided to implement Ajax pop-up extender to show the Detail_Report.aspx page.
I'm able to do this using the following code:
<asp:modalpopupextender id="ModalPopupExtender1"
runat="server" cancelcontrolid="btnCancel"
okcontrolid="btnOkay" targetcontrolid="Detail_Report"
popupcontrolid="DR" popupdraghandlecontrolid="PopupHeader"
drag="true" backgroundcssclass="ModalPopupBG">
</asp:modalpopupextender>
<div class="popupConfirmation" id="DR" style="display: none">
<iframe id="frameeditexpanse" src="DetailReport.aspx" frameborder="1">
</iframe>
<div class="popup_Buttons" style="display: none">
<input id="btnOkay" type="button" value="Done2" />
<input id="btnCancel" type="button" value="Cancel2" />
</div>
</div>
Here's the button declaration:
<asp:Button ID="Detail_Report" runat="server"
style="z-index: 1; left: 60px; top: 110px; position: absolute; width: 230px;"
Text="Detail Report" Font-Bold="True" BorderStyle="Solid"
Enabled="False" onclick="Detail_Report_Click"/>
And this is what i've inside my onClick Method:
protected void Detail_Report_Click(object sender, EventArgs e)
{
//string javaScript = "<script language=JavaScript>\n" + "DetailReport();\n" + "</script>";
Response.Cookies["proj"].Value = c_ProjName.Text.ToString();
Response.Cookies["LOB"].Value = c_LOB.Text.ToString();
Response.Cookies["release"].Value = c_ReleaseName1.Text.ToString();
Response.Cookies["country"].Value = c_CountryName.Text.ToString();
Response.Cookies["testenvkey"].Value = testenvkey.ToString();
//ClientScript.RegisterStartupScript(this.GetType(), "Detail_Report_Click", javaScript);
Now my problem is Pop-up is coming up, but i'm unable to fetch the values from cookies as those are blank. As a result My Detail_Report.aspx page is not displaying correctly
%If Session("ChildLoad") = "True" Then%>
'Model Extender and panel
<%end if%>
and then on the load of child page check the session status if its true then pick the values from session or cookies but to do that you need to enable post back on your main page.
Idea behind is
when you refresh the main page it will fire the load event from child page as well.
I have a tags that when you hover over another div tag containing the login and password form appears. But for some reasons the event is not firing.
I put the same control outside of the hover and it can be fired.
At first i thought it was because of a drag-and-drop problem because my div could be dragged and placed in the textbox for the website link so i disabled drag-and-drop on my page but the problem doesn't go away.
The mouse cursor changes to the human finger cursor too when I hover over the div.
Here is the code on masterpage where nav-item is the cause:
<div class="brick1" style="width: 33%">
<a href="" class="nav-item">
<div class="nav-hover">
<div class="loginbrick">
<asp:ContentPlaceHolder ID="LoginPlaceHolder" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<i class="li_bulb"></i><span>Welcome, Hover over to login</span>
</a>
</div>
Default.aspx's contentplaceholder:
<asp:Content ID="Content4" ContentPlaceHolderID="LoginPlaceHolder" runat="Server">
<form id="AnonymousForm" runat="server">
<asp:Label ID="Label1" runat="server" Text="UserName: " CssClass="aspTextView"> </asp:Label>
<asp:TextBox ID="tbUserName" runat="server" CssClass="aspTextBox" OnTextChanged="tbUserName_TextChanged"></asp:TextBox>
<br />
<asp:Label ID="Label2" runat="server" Text="Password: " CssClass="aspTextView"></asp:Label>
<asp:TextBox ID="tb_Password" runat="server" CssClass="aspTextBox"></asp:TextBox>
<br />
<asp:Button ID="Button1" runat="server" Text="Login" OnClick="Button1_Click" />
</form>
</asp:Content>
You are enclosing div.nav-hover and div.loginbrick in a hyperlink. Try what happens when you remove that.
in your html brow > brick1 in which your login form is placed.
On brick1 click all event are prevented..
So try to put your form out side brick1.
I am sure your button event is not fire bCoz of js
Checkout you have not added multiple form tag actually we have same problem. and i found issue was because of multiple form in same page.
I have a LinkButton that is wired up to an OnClick event and an href that fires a pop up modal.
My problem is that the modal window is popping up as expected, but the OnClick is not firing, it is not even hitting a break point inside the event.
I will post code below :
<asp:LinkButton href="#viewemydevices" data-toggle="modal" ID="ViewMyDevices" runat="server" OnClick="btnViewMyDevices_Click"></asp:LinkButton>
<div class="modal fade" id="viewemydevices" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>This is a section</h4>
</div>
<div class="modal-body">
<table id="MyDevicesTable" class="table tbody" runat="server" visible="false">
<tbody>
<tr>
<td>
<asp:DataGrid ID="MyDevicesGrid" runat="server" CssClass="table table-striped tbody" Visible="false"
AutoGenerateColumns="True"
ForeColor="black"
HeaderStyle-Font-Bold="true"
HeaderStyle-ForeColor="black"
GridLines="None"
EnableViewState="false"
AllowSorting="True"/>
</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<a class="btn btn-primary" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>
protected void protected void btnViewMyDevices_Click(object sender, EventArgs e)
{
//logic goes here
}
UPDATE
<asp:LinkButton ID="ViewDevices" runat="server" OnClick="btnViewMyDevices_Click"></asp:LinkButton>
This updated code fires the on click event, but does not fire the modal...
The end product that is needed is when the link button is clicked it will display the modal and run the click event. The event a query that fills a datagrid in the body of the modal with the result set.
You are missing target of modal. Usually
data-toggle="modal"
used in pare with
data-target="#viewemydevices"
for greater details please read this
EDIT:
this functionality can be achieved by replacing your linkbutton with a regular html button which will display the modal and after that will make an AJAX call to your server-side function. Please see this article for details on placing AJAX call