I have a boostrap modal, and here is the button to close it:
<div class="modal-footer">
<asp:Button ID="btnClose" CssClass="btn" runat="server" Text="Close" data-dismiss="modal" aria-hidden="true" />
</div>
The Button and modal form are nested in an update panel. But it does not trigger a postback so the update panel does not do its thing. If I remove data dismiss then it will not close the modal.
What could I do?
You can use the ASP Button like in your example
<div class="modal-footer">
<asp:Button ID="btnClose" CssClass="btn" runat="server" Text="Close" data-dismiss="modal" aria-hidden="true" />
</div>
just try the UseSubmitBehavior="false"
<div class="modal-footer">
<asp:Button ID="btnClose" CssClass="btn" runat="server" Text="Close" data-dismiss="modal" aria-hidden="true" UseSubmitBehavior="false" />
</div>
this will close the modal and trigger a postback
Data-dismiss is javascript based and just hides the modal. If you want the close button to postback, you'll need to use the OnClick property and add a method to handle that in your code-behind:
<asp:Button ID="btnClose" CssClass="btn" runat="server" Text="Close" data-dismiss="modal" aria-hidden="true" OnClick="YourMethodNameGoesHere"/>
Then in your code-behind...do something:
protected void YourMethodNameGoesHere()
{
// Do stuff
}
Related
I am trying to prevent my modal from closing when keypress enter is entered in my modal asp textbox.
I have tried to wrap the textbox in another update panel and use an asynchronous postback trigger on textchanged, but thats not quite what I'm looking for. I am trying to create a text entry part which only updates when keypress enter is pressed and not when the text changes, I have also tried adding data-dismiss="modal" to the textbox itself like other pages have suggested, but this just means when I click on the textbox it shuts the modal.
<asp:UpdatePanel ID="upd_mdl_console" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<!-- Ryan Console-->
<div class="modal fade" data-dismiss="modal" data-toggle="modal" data-backdrop="static" data-keyboard="false" id="mdl_console" tabindex="-1" role="dialog">
<div class="modal-dialog2" role="document">
<div class="modal-content _dev_console">
<div class="modal-header _dev_console">
<h5 class="modal-title pull-left" id="H1" runat="server">
<asp:Label runat="server" ID="Label3" Text="DEV CONSOLE"></asp:Label></h5>
<button type="button" class="close pull-right" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<br />
</div>
<div class="modal-body">
<div class="panel-heading _dev_console">
<asp:Literal ID="devbox_line_5" runat="server" Text=""></asp:Literal>
<asp:Literal ID="devbox_line_4" runat="server" Text=""></asp:Literal>
<asp:Literal ID="devbox_line_3" runat="server" Text=""></asp:Literal>
<asp:Literal ID="devbox_line_2" runat="server" Text=""></asp:Literal>
<asp:Literal ID="devbox_line_1" runat="server" Text=""></asp:Literal>
<asp:UpdatePanel ID="upd_mdl_txt" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:TextBox ID="txt_Devbox" class="form-control _dev_console" runat="server" autocomplete="off"></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div class="panel-heading _dev_console">
<div class="input-group" style="margin-bottom: 10px; width: 100%">
</div>
</div>
</div>
<div style="clear: both"></div>
<div class="modal-footer _dev_console">
<asp:Label ID="Label4" runat="server" Text="Label" Visible="false"></asp:Label>
<%-- <asp:Button ID="Button1" OnClick="lnk_go_Click" class="btn btn-success" runat="server" AutoPostBack="false" Text="Create"></asp:Button>--%>
<button type="button" class="btn btn-secondary _dev_console" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
I use the following snippet to disable enter in textboxes. This also prevents triggering of a form post when pressing enter inside a textbox. It might work for preventing the closure of the modal also.
$('input').keypress(function (e) {
return e.keyCode !== 13;
});
If you want to disable the enter in the modal only you could do something like this
$('.modal-body input').keypress(function (e) {
return e.keyCode !== 13;
});
I've been trying for a while to find out the reason why the CommandName of a button does not work, in truth I always throw it empty when entering the onCommand event and even onClick of the same button despite putting the property with a value, the strange of the case is that I can not modify the property and putting the property CommandName works without problem the first time, however it is impossible for me to modify its value.
To start I have a ModalPopupExtender together with a Panel which has a series of TextBox and an AsyncFileUpload with a series of buttons, it is necessary to bear in mind that I am working on an ASPX form, son of a MasterPage:
<cc1:ModalPopupExtender ID="mpEditUser" runat="server" PopupControlID="pnEditUser" TargetControlID="lbShowEditUser"
CancelControlID="lbCloseEditUser" BackgroundCssClass="modalBackground">
<Animations>
<OnShown>
<FadeIn Duration="0.40" Fps="30" />
</OnShown>
<OnHiding>
<FadeOut Duration="0.40" Fps="30" />
</OnHiding>
</Animations>
</cc1:ModalPopupExtender>
<asp:Label ID="lbShowEditUser" runat="server" Text="" style="display:none;"></asp:Label>
<asp:Label ID="lbCloseEditUser" runat="server" Text="" style="display:none;"></asp:Label>
<asp:Panel ID="pnEditUser" runat="server" ClientIDMode="Static" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">
Modify User
</h4>
</div>
<div class="modal-body">
<asp:UpdatePanel ID="upEditUser" runat="server">
<ContentTemplate>
<p>Message</p>
<div class="form-group">
<label for="txtEditUser">Code</label>
<asp:TextBox ID="txtEditUser" runat="server" CssClass="form-control" ClientIDMode="Static" Enabled="false"></asp:TextBox>
</div>
<div class="form-group">
<label for="txtEditNameUser">Name</label>
<asp:TextBox ID="txtEditNameUser" runat="server" CssClass="form-control" ClientIDMode="Static" Enabled="false"></asp:TextBox>
</div>
<div class="form-group">
<asp:UpdatePanel ID="upX" runat="server">
<ContentTemplate>
<label class="">CV User</label>
<div class="input-group">
<label class="input-group-btn">
<span class="btn btn-primary">
Upload<cc1:AsyncFileUpload ID="fuCVUser" runat="server" class="form-control" style="display:none;" ClientIDMode="Static" OnUploadedComplete="fuCVUser_UploadedComplete" />
</span>
</label>
<input type="text" class="form-control" readonly disabled>
</div>
<span class="help-block">
<div class="form-inline">
<div class="form-group">
<asp:Button ID="btnDownloadCVUser" runat="server" CssClass="btn btn-default" ClientIDMode="Static" CommandArgument="Test" OnCommand="btnDownloadCVUser_Command" Text="Download" />
</div>
</div>
</span>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div class="modal-footer">
<asp:UpdatePanel ID="upControlsEditUser" runat="server">
<ContentTemplate>
<asp:Button ID="btnCloseEditUser" runat="server" AutoPostBack="true" CausesValidation="true" Text="Close" class="btn btn-default" data-dismiss="modal" OnClick="btnCloseEditUser_Click" aria-hidden="true" />
<asp:Button ID="btnEditParticipant" runat="server" AutoPostBack="true" CausesValidation="true" Text="Update User" class="btn btn-primary" data-dismiss="modal" OnClick="btnEditUser_Click" aria-hidden="true" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</div>
</asp:Panel>
Event onCommand:
protected void btnDownloadCVUser_Command(object sender, CommandEventArgs e)
{
string x = e.CommandArgument; <- (this value is always "")
}
To get out of doubt, I decided to put the "btnDownloadCVUser" control out of the Panel
............
</asp:UpdatePanel>
</div>
</div>
</div>
</asp:Panel>
<asp:Button ID="btnDownloadCVUser" runat="server" CssClass="btn btn-default" ClientIDMode="Static" CommandArgument="Test" OnCommand="btnDownloadCVUser_Command" Text="Download" />
This worked successfully on the CommandArgument, that is, I could see its assigned value on the label and manage to modify its value.
I tried to put UpdatePanel together with the AsyncFileUpload in such a way that it encloses the "from-group" with the triggers but I keep presenting the same problem. It's very strange because I have a button that does exactly the same thing but it's NOT in a MomalPopupExtender
Why does this happen?
Does ModalPopupExtender or AsyncFileUpload have something to do with the problem?
Does the level of the "form-group" have anything to do with it?
So far the only lifeguard I have is to use ViewState, but I'm still intrigued by the reason that causes my problem :(
Update 01:
I have noticed that the reason seems to be the method with which I load the files (AsyncFileUpload), apparently if I try to change a variable for this it turns out that it is as if I did not, but it allows me to upload the files without problem. Is there any solution?
private int a = 0;
protected void fuCVUser_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
{
a = 10; < - The value changes to '10' but if I enter the event of another button of the ModalPopupExtender the value is still '0'
}
After seeing this question:
Persisting variable after AsyncFileUpload call to OnUploadedComplete
I have come to the conclusion that it is enough to use a static global variable or Session :)
Apparently the AsyncFileUpload method works with static variables which could justify the problem with CommandArgument
I am trying to create a Login Page.Whenever, I click on login button username textbox's text becomes empty.
I have tried :
Using Updatepanel didnt work
OnClientClick- it doesnt fires OnClick event
I tried getting value by string usrnm=Page.Request.Form["username"].ToString(); but it gave null value
I tried putting AutoPostBack="true" on textbox
Heres by markUp:
<label for="username">Username</label>
<%--<input type="text" name="Uname" id="username"/>--%>
<asp:TextBox ID="txtusrnm" runat="server" AutoPostBack="true"/>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="Pname" id="password">
</div>
<div class="form-group">Forgot password?</div>
<hr class="hr-sm hr-stroke" />
<div class="form-group">
<%--<input id="btnlogin" type="button" class="btn btn-primary btn-wide" value="Login" runat="server" onserverclick="btnlogin_ServerClick" >--%>
<asp:Button ID="btnLogin" runat="server" Text="Login" class="btn btn-primary btn-wide" OnClick="btnLogin_Click" UseSubmitBehavior="false" EnableViewState="true" />
I am able to resolve my issue , i was having AutoPostBack='true' in textbox so just removed and also replace UseSubmitBehavior="false" EnableViewState="true" with CausesValidation="False" , works fine now.
Textbox:
<asp:TextBox ID="txtusrnm" runat="server"/>
and button :
<asp:Button ID="btnLogin" runat="server" Text="Login" class="btn btn-primary btn-wide" OnClick="btnLogin_Click" CausesValidation="False"/>
Thanks
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>
I have a modal that pops up when you click a button, inside that modal I have a save button. When that save button is pressed I would like to fire some C# code in a with an OnClick function....
Can anyone tell me why this isn't working for me?
ASP.NET
<div class="modal fade" id="deviceModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>Select</h4>
</div>
<div class="modal-body">
<asp:DropDownList ID="drpDownID" runat="server" CssClass="fields" EnableViewState="true">
<asp:ListItem Text="<Select>" Value="0" />
</asp:DropDownList>
</div>
<div class="modal-footer">
<asp:Button ID="btnSave" runat="server" Text="Save" data-dismiss="modal" CssClass="btn btn-primary" OnClick="btnSave_Click" />
<asp:Button ID="btnClose" runat="server" Text="Close" data-dismiss="modal" CssClass="btn btn-danger" OnClick="btnClose_Click" />
</div>
</div>
</div>
</div>
C#
protected void btnSave_Click(object sender, EventArgs e)
{
string test = "";
test = drpDownID.SelectedItem.ToString();
}
It won't even hit my break point.... And this is embedded in a form tag with a runat server
It works fine if I take the save button outside of the modal, but that completely defeats the purpose of the modal. So it has to be something with modal don't like click events very much...
Have you tried adding () to the onclick? like OnClick="btnSave_Click()".
EDIT: You can probably ignore that. It doesn't seem to matter for asp tags. Maybe this question can help you: ASP.NET button inside bootstrap modal not triggering click event
If your click on the save doesn't trigger a postback inside the dialog and it does outside the dialog: Can you use Firebug in Firefox to see whether the Save button is still part of the form?
I know JQuery dialog brings the container to the bottom of the body and therefor takes it out of a possible form, resulting in form posts not triggering from dialogues. I have a nice fix for this JQuery dialog issue, but that's probably not part of this topic.