Stop page refresh after button click - c#

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.)

Related

How to retain Textbox values after a Postback?

I have few Textbox, FileUpload and button controls within the same page. I had tried enabling the EnableViewState to True but it is still not working. The Textbox will lose its value when clicking the button to upload attachments. May I know what's wrong here, should I use ViewState to retain the values of the textboxes?
<div class="form-row">
<div class="form-group col-md-6" >
<asp:Label ID="lblConfiguration" runat="server" Text="Configuration*"></asp:Label>
<asp:TextBox ID="txtConfiguration" runat="server" type="text" class="form-control" EnableViewState="true" ViewStateMode="Enabled" ></asp:TextBox>
</div>
<div class="form-group col-md-12">
<div class="col-md-6">
<asp:FileUpload ID="fuUpload" runat="server" CssClass="nv-file-select uploader" multiple="true" />
<br />
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" CssClass="btn btn-secondary" />
</div>
</div>
Possible reasons
1) You have disable the Viewstate on full page - Check on top of aspx page if its enable or not
<%# Control Language="C#" AutoEventWireup="true" CodeFile="FileName.ascx.cs" EnableViewState="true" %>
2) At some point on code behind you change the value on post back - so check to not change it by adding this check
if (!Page.IsPostBack)
{
TextBox.Text = "";
}
3) For some reason after your post back you do redirect on same page.
4) For some reason you do not make post back, but reload

Execute server side code on ModalPopupExtender okcontrolid clicked

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.

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.

check Validation of a cotrol from code behind - causing to show Validator Text

hi my dear friends :
i have a button with CausesValidation Property to false...
it's code like below :
<telerik:RadButton ID="RadbtnViewImage" runat="server" Text="view" CausesValidation="False" EnableEmbeddedSkins="False" Skin="BlackByMe" Font-Names="Tahoma" Width="80px" onclick="RadbtnViewImage_Click">
</telerik:RadButton>
also i have a RadComboBox with a CostumValidator that is in relationship with that RadComboBox...
it's code like below :
<div class="EditRow">
<div class="RightEditColumn">
imageGroupName
</div>
<div class="LeftEditColumn">
<telerik:RadComboBox ID="RadcbImageGroupInrpvEdit" runat="server" DataSourceID="sdsImagesGroup"
DataTextField="Title" DataValueField="ID" EnableEmbeddedSkins="False" Skin="BlackByMe2"
AppendDataBoundItems="True" MarkFirstMatch="True" LoadingMessage="loading...."
CausesValidation="False" ValidationGroup="B">
<Items>
<telerik:RadComboBoxItem runat="server" Text="plz select one" Value="0" />
</Items>
</telerik:RadComboBox>
</div>
<div class="ValDivInrpvEdit">
<div style="display: inline;">
<span id="spnOfcvImageGroupInrpvEdit" class="ttTarget">
<asp:CustomValidator ID="cvImageGroupInrpvEdit" runat="server" ControlToValidate="RadcbImageGroupInrpvEdit"
Display="Dynamic" ValidationGroup="B"
onservervalidate="cvImageGroupInrpvEdit_ServerValidate">
<span class="imgValContainerInrpvEdit">
<asp:Image ID="img4cvImageGroupInrpvEdit" CssClass="imgValidateInrpvEdit" runat="server" AlternateText="attention"
ImageUrl="~/Images/Exclamation.png" /></span>
</asp:CustomValidator>
</span>
<div id="tt44cvImageGroupInrpvEdit" class="ttContent">
plz choose
</div>
</div>
</div>
</div>
when the button is clicked i just want to check only that RadCombobox Validation and show the CustomValidator Text of it to users / not the other validators !
how can i do that ?
(the other controls In my page plus that RadComboBox have a same ValidationGroup -> Mean "B")
thanks in advance
Attach a second validator for this scenario with its own distinct validation group. This way, you can fire this one validator for this specific scenario, and use the original validator to validate when the entire form is processed. Depending on how you need to validate, you can use Required (set InitialValue to the initial value of the combo), or Custom.
HTH.

Categories