Execute server side code on ModalPopupExtender okcontrolid clicked - c#

I am using ASP.NET and C#. I want to popup this little screen, then when the OK button is clicked, I want to update the main screen based on the input to the popup. Sounds like it should be a regular thing. Is it possible, and if so, how?
<cc1:modalpopupextender id="ModalPopupExtender1" runat="server"
cancelcontrolid="btnCancel" okcontrolid="btnOkay"
targetcontrolid="txtCosCodeExpCode" popupcontrolid="Panel1"
popupdraghandlecontrolid="PopupHeader" drag="true"
backgroundcssclass="ModalPopupBG">
</cc1:modalpopupextender>
<asp:panel id="Panel1" style="display: none" runat="server">
<div class="CostCentreExpenseCodePopup" style="background-color:White ; border-style :solid;">
<div class="PopupHeader" id="PopupHeader">Select Cost Centre / Expense Code</div>
<div class="PopupBody">
<p>Cost Centre<asp:DropDownList
ID="ddlCostCentres1"
runat="server"
CssClass="SVSComboBox1"
AppendDataBoundItems ="True"
AutoPostBack="True"
style = "width :152px;"
OnSelectedIndexChanged="ddlCostCentres1_SelectedIndexChanged">
<asp:ListItem Text="Please select" Value="0"></asp:ListItem>
</asp:DropDownList></p>
<p>Expense Code <asp:DropDownList ID="ddlExpCode1" runat="server" CssClass="SVSComboBox1" style = "width :152px;"
AppendDataBoundItems ="True" Enabled="False" Visible ="False">
<asp:ListItem Text="Please select" Value="0"></asp:ListItem>
</asp:DropDownList></p>
</div>
<div class="Controls">
<input id="btnOkay" type="button" value="Done" />
<input id="btnCancel" type="button" value="Cancel" />
</div>
</div>

Don't set OkControlID but use ModalPopupExtender1.Hide() on server-side. Then you're able to call your update-code first.
You should also use server-buttons instead of <input id="btnOkay" type="button" value="Done" /> and handle their click-event.

First of all add the asp:Button as an Ok button and add click event in your aspx.cs page as mentioned below:
ASPX:
<asp:Button runat="server" ID="btnOkay" Text="OK" OnClick="btnOkay_Click"/>
ASPX.cs
protected void btnOkay_Click(object sender, EventArgs e)
{
// Code to write on ok click event
}
And then remove okcontrolid="btnOkay" from your modal popup extender.

Related

Stop page refresh after button click

It is not a repeat post, I have already checked all the answers present on net and nothing is working for me so i'm posting this here.
Please find the code.
<form runat="server">
<div class="card">
<ul class="nav nav-tabs Main-Menu" role="tablist">
<li role="presentation" class="active">Check Box - Enabled</li>
<li role="presentation">Check Box - Disabled</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="Enabled">
<asp:CheckBoxList runat="server" ID="CheckBoxEnabled" RepeatDirection="Horizontal">
<asp:ListItem Text="Selenium IDE"></asp:ListItem>
<asp:ListItem Text="Selenium RC"></asp:ListItem>
</asp:CheckBoxList>
<asp:Button runat="server" Text="Submit" CssClass="btn btn-success Elements-Text" OnClick="btnEnabled_Click" />
<asp:Label runat="server" ID="lblEnabled" CssClass="label success"></asp:Label>
</div>
<div role="tabpanel" class="tab-pane" id="Disabled">
<asp:CheckBoxList runat="server" ID="CheckBoxDisbled" RepeatDirection="Horizontal" CellPadding="5" CellSpacing="5" CssClass="element form-control">
<asp:ListItem Text="Selenium IDE"></asp:ListItem>
<asp:ListItem Text="Selenium RC" Enabled="false"></asp:ListItem>
<asp:ListItem Text="Selenium WebDriver"></asp:ListItem>
<asp:ListItem Text="Selenium Grid" Enabled="false"></asp:ListItem>
</asp:CheckBoxList>
<asp:Button runat="server" ID="btnDisabled" Text="Submit" CssClass="element btn btn-success" OnClick="btnDisabled_Click" />
<asp:Label runat="server" ID="lblDisabled" CssClass="label success"></asp:Label>
</div>
</div>
</div>
</form>
I'm having 2 tabs in my page, when i'm on the second tab, select one checkbox and click on the button with #btnDisabled the page gets postback and navigates to the first tab. I want this to stop.
I have already tried,
1. AutoPostBack = false
2. onClick = "return false;"
but not able to solve the issues.
Any help will be appreciated. :)
You can save the index of active panel in a hidden control and use it after post back.
<input type="hidden" runat="server" id="tabIndex" value="0" />
I do not know how you switch between your tabs, but on each tab change you must save it's index in hidden field(by javascript). For example if you select the second tab, value of hidden field must change to 1.
Finally add this script after all of your tabs.
var tabIndex = $('#tabIndex').val();
$('.tab-pane').removeClass('active');
$('.tab-pane').eq(tabIndex).addClass('active');
You want to do btnDisabled_Click, but not refresh the whole page.
You need Ajax controls around the button or anything needs to be updated. Check the tool list to find it.
( Firstly download and install AjaxControlToolkit if you haven't.)

Multiple buttons in update panel

Will something like this work? If it does, how do I determine which button was clicked on post?
<asp:UpdatePanel ID="MainUpdatePanel" runat="server"><ContentTemplate><div class="home_c" id="home_c2">
<div class="home-tabs">
<asp:Button CssClass="home_tab" ClientIDMode="static" Text="Cures" ID="cures_btn" runat="server" />
<asp:Button CssClass="home_tab" ClientIDMode="static" Text="Conditions" ID="conditions_btn" runat="server" />
<asp:Button CssClass="home_tab" ClientIDMode="static" Text="Recent" ID="recent_btn" runat="server" />
<asp:Button CssClass="home_tab" ClientIDMode="static" Text="Uncured" ID="uncured_btn" runat="server" />
</div>
<div class="home-search">
</div>
</div>
</ContentTemplate></asp:UpdatePanel>
Yes it will work. Just add OnClick events for each and have your click events defined in your code behind to handle them. Simple as that. :)
E.g.
<asp:Button CssClass="home_tab" ClientIDMode="static" Text="Cures" ID="cures_btn" runat="server" OnClick="cures_btn_Click" />
And in your code behind
protected void cures_btn_Click(object sender, EventArgs e)
{
// Some code
}

how i can use two form in one page?

<div id="formContainer">
<form id="login" runat="server">
Forgot?
<asp:TextBox ID="loginEmail" Text="Email" runat="server"></asp:TextBox>
<asp:TextBox ID="loginPass" TextMode="Password" runat="server" value="pass"></asp:TextBox>
<asp:Button ID="btnLogin" runat="server" Text="Login" OnClick="btnLogin_Click" />
</form>
<form id="recover" method="post" action="./">
Forgot?
<input type="text" name="recoverEmail" id="recoverEmail" value="Email" />
<input type="submit" name="submit" value="Recover" />
<%-- <asp:Button ID="btnrecover" runat="server" Text="Recover" OnClick="btnrecover_Click" />--%>
</form>
</div>
This is my code and I need to write a code on recover button.
But error came that is only one form is used.
Can anyone help to solve this error?
I want to write code on both buttons to submit and recover.
Thanks.
You can use Panel control instead of form ,
<div id="formContainer">
<asp:Panel runat="server" ID="pTest" DefaultButton="btnLogin">
Forgot?
<asp:TextBox ID="loginEmail" Text="Email" runat="server"></asp:TextBox>
<asp:TextBox ID="loginPass" TextMode="Password" runat="server" value="pass"></asp:TextBox>
<asp:Button ID="btnLogin" runat="server" Text="Login" />
</asp:Panel>
<asp:Panel runat="server" ID="Panel1" DefaultButton="btnrecover">
Forgot?
<input type="text" name="recoverEmail" id="recoverEmail" value="Email" />
<input type="submit" name="submit" value="Recover" />
<asp:Button ID="btnrecover" runat="server" Text="Recover" />
</asp:Panel>
</div>
You can also reference this link !
There is another way, you can extend your first form to Control, then you can see it on your Toolbox. Then just drag it to your second Form.

Make User Control Button as default on Enter key press [duplicate]

I am trying set a button on a user control as defaultbutton on a page but its not working. Here is the code for my user control
<asp:Panel ID="pnlTopicPicker" runat="server" DefaultButton="btnSubmit">
<div class="PadBottom">
<div id="divTopic" class="FloatLeft PadDiv">
<div class="SectionHeader FloatLeft PadRightMediumSmall">Topic:</div>
<asp:DropDownList ID="ddlSelectedTopic" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlSelectedTopic_OnSelectedIndexChanged" >
</asp:DropDownList>
</div>
<div class="FloatLeft PadLeftMediumSmall">
<asp:Button ID="btnClear" runat="server" Text="Clear" OnClick="btnClear_Click" CssClass="DefaultButton" />
</div>
<div class="FloatRight PadRightMediumSmall">
<asp:Button ID="btnSubmit" runat="server" Text="View Report" OnClick="btnSubmit_Click" OnClientClick="return ViewReportSubmit(event);" CssClass="DefaultButton" />
</div>
</div>
</asp:Panel>
I am using the above control : TopicPicker in a page:
<asp:UpdatePanel ID="pnlFind" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div class="PadLeft">
<Incapnet:TopicPicker ID="incTopicPicker" runat="server" OnClearClick="btnClear_Click" OnSubmitClick="btnSubmit_Click" OnSelectedTopicChanged="ddlSelectedTopic_Changed" />
</div>
<div class="ClearBoth" />
<div class="PadTop PadLeft" >
<asp:GridView ID="gvFindGrid" runat="server" AutoGenerateColumns="False" OnRowDataBound="gvFindGrid_RowDataBound"
CssClass="ContrastTable UFWideTable" GridLines="None">
<AlternatingRowStyle CssClass="AlternateRow" />
<RowStyle CssClass="Row" />
<HeaderStyle CssClass="HeaderRow" />
<EmptyDataTemplate>
No Records Found
</EmptyDataTemplate>
<Columns>
...
...
</ContentTemplate>
</asp:UpdatePanel>
Now when I hit enter, on the page, I want the "btnSubmit" to be executed, which is not happening.
How do I get this working.
Thanks,
under what circumstances are you expecting the btnSubmit Click event to fire?
I ask because the event will only be triggered if the Enter key is pressed when a control which implements the IButtonControl interface has focus.
This would include (among others) TextBox and DropDownList.
If you select your DropDownList and then hit enter it should fire the event. But just clicking any element (such as a DIV) and hitting enter would not.
Edit (Based on comment)
Its a bit of a hack but you can achieve what you ask using the following javascript (uses JQuery):
<script type="text/javascript">
$(document).keypress(function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 13) {
$('#<%= btnSubmit.ClientID %>').click();
}
});
</script>
Try adding the following to the button:
<asp:Button ID="Button1" runat="sever" UseSubmitBehavior="true" ... >
If that doesn't help, try adding this to your markup (for IE):
<!-- Fix for IE bug submit on pressing "Enter" -->
<div style="display:none">
<input type="text" name="hiddenText"/>
</div>
this.Page.Form.DefaultButton = this.btnLogin.UniqueID;

very simple c# submit button

I have several ImageButtons on the top of my page, then I have a textbox and button in the middle. If you type in the textbox then hit enter on the keyboard the browser follows the link of the first ImageButton instead of the submit button next to the textbox. I have ran into this in the pase and had to put the imagebuttons on the bottom of the page for it to work correctly, that is not an ok fix in this case. I tried setting UseSubmitBehavior="true" , but that does nothing. I tried putting the textbox and button in a separate DIV and a separate panel, didn't work either
TOP of the page
<div style="position:absolute; left: 70% ; top: 5%;">
<asp:ImageButton ID="imgFB" runat="server" ImageUrl="Images/facebook_icon.jpg" PostBackUrl="http://www.facebook.com/832586561" />
<asp:ImageButton ID="imgLI" runat="server" ImageUrl="Images/linkedin_logo.jpg" PostBackUrl="http://www.linkedin.com/pub/scott-selby/33/304/44a" />
<asp:ImageButton ID="imgCB" runat="server" ImageUrl="Images/careerbuilder_logo.jpg" PostBackUrl="http://www.careerbuilder.com" />
<asp:ImageButton ID="imgCP" runat="server" ImageUrl="Images/codeplex_logo.jpg" PostBackUrl="http://www.codeplex.com" />
</div>
Middle of Page
<div ID="formPanel" runat="server" style="position:absolute; top:235px;">
<asp:TextBox ID="txtNewCity" runat="server"></asp:TextBox>
<asp:Button ID="btnChangeCity" runat="server" Text="Change City" UseSubmitBehavior="true" />
</div>
You may set the default button via <form/> attribute.
<form defaultbutton="btnChangeCity" id="form1" runat="server">
...
</form>
Or use Panel control to set default button.
<asp:Panel ID="Panel1" runat="server" DefaultButton="btnChangeCity">
<asp:TextBox ID="txtNewCity" runat="server"></asp:TextBox>
<asp:Button ID="btnChangeCity" runat="server" Text="Change City" />
</asp:Panel>
You surround your controls with <div> which is a good idea, but to have it run at all you also need <form>. In case you just didn't include it, the submit button also has to have OnClick="sub" attribute.
Read more here.

Categories