I have a form where the user enters in details like name, address etc. And I am using a DropDownList for the Countries. When a country is selected, it populates the counties dropdownlist. The problem is using AutoPostBack="true" is causing the page to refresh. But without it the counties dropdownlist won't populate.
<asp:DropDownList runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlCountry_Click" ID="ddlCountry" Width="80px"></asp:DropDownList>
code for function:
protected void ddlCountry_Click(object sender, EventArgs e)
{
if (int.Parse(ddlCountry.SelectedValue) > 0)
{
LoadCounties(int.Parse(ddlCountry.SelectedValue));
}
else
{
DisplayMsg("Please select a valid country!");
}
}
Is there a way to stop the whole page refreshing, but still populate the counties after a country is selected?
Try jquery ajax or this
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:DropDownList ID="DropDownList_1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList_1_SelectedIndexChanged" DataSource ID="businessgroup" DataTextField="BusinessGroupName" DataValueField="Id"></asp:DropDownList>
<asp:DropDownList ID="DropDownList_2" runat="server" ></asp:DropDownList>
</ContentTemplate>
</asp:UpdatePanel>
Related
Is it possible to open tabs of Ajax Tab Container using query string.
Something like when the query string is
localhost:81/dashboard.aspx?tab=0
localhost:81/dashboard.aspx?tab=1
localhost:81/dashboard.aspx?tab=3
My Code is
<ajax:TabContainer ID="TabContainer2" runat="server" CssClass="MyTabStyle">
<ajax:TabPanel ID="TabPanel2" runat="server" TabIndex="0">
<headertemplate>
Overview
</headertemplate>
<contenttemplate>
</contenttemplate>
</ajax:TabPanel>
<ajax:TabPanel ID="tbpnluser1" runat="server" TabIndex="1">
<headertemplate>
Overview
</headertemplate>
<contenttemplate>
</contenttemplate>
</ajax:TabPanel>
</ajax:TabContainer>
Please help
YES there is property called ActiveTabIndex
by using it you can show the tab you want in server-side
in server-side
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
if(Request.QuerryString["tab"]==1)
{
tabcantainerID.ActiveTabIndex =1
}
.....
}
}
hope this will help you
I'm using a drop down list to select the customer. The page flicker twice on selecting the customer and I don't know how to rectify it. Can someone please help me solve the problem?
My Drop Down SelectedIndexChange Code
protected void ReceiverDropDown_SelectedIndexChanged(object sender, EventArgs e)
{
if (ReceiverDropDown.SelectedValue != null && ReceiverDropDown.SelectedValue != "0")
{
string benId = ReceiverDropDown.SelectedValue;
Page.ClientScript.RegisterStartupScript(this.GetType(), "alert", "AddDetails('" + benId + "');", true);
}
}
Code using Update Panel
<td>
<asp:UpdatePanel runat="server" ID="updTerms" UpdateMode="Conditional">
<ContentTemplate>
<asp:DropDownList Width="180px" CssClass="select_quo_one" ID="ReceiverDropDown"
runat="server" AutoPostBack="true"
OnSelectedIndexChanged="ReceiverDropDown_SelectedIndexChanged">
</asp:DropDownList>
</ContentTemplate>
</asp:UpdatePanel>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ReceiverDropDown" />
</Triggers>
</td>
To avoid page flickering you can make use of update panel. Bind the DropDownList inside update panel.
Markup:
<asp:UpdatePanel runat="server" ID="updTerms">
<ContentTemplate>
<asp:DropDownList ID="ReceiverDropDown" runat="server">
</asp:DropDownList>
</ContentTemplate>
<Trigger>
<asp:AsyncPostBackTrigger ControlID="ReceiverDropDown" />
</Trigger>
</asp:UpdatePanel>
Use update field like:
<asp:UpdatePanel ID="updpnlRefresh" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:TextBox ID="txtQuantity" runat="server" Width="50px"
onkeydown="ClearErrorMessages()" onkeypress="return allowNumeric(event)"
ontextchanged="txtQuantity_TextChanged" Text='<%#Eval("Quantity") %>'
AutoPostBack = "true" ondragstart="return false;"
ondrop="return false;" />
</ContentTemplate>
</asp:UpdatePanel>
I have an issue due to UpdatePanel. I am assigning windows timeout from code behind(snippet is on page load). The time is assigned correctly for the first time. But when I change dropdownlist or some other controls which cause page load, the time is not assigned. But I want the session time to be reset whenever pageload occurs.
<script language="javascript" type="text/javascript">
alert(<%=mintTimeout%>);
window.setTimeout("endSession();",<%=mintTimeout%>);
function endSession()
{
alert("Your session has expired. You will be redirected to the login page.");
}
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true">
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="true">
<asp:ListItem>a</asp:ListItem>
<asp:ListItem>b</asp:ListItem>
<asp:ListItem>c</asp:ListItem>
</asp:DropDownList>
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
and my code behind is
public int mintTimeout = 0;
protected void Page_Load(object sender, EventArgs e)
{
Session.Timeout = 1;
mintTimeout = (Session.Timeout) * 60000;
}
protected void Button1_Click(object sender, EventArgs e)
{
}
Please help me to get through this?
You need to clear and reassign timeout on each postback. You can use pageLoad function for this. Change your script as below:
var sessionExpiredTimeout = null;
function pageLoad() {
if(sessionExpiredTimeout){
clearTimeout(sessionExpiredTimeout);
}
sessionExpiredTimeout = setTimeout(endSession, <%= mintTimeout %> );
}
function endSession() {
alert("Your session has expired. You will be redirected to the login page.");
}
Using: .NET 3.5SP1, VS2008
I was editting someone else asp.net script, he did the Data retreving at the Page_Load while Page is not postback.
I could see the data was populated into the DropDownList properly even after I refresh, navigates, postback in the page.
I added couples more DropDownList and some CheckBoxes into the script, only the DropDownList I added got populated properly. But not the CheckBox.
So I do a test in a new project, which is similar to its script structure:
ASPX:
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true">
<asp:ListItem>Item1</asp:ListItem>
<asp:ListItem>Item2</asp:ListItem>
</asp:DropDownList>
<%
if (DropDownList1.SelectedValue == "Item2")
{
%>
<asp:CheckBox ID="CheckBox1" runat="server" Text="CheckBox 1" />
<asp:TextBox ID="TextBox1" runat="server" Text="" />
<asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="true">
<asp:ListItem>Item1</asp:ListItem>
<asp:ListItem>Item2</asp:ListItem>
</asp:DropDownList>
<%
}
%>
</div>
</form>
Code-Behind:
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
this.CheckBox1.Checked = true;
this.CheckBox1.Text = "Hello CheckBox";
this.TextBox1.Text = "Hello TextBox";
this.DropDownList2.SelectedValue = "Item2";
}
}
}
So as you see the code, when the page first load, the CheckBox1's text will change, Checked will be true, so as other TextBox and DropDownList2
After I select DropDownList1's item to Item2, when the CheckBox1, TextBox1, DropDownList2 nothing got setted, except the CheckBox1.Text.
Why is this happen?
EDIT:
I tried to put them into Panel, in this way it work. But the problem is the program I am editting is using the format above.. So I am not allow to change them all to Panel.
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true">
<asp:ListItem>Item1</asp:ListItem>
<asp:ListItem>Item2</asp:ListItem>
</asp:DropDownList>
<%
if (DropDownList1.SelectedValue == "Item2")
{
this.MyPanel.Visible = true;
}
else
{
this.MyPanel.Visible = false;
}
%>
<asp:Panel ID="MyPanel" runat="server" Visible="false" >
<asp:CheckBox ID="CheckBox1" runat="server" Text="CheckBox 1" />
<asp:TextBox ID="TextBox1" runat="server" Text="" />
<asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="true">
<asp:ListItem>Item1</asp:ListItem>
<asp:ListItem>Item2</asp:ListItem>
</asp:DropDownList>
</asp:Panel>
</div>
</form>
Try out setting EnableViewState and ViewStateMode, perhaps some of the parent controls has disabled it so default Inherit value has been applied.
MSDN:
The default value of the ViewStateMode property for a Web server
control in a page is Inherit. As a result, if you do not set this
property at either the page or the control level, the value of the
EnableViewState property determines view-state behavior.
<asp:CheckBox ID="CheckBox1" runat="server" Text="CheckBox 1"
EnableViewState="true"
ViewStateMode="Enabled" />
This is my situation:
Page:
<asp:UpdatePanel ID="updatePanel1" runat="server" ChildrenAsTriggers="true">
<ContentTemplate>
...
<uc:ChildControl ID="ucChild" runat="server" />
...
</ContentTemplate>
</asp:UpdatePanel>
ChildControl:
...
<asp:DropDownList id="dropDown1" runat="server" />
...
I want to update the UpdatePanel (asynchronously) in the Page when the selection of the DropDownList in the ChildControl changes. I tried AutoPostBack="true", but this always leads to a full PostBack of the Page (see this question).
I tried to use
<Triggers>
<asp:AsyncPostBackTrigger ControlID="???" EventName="SelectedIndexChanged" />
</Triggers>
but neither "dropDown1" nor "ucChild.dropDown1" worked as values for ControlID.
I also tried to pass a reference of the UpdatePanel to the ChildControl and add a Trigger in the following way:
protected override void OnPreRender(EventArgs e)
{
if (ParentUpdatePanel != null)
{
AsyncPostBackTrigger trigger = new AsyncPostBackTrigger();
trigger.ControlID = dropDown1.ID;
trigger.EventName = "SelectedIndexChanged";
ParentUpdatePanel.Triggers.Add(trigger);
}
base.OnPreRender(e);
}
(also tried with dropDown1.ChildID)
But I am still unable to get the UpdatePanel to trigger when the value in the Dropdown changes. The problem seems to be that the UpdatePanel cannot see the Control in the ChildControl and therefore is unable to set the Trigger accordingly.
How can I do it?
Maybe with a trick putting this code on dropdown list.
dropDown1.Attributes["onchange"] =
Page.ClientScript.GetPostBackEventReference(ParentUpdatePanel, "") + "; return false;";
When you change the drop down list you send an update event to UpdatePanel using direct javascript call.
Setting AutoPostBack=True on the Drop Down List control should not refresh the entire page if it is in an update panel.
I created a simple example:
default.aspx:
<form id="form1" runat="server">
<div>
<asp:ScriptManager runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="up" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional">
<ContentTemplate>
<uc:UserControl ID="ucChild" runat="Server"></uc:UserControl>
<asp:Label ID="lbl" runat="server"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
default.aspx.cs (code behind):
public partial class _default : System.Web.UI.Page {
protected void Page_Load(object sender, EventArgs e) {
lbl.Text = ucChild.value;
}
}
UserControl.ascx:
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="UserControl.ascx.cs" Inherits="somenamespace.UserControl" %>
<asp:DropDownList runat="server" ID="ddl" AutoPostBack="true">
<asp:ListItem Text="1" Value="1"></asp:ListItem>
<asp:ListItem Text="2" Value="2"></asp:ListItem>
</asp:DropDownList>
UserControl.ascx.cs (code behind):
public partial class UserControl : System.Web.UI.UserControl {
public string value {
get { return ddl.SelectedValue.ToString(); }
}
}
When I change the dropdownlist, the label is updated without a full post back.