I am using bootstrap modal in my asp.net page like this:
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<asp:UpdatePanel ID="ModalUpdatePanel" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnRegister" EventName="Click" />
</Triggers>
<ContentTemplate>
<p>
textboxes here
<div class="popup-footer-wrapper">
<div class="popup-footer-left">
<%-- <input type="submit" class="login-button" name="login-button" value="Sign Up">--%>
<asp:Button ID="btnRegister" runat="server" CssClass="login-button" OnClick="btnRegister_Click"
UseSubmitBehavior="false" Text="<%$ Resources: HRGELoggedOutMaster, Signup %>" />
</div>
</div>
</p>
</ContentTemplate>
</asp:UpdatePanel>
</div>
i see that inside
protected void btnRegister_Click(object sender, EventArgs e)
all the texboxes show empty value. whatever user type in textbox. Please suggest how to fix it. It may be because of UseSubmitBehavior="false" but if i dont use it then control doesnt go to onclick event.
The reason why the you are not seeing your posted values, is because your values are not being posted. The bootstrap modal manager uses the 'body' element as the root element to which it appends your modals. As a result your modals are now outside the 'form' element and the values are not being posted back to the server.
To fix this, change the default value of the 'manager' property as follows:
// Note the manager is passed to the root form element.
// Otherwise, the modals are taken out of the form and
// values not posted back to the server
$.fn.modal.defaults.manager = $.fn.modalmanager.defaults.manager = 'body form:first';
EDIT: This is assuming you are using the Bootstrap-Modal Extension
Steven Anderson is right, values are not posted because modal inputs are outside the form.
I was able to workaround this problem using javascript to copy the value of the modal inputs to hidden asp.net controls.
I create a hidden asp.net control outside of the modal:
<asp:HiddenField ID="MyHiddenControl" value="name" runat="server" />
The modal textbox I want to submit:
<asp:TextBox ID="FormYourName" CssClass="form-control" runat="server"/>`
My modal submit button looks like this;
<asp:Button ID="BtnSubmit" runat="server" Text="Submit" CssClass="btn btn-primary" OnClientClick="Javascript:DoCustomPost();" UseSubmitBehavior="false" />
My JavaScript function looks like:
function DoCustomPost()
{
var ModalTextBox = document.getElementById("FormAmenity");
var HiddenTextBox = document.getElementById("MyHiddenControl");
// This is the value I want to Post
MyHiddenControl.value = ModalTextBox.value
}
So when I click "submit" in my modal window a postback kicks, the value of the textbox is copied to the hidden control and I can read the value from the hidden control in code-behind:
Protected Sub BtnSubmit_Click(sender As Object, e As EventArgs) Handles BtnSubmit.Click
Dim Something As String = MyHiddenControl.Value
End Sub
I just had similar problem. I resolved this by moving the modal element inside the form element using jquery.
function init() {
var element = $('#myModal').detach();
$($("form")[0]).append(element);
}
window.addEventListener('DOMContentLoaded', init, false);
Use the dotnet text box, or add an id and a runat server tag to the input field.
Related
I am using ajax modal popup dialog to make users confirm their action. Since I have several scenarios where the user needs to confirm the action, I would like to re-use the same popup dialog, only changing which event is fired when the user click btnYes (confirming the action).
In code behind (VB) I assign the message for the popup:
lblMessageConfirm.Text = strMessage
Then, before opening the dialog, I would like to assign the event that btnYes will fire if the user clicks. I tried the methods below and none seems to work:
AddHandler btnYes.Click, AddressOf Test '(this event does not do anything)
And also
btnYes.Attributes.Add("onclick", "Test") '(this returns an error “Test is undefined”)
Test1 is the sub I want to assign to “Onclick” and it is in the code behind in the page where the popup is set up:
Protected Sub Test(sender As Object, e As EventArgs)
MsgBox("Test ")
End Sub
I open the dialog:
ModalPopupExtender2.Show()
Here is the html for the popup – it does show up, so the only problem is trying to assign onclick event. When I add the “onclick” in the HTML, the Test sub runs
<cc1:ConfirmButtonExtender ID="cbe" runat="server"
DisplayModalPopupID="ModalPopupExtender2" TargetControlID="lnkDummy">
</cc1:ConfirmButtonExtender>
<cc1:ModalPopupExtender ID="ModalPopupExtender2" runat="server"
PopupControlID="pnlPopup2"
TargetControlID="lnkDummy"
CancelControlID="btnNo" >
</cc1:ModalPopupExtender>
<asp:Panel ID="pnlPopup2" runat="server" CssClass="modalPopup"
Style="display: none">
<div class="ModalHeader" runat="server">
Please Confirm ...
</div>
<div class="ModalBody" runat="server">
<asp:Label ID="lblMessageConfirm" runat="server">
</asp:Label>
</div>
<div class="ModalFooter">
<asp:Button ID="btnYes " runat="server"
CSSClass="ModalButton" Text="OK" />
</div>
</asp:Panel>
With the following code Test runs:
<asp:Button ID="btnYes " runat="server" CSSClass="ModalButton" Text="OK"
onclick="Test"/>
I have this working with 2 Yes buttons and making the correct one visible based on the scenario, but adding more scenarios where the user needs to confirm will mean adding more buttons...
I have a div inside an UpdatePanel, this div is shown when a use click on an edit link. The submit buttons to save are inside this div. Now when the use click on the submit button everything is fine except that this div is automatically hidden! the visibility is changed client side using jQuery's show().
Why is the UpdatePanel hiding my div even though it was shown by me? I have tried to set the runat='server' and enableing viewstate but I am getting the same result.
How do I just tell the UpdatePanelto leave thediv` as it is prior to the submit?
Here is a mini project that shows the problem:
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
edit
</div>
<div id="edit-div" style="display:none; border: 2px black solid;">
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
<script>
$(document).ready(function(){
$('#edit-link').on('click', function () {
$('#edit-div').show();
});
});
</script>
The code for the submit button:
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = DateTime.UtcNow.ToString();
}
The simplest solution to this problem would be: -
don't use jQuery to show edit-div
make edit-div a server control
convert your edit to an <asp:LinkButton> control, and in its server-side click event, show your edit div
The problem is that the UpdatePanel is restoring the original state as per the markup for the page; edit-div is not a server control and you are showing it via client script, the UpdatePanel is unaware of this and will always return you the original markup.
There are ways to get jQuery to play nice with UpdatePanels in these scenarios, but it is more involved than the simple solution above.
Hope that helps.
My case is I have an asp.net page has a form
<form id="form1" runat="server" target="_blank">
and a button redirect to another page and this page will open in a new window because of the target attribute of the form .
<asp:Button ID="button1" runat="server" PostBackUrl="~/kindofpage.aspx" Text="Generate" />
and I have a dropdownlist has auto postback = true to post the past to fill another dropdownlist by selected data .
<asp:dropdownliast id="Make" name="Make" runat="server" autopostback="true"></asp:dropdownlist>
the question is : why when I select item from the auto postbacked dropdown an blank page opened ?
I need a way to post the page by the dropdownlist without openning a blank page ..
Thank you,
For lack of a better idea, you could just remove the target="_blank" attribute from your markup, and when your button is clicked, modify the form tag with JavaScript and set the attribute.
You can set the OnClientClick property and run JavaScript when it's clicked. For example:
<asp:Button ID="button1" OnClientClick="document.getElementById('form1').setAttribute('target', '_blank')" runat="server" PostBackUrl="~/kindofpage.aspx" Text="Generate" />
You could always just adjust your buttonpress code to open a new window such as this:
<asp:Button ID="myBtn" runat="server" Text="Click me"
onclick="myBtn_Click" OnClientClick="window.open('kindofpage.aspx', 'kindofpage');" />
then remove the:
target="_blank"
From the form tag.
I struggled with a similar situation but solved it in the following way.
As mentioned in this answer, you can use the OnClientClick property to set the target to "_blank". E.g.
<asp:Button ID="button1" OnClick="codebehind_method" OnClientClick="document.forms[0].target = '_blank';" runat="server" Text="targets new window" />
Then, in the aspx page that my "codebehind_method" function redirects to, I reset the target of the opener form like so:
<script type="text/javascript">
function resetTarget() {
opener.document.forms[0].target = '';
}
</script>
<body onload="resetTarget()">
Now, if you go back to your opener form and use a control that does not have the "OnClientClick" property set, the AutoPostBack should occur in the same tab.
If you want to find your form by ID, replace "document.forms[0]" with:
document.getElementByID('yourFormName')
<form id="form1" runat="server">
I have an update panel within a div that I modal using the JQuery plugin BlockUI. Inside the UpdatePanel is a textbox and a button. When I enter something in the textbox and click the button I am unable to retrieve the text in the textbox. When I debug it shows the textbox having no value.
<asp:UpdatePanel ID="upTest" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<div id="divTest">
<asp:TextBox ID="txtTestVS" runat="server" /><br />
<asp:Button ID="cmdTest" Text="TEST" OnClick="cmdTest_Click" UseSubmitBehavior="false" runat="server" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
SERVER-SIDE:
protected void cmdTest_Click(object sender, EventArgs e)
{
string x = txtTestVS.Text;
}
This should clarify things. Here are the total contents of the page.
SHOW MODAL
<div id="divTest">
<asp:UpdatePanel ID="upTest" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:TextBox ID="txtTestVS" runat="server" /><br />
<asp:Button ID="cmdTest" Text="TEST" OnClick="cmdTest_Click" UseSubmitBehavior="false" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
This is a common problem with dialog plug-ins. The problem is when content is put in the blockUI container, it's appended to the element, and no longer in the form being submitted to the server. To solve this you need to edit the blockUI code a bit:
Here's the source: http://github.com/malsup/blockui/blob/master/jquery.blockUI.js
Change this:
Line 262:
var layers = [lyr1,lyr2,lyr3], $par = full ? $('body') : $(el);
to:
var layers = [lyr1,lyr2,lyr3], $par = full ? $('form') : $(el);
and this:
Line 382:
els = $('body').children().filter('.blockUI').add('body > .blockUI');
to:
els = $('form').children().filter('.blockUI').add('form > .blockUI');
That should get you going and the textbox values coming through.
(Response courtesy of Nick Craver https://stackoverflow.com/users/13249/nick-craver)
If you are trying to use blockUI on a button within an update panel (i.e. you click the button within the update panel and the UI gets blocked), you need to handle it using PageRequestManager events
prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(function() {
$.blockUI({ message: '<img src="../../Content/images/Busy2.gif" />' });
});
prm.add_endRequest(function() {
$.unblockUI();
});
Or on a button click, if you want to display a modal window with this text box and a button, you can try something like this
Consider the following:
<form runat="server">
<div>
<asp:TextBox runat="server" ID="tb1" />
<asp:Button runat="server" ID="b1" OnClick="b1_Click" />
</div>
<div>
<asp:TextBox runat="server" ID="tb2" />
<asp:Button runat="server" ID="b2" OnClick="b2_Click" />
</div>
<div>
<asp:TextBox runat="server" ID="tb3" />
<asp:Button runat="server" ID="b3" OnClick="b3_Click" />
</div>
</form>
Each TextBox has an associated Button. I want to be able to switch the focus on each of these Button controls, so that when I place my cursor in the 2nd textbox (tb2) and press Enter, the associated button (b2) gets clicked and the associated OnClick event gets fired.
I've got a few ideas myself, but I'd like you guys' feedback/lessons-learned before I start potentially wasting time on implementing a broken solution.
NOTE:
Using the HTML fieldset element is not an option--Some of the interfaces are very complex.
There can be multiple inputs associated with one button.
You could trap the keydown event on the Textbox and then fire the button's callback javascript if it's the enter key. You can get the callback reference using ClientScriptManager.GetPostBackEventReference
Alternatively you could wrap every textbox in it's own Panel, which exposes a DefaultButton property.
Well you could do a nice simple route using jQuery if you are using it.
Simply doing the following might work nicely:
<script language="javascript" type="text/javascript">
jQuery(function(){
jQuery('input').keydown(function(e){
if (e.keyCode == 13) {
jQuery(this).next().trigger('click');
return false;
}
});
});
</script>
And then code side you would have the relevant event handler triggered, or just simply see which button was clicked by querying the sender object id