Develop Reference

How to change color of link button after postback in asp.net

I'm new to C# and I'm running into the following issues. When I click on the link button(for pagination), it will go to the code behind the page using postback. But the postback will refresh the background color of the button I set on CSS, how should I do?
I used the ViewState but it still doesn't work.
What I originally wanted was that when the user presses the paging number, the paging number will display a different color, so that the user can tell which button they are pressing.
Like, when the user press 2, the page will show page 2's details using postback and the paging number at button will show
1 2 3 4
Here is my code:
<asp:Repeater ID="rptPaging" runat="server" OnItemCommand="rptPaging_ItemCommand" >
<ItemTemplate>
<asp:LinkButton ID="lnkPage"
Style="padding: 8px; margin: 2px; background: lightgray; border: solid 1px #666;font-weight: bold;"
CommandName="Page" CommandArgument="<%# Container.DataItem %>" runat="server" CssClass="listbtn"
ForeColor="Black" Font-Bold="True"><%# Container.DataItem %>
</asp:LinkButton>
</ItemTemplate>
</asp:Repeater>
this is the code behind,
public int PageNumber
{
get
{
if (ViewState["PageNumber"] != null)
{
return Convert.ToInt32(ViewState["PageNumber"]);
}
else
{
return 0;
}
}
set { ViewState["PageNumber"] = value; }
}
private int iPageSize = 100;
private void BindRepeater(DataTable dt)
{
//Finally, set the datasource of the repeater
PagedDataSource pdsData = new PagedDataSource();
DataView dv = new DataView(dt);
pdsData.DataSource = dv;
pdsData.AllowPaging = true;
pdsData.PageSize = iPageSize;
if (ViewState["PageNumber"] != null)
pdsData.CurrentPageIndex = Convert.ToInt32(ViewState["PageNumber"]);
else
pdsData.CurrentPageIndex = 0;
if (pdsData.PageCount > 1)
{
rptPaging.Visible = true;
ArrayList alPages = new ArrayList();
for (int i = 1; i <= pdsData.PageCount; i++)
alPages.Add((i).ToString());
rptPaging.DataSource = alPages;
rptPaging.DataBind();
}
else
{
rptPaging.Visible = false;
}
rptTxnHist.DataSource = pdsData;
rptTxnHist.DataBind();
}
protected void rptPaging_ItemCommand(object source, System.Web.UI.WebControls.RepeaterCommandEventArgs e)
{
string sDateFr = datepicker.Value;
string sDateTo = datepicker2.Value;
PageNumber = Convert.ToInt32(e.CommandArgument) - 1;
//ViewState["PageNumber"] = Convert.ToInt32(e.CommandArgument);
LoadUI(PageNumber, "NAME", sDateFr, sDateTo);
}
css code:
a:hover, a:focus{
color:white;
background-color:black;
}

Now, I read the question to be about a data pager.
But, the goal seems to be just to change the style of a button in the repeater once clicked.
So, assume this repeater:
<style>
.mylinkbtn {
padding: 8px;
margin: 2px;
background: lightgray;
border: solid 1px #666;
font-weight: bold;
}
</style>
<div style="padding:35px;width:25%">
<asp:Repeater ID="rptPaging" runat="server" >
<ItemTemplate>
<div style="text-align:right">
<asp:Label ID="lblH" runat="server" Font-Size="14"
Text= "View Hotel Name ">
</asp:Label>
<asp:Label ID="lblHotel" runat="server" Font-Size="14"
Text='<%# Eval("HotelName") %>' >
</asp:Label>
<asp:LinkButton ID="lnkPage" CssClass="mylinkbtn"
runat="server" Text="View"
ForeColor="Black" Font-Bold="True"
OnClick="lnkPage_Click" >
</asp:LinkButton>
<br />
<br />
</div>
</ItemTemplate>
</asp:Repeater>
This code to load:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
LoadData();
}
void LoadData()
{
DataTable rstOptions =
MyRst("SELECT ID, HotelName FROM tblHotelsA ORDER BY HotelName");
rptPaging.DataSource = rstOptions;
rptPaging.DataBind();
}
DataTable MyRst(string strSQL)
{
DataTable rstData = new DataTable();
using (SqlConnection conn = new SqlConnection(Properties.Settings.Default.TEST4))
{
using (SqlCommand cmdSQL = new SqlCommand(strSQL, conn))
{
cmdSQL.Connection.Open();
rstData.Load(cmdSQL.ExecuteReader());
}
}
return rstData;
}
REMEMBER!!!! - ONLY re-bind the grid ONE time (!IsPostBack). If you leave that bit out, then you are re-binding the repeater and will LOSE your button change of style.
But, a simple post-back WILL NOT re-set the style(s) to apply to any repeated control(s) in the repeater.
So, we get this:
Now, our button click code. I really DO NOT LIKE the command and button event model for a gridview, listview, repeater etc.
I just drop in a plane jane button, or whatever. Just in the markup type in onclick= (and then space bar - you are promped to create a event click for that button (or any other event). That way you don't have to mess around with row command.
Hence this code:
protected void lnkPage_Click(object sender, EventArgs e)
{
LinkButton btn = (LinkButton)sender;
RepeaterItem rRow = (RepeaterItem)btn.NamingContainer;
int MyRowIndex = rRow.ItemIndex;
Debug.Print("row index = " + MyRowIndex);
// get hotel name value
Label lblHotel = (Label)rRow.FindControl("lblHotel");
Debug.Print("Row click hotel = " + lblHotel.Text);
// change button class to show it was clicked
btn.CssClass = "btn btn-info";
}
So, for each button I click on, we see this:
And the output window of the clicks shows this:
So any style you apply to controls - including that link button will work, and CAN survive a post-back. But, your standard page load event NEAR ALWAYS has to be placed inside of a !IsPostBack stub (last 100+ web pages have such a code stub). In other words, if you re-bind the repeater, then yes of course it will re-plot, re-load, and you lose the style buttons or any other style you applied.
However, since your page !IsPostBack stub on runs on the REAL first page load, then such style settings for buttons controls etc. will persist, and they have automatic view state preserved for you.
So, either you not setting the style to the given row in the repeater, or your page load event is re-binding and re-loading the repeater which of course will blow out and re-set your buttons.
But, for Gridview, repeater, Listview and more such data bound controls? The state of such controls and buttons should persist, assuming you use the all important !IsPostBack code stub (which as I noted, quite much every single page you write will need if you loading up any data bound control(s)).
And as above shows, you are free to have other buttons and have as many post-backs as you wish - the style settings from code behind for those buttons will and should persist.

Strange conflict between get postback control and RegisterStartupScript

Please consider this scenario:
I have a simple page and I want to log all controls causing postback. I create this simple page. It contains a grid to show some URLs and when user click on an icon a new tab should open:
<form id="form1" runat="server">
<div>
<table style="width: 100%;">
<tr>
<td style="background-color: #b7ffbb; text-align: center;" colspan="2">
<asp:Button ID="Button3" runat="server" Text="Click Me First" Height="55px" OnClick="Button3_Click" />
</td>
</tr>
<tr>
<td style="background-color: #f1d8fe; text-align: center;" colspan="2">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" BackColor="White" OnRowCommand="GridView1_RowCommand">
<Columns>
<asp:BoundField DataField="SiteAddress" HeaderText="Address" />
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton ID="ImageButton1" ImageUrl="~/download.png" runat="server" CommandArgument='<%# Eval("SiteAddress") %>' CommandName="GoTo" Height="32px" Width="32px" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</td>
</tr>
</table>
</div>
</form>
and code behind:
public partial class WebForm2 : Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button3_Click(object sender, EventArgs e)
{
List<Address> Addresses = new List<Address>()
{
new Address(){ SiteAddress = "https://google.com" },
new Address(){ SiteAddress = "https://yahoo.com" },
new Address(){ SiteAddress = "https://stackoverflow.com" },
new Address(){ SiteAddress = "https://learn.microsoft.com/}" }
};
GridView1.DataSource = Addresses;
GridView1.DataBind();
}
protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
ScriptManager.RegisterStartupScript(this, this.GetType(), "MyScript", "window.open('" + e.CommandArgument.ToString() + "', '_blank')", true);
}
}
class Address
{
public string SiteAddress { get; set; }
}
every thing is fine till here. Now I create a base class for all of my pages and add below codes for finding postback control:
public class MyPageBaseClass : Page
{
protected override void OnInit(EventArgs e)
{
if (!IsPostBack)
{
}
else
{
var ControlId = GetPostBackControlName(); <------
//Log ControlId
}
base.OnInit(e);
}
private string GetPostBackControlName()
{
Control control = null;
string ctrlname = Page.Request.Params["__EVENTTARGET"];
if (ctrlname != null && ctrlname != String.Empty)
{
control = Page.FindControl(ctrlname);
}
else
{
foreach (string ctl in Page.Request.Form)
{
Control c;
if (ctl.EndsWith(".x") || ctl.EndsWith(".y"))
{
string ctrlStr = ctl.Substring(0, ctl.Length - 2);
c = Page.FindControl(ctrlStr);
}
else
{
c = Page.FindControl(ctl);
}
if (c is System.Web.UI.WebControls.Button ||
c is System.Web.UI.WebControls.ImageButton)
{
control = c;
break;
}
}
}
if (control != null)
return control.ID;
else
return string.Empty;
}
}
and change this line:
public partial class WebForm2 : MyPageBaseClass
Now when I click on icons grid view disappears...(STRANGE...) and nothing happened. When I comment specified line then every thing will be fine...(STRANGE...).
In GetPostBackControlName nothings changed to Request but I don't know why this happened. I checked and I see if I haven't RegisterStartupScript in click event every thing is fine. Please help we to solve this problem.
Thanks

when I click on icons grid view disappears...
ASP.Net page class object instances only live long enough to serve one HTTP request, and each HTTP request rebuilds the entire page by default.
Every time you do a postback, you have a new HTTP request and therefore a new page class object instance and a completely new HTML DOM in the browser. Any work you've done for a previous instance of the page class — such as bind a list of addresses to a grid — no longer exists.
You could fix this by also rebuilding your grid code on each postback, but what I'd really do is skip the whole "RegisterStartupScript" mess and instead make the grid links open the window directly, without a postback at all.

The problem is related to OnInit event. I replaced it with OnPreLoad and every things is fine now.
For search engines: OnInit event has conflict with RegisterStartupScript

Invalid postback or callback argument when navigating away from actively loading GridView

There are several posts on here with similar titles, but none that I have found actually exhibit the same behavior I'm seeing. I'm using buttons with MultiView as my navigation to give the appearance of tabs. The page loads, no problem. I can switch tabs, no problem. The issue I'm having occurs only when I press a different navigation button while a gridview is actively loading. If I wait for the gridview to fully load, I get no errors.
The full error I'm receiving is: Invalid postback or callback argument. Event validation is enabled using in configuration or <%# Page EnableEventValidation="true" %> in a page. For security purposes, this feature verifies that arguments to postback or callback events originate from the server control that originally rendered them. If the data is valid and expected, use the ClientScriptManager.RegisterForEventValidation method in order to register the postback or callback data for validation.
If I add the following, it does resolve my issue. However, I'm trying to avoid this if at all possible.
<%# Page ... EnableEventValidation = "false" />
default.aspx
<form id="form1" runat="server">
<table width="100%" align="center">
<tr style="background-color:#E9E9E9;">
<td>
<asp:Button Text="Tab1" BorderStyle="None" ID="Tab1Button" CssClass="Initial" runat="server"
OnClick="Tab1Button_Click" />
<asp:Button Text="Tab2" BorderStyle="None" ID="ConflictButton" CssClass="Initial" runat="server"
OnClick="ConflictButton_Click" />
<asp:Button Text="Tab3" BorderStyle="None" ID="Tab3Button" CssClass="Initial" runat="server"
OnClick="Tab3Button_Click" />
<asp:Button ID="AffiliateAddButton" runat="server" Text="Add" />
<asp:MultiView ID="MainView" runat="server">
<asp:View ID="View1" runat="server">
<table class="TabContent"><tr><td>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="true" DataSourceID="SqlDataSource1">
</asp:GridView>
</td></tr></table>
</asp:View>
<asp:View ID="View2" runat="server">
<table class="TabContent">
<tr>
<td>
View 2
</td>
</tr>
</table>
</asp:View>
<asp:View ID="View3" runat="server">
<table class="TabContent">
<tr>
<td>
View 3
</td>
</tr>
</table>
</asp:View>
</asp:MultiView>
</td>
</tr>
</table>
</form>
default.cs
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Tab1Button.CssClass = "Clicked";
MainView.ActiveViewIndex = 0;
LoadGrid();
}
}
protected override void Render(HtmlTextWriter writer)
{
// Register controls for event validation
foreach (Control c in this.Controls)
{
this.Page.ClientScript.RegisterForEventValidation(
c.UniqueID.ToString()
);
}
base.Render(writer);
}
private void LoadGrid()
{
SqlDataSource1.CancelSelectOnNullParameter = false;
GridView1.DataSourceID = null;
GridView1.DataSourceID = "SqlDataSource1";
GridView1.DataBind();
}
private void ButtonsControl(string tab)
{
if(tab == "Tab1")
{
AffiliateAddButton.Visible = true;
Tab1Button.CssClass = "Clicked";
ConflictButton.CssClass = "Initial";
Tab3Button.CssClass = "Initial";
LoadGrid();
}
if (tab == "Tab2")
{
AffiliateAddButton.Visible = false;
Tab1Button.CssClass = "Initial";
ConflictButton.CssClass = "Clicked";
Tab3Button.CssClass = "Initial";
GridView1.DataSourceID = null;
GridView1.DataBind();
}
if (tab == "Tab3")
{
AffiliateAddButton.Visible = false;
Tab1Button.CssClass = "Initial";
ConflictButton.CssClass = "Initial";
Tab3Button.CssClass = "Clicked";
GridView1.DataSourceID = null;
GridView1.DataBind();
}
}
protected void Tab1Button_Click(object sender, EventArgs e)
{
ButtonsControl("Tab1");
MainView.ActiveViewIndex = 0;
}
protected void ConflictButton_Click(object sender, EventArgs e)
{
ButtonsControl("Tab2");
MainView.ActiveViewIndex = 1;
}
protected void Tab3Button_Click(object sender, EventArgs e)
{
ButtonsControl("Tab3");
MainView.ActiveViewIndex = 2;
}

What I ended up doing was two things:
Added paging. Ideally I didn't want this in this specific scenario but limiting my page to 500 lines made it load fast enough to almost eliminate this.
Switched from multiview to frameset. Again, not an ideal option, but works in my given scenario.

How does my site know what button I clicked?

'
I have a problem with my site in ASP.NET. My applications contains a few buttons (imagebuttons) that are able to change. For example: When I press an empty button I want to be able to put a picture and a website in it. I've made this possible with a popupbox.
The problem where I'm running into:
When Im trying to give button 2 a image and a website, it gives button 1 a image and website because I told it in:
public partial class Ingelogd : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Image1_Click(object sender, ImageClickEventArgs e)
{
if (DropDown.SelectedItem.Value == "Youtube")
{
Btn_1.ImageUrl = "~/Images/Youtube.png";
Btn_1.PostBackUrl = ("http://www.youtube.com");
Btn_1.OnClientClick = "";
}
else
{
}
}
Now I actually want the same for Btn_2 , but then I have to write the exact same code but change Btn_1 to Btn_2. This is impossible to do because I want 19 website ( youtube but also facebook, twitter etc.) Im also going to have 19 buttons ( currently I only have Btn_1 and Btn_2). This would mean I have to make 19*19 = 361 pieces of code. I assume there is a way to make a sub program for this. My teacher also told me I could use cookies for the buttonclick, but I have no idea how to make a cookie with a Imagebutton.
What is the best solution to solve this problem?
I also have the ASP.NET Code here for you who wants to see that code aswell.
<title>Ingelogd</title>
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>
<style type="text/css">
#popupBoxOnePosition{
top: 0; left: 0; position: fixed; width: 100%; height: 120%;
background-color: rgba(0,0,0,0.7); display: none;
}
.popupBoxWrapper{
width: 550px; margin: 50px auto; text-align: left;
}
.popupBoxContent{
background-color: #FFF; padding: 15px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
Dit is de pagina als je ingelogd bent.
</div>
<div id="popupBoxOnePosition">
<div class="popupBoxWrapper">
<div class="popupBoxContent">
<h3>Instellingen</h3>
<p>Kies uit een van de volgende links.</p>
<asp:DropDownList ID="DropDown" runat="server">
<asp:ListItem >Select</asp:ListItem>
<asp:ListItem >Youtube</asp:ListItem>
<asp:ListItem >Facebook</asp:ListItem>
</asp:DropDownList>
<br />
<asp:ImageButton ID="Button1" runat="server"
OnClick="Image1_Click"/>
<br />
<asp:Button ID="Button_afsluiten" runat="server" Height="48px" OnClientClick="toggle_visibility('popupBoxOnePosition');return false;" Text="Afsluiten" />
</div>
</div>
</div>
<asp:ImageButton ID="Btn_1" runat="server" Height="48px" OnClientClick="toggle_visibility('popupBoxOnePosition');return false;"
ImageUrl="" />
<asp:ImageButton ID="Btn_2" runat="server" Height="48px" OnClientClick="toggle_visibility('popupBoxOnePosition');return false;"
ImageUrl="" />
</form>
</body>
</html>

You can try to add attributes to DropDownList and to use it. For example add two new attributes ImageUrl and SiteUrl. Your code should look:
protected void Image1_Click(object sender, ImageClickEventArgs e)
{
Btn_1.ImageUrl = DropDown.Attrubutes["ImageUrl"];
Btn_1.PostBackUrl = DropDown.Attrubutes["SiteUrl"];
Btn_1.OnClientClick = "";
}

I've never used asp, but most of those code is just plain c#, so I should be good.
Make 19 separate functions, one for each button, and dynamically add the Image and Url instead of using ifs:
protected void Image1_Click(object sender, ImageClickEventArgs e)
{
String val = DropDown.SelectedItem.Value;
Btn_1.ImageUrl = "~/Images/" + val + ".png";
Btn_1.PostBackUrl = "http://www." + val + ".com";
Btn_1.OnClientClick = "";
}
If you want 1 function for all buttons as well, you'll have to give all your buttons a Name and check the senders name inside the function.

How to open Telerik Rad Pop Up window Asynchronously?

I am opening a Telerik RadWindowManager Pop up.
There is a long Database operation to be performed.
During loading i.e. approximately for 35-40 seconds, for the moment, I keep on waiting until the process will come to an end.
Is there any way to load the design first and show a Loader / progress bar to inform the user to wait...Actually the problem gets worse when the Internet speed is slow...
Any suggestion....

Here I have a good example. See here for demo.
aspx file:
<telerik:RadScriptManager id="ScriptManager1" runat="server" />
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest"/>
<p>
Press the submit button in order to start monitoring custom progress
</p>
<asp:button ID="buttonSubmit" runat="server" Text="Submit" OnClick="buttonSubmit_Click" CssClass="RadUploadButton" />
<telerik:RadProgressManager id="Radprogressmanager1" runat="server" />
<telerik:RadProgressArea id="RadProgressArea1" runat="server" />
aspx.cs file:
protected void Page_Load(object sender, System.EventArgs e)
{
if (!IsPostBack)
{
//Do not display SelectedFilesCount progress indicator.
RadProgressArea1.ProgressIndicators &= ~ProgressIndicators.SelectedFilesCount;
}
RadProgressArea1.Localization.Uploaded = "Total Progress";
RadProgressArea1.Localization.UploadedFiles = "Progress";
RadProgressArea1.Localization.CurrentFileName = "Custom progress in action: ";
}
protected void buttonSubmit_Click(object sender, System.EventArgs e)
{
UpdateProgressContext();
}
private void UpdateProgressContext()
{
const int total = 100;
RadProgressContext progress = RadProgressContext.Current;
progress.Speed = "N/A";
for (int i = 0; i < total; i++)
{
progress.PrimaryTotal = 1;
progress.PrimaryValue = 1;
progress.PrimaryPercent = 100;
progress.SecondaryTotal = total;
progress.SecondaryValue = i;
progress.SecondaryPercent = i;
progress.CurrentOperationText = "Step " + i.ToString();
if (!Response.IsClientConnected)
{
//Cancel button was clicked or the browser was closed, so stop processing
break;
}
progress.TimeEstimated = (total - i) * 100;
//Stall the current thread for 0.1 seconds
System.Threading.Thread.Sleep(100);
}
}
Now it should be easier to integrate your code.
EDIT: To trigger your Database operation after setting up your RadProgressArea in the PageLoad, you'll need some ajax call to be made after first page load (So I just added the RadAjaxManager to the ascx file upper). Use this code to trigger your DataBase call:
javascript:
function pageLoad(sender, eventArgs) {
if (!eventArgs.get_isPartialLoad()) {
$find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("StartDBOperation");
}
}
ascx.cs file:
protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
{
if (e.Argument == "StartDBOperation")
{
// Start DB operation here..
}
}

Still an Alternative below... But not a solution
I can show a loading panel as follows while the content loads
Mark Up
<div id="loading" style=" width: 100px; height: 50px; display: none;
text-align: center; margin: auto;">
loading...
</div>
<asp:Button ID="RadButton1" runat="server"
Text="RadButton1" OnClientClick="openRadWnd(); return false;" />
<telerik:RadWindowManager ID="RadWindowManager1" runat="server">
<Windows>
<telerik:RadWindow ID="RadWindow1" runat="server"
NavigateUrl="url" ShowContentDuringLoad="false"
OnClientShow="OnClientShow" OnClientPageLoad="OnClientPageLoad">
</telerik:RadWindow>
</Windows>
</telerik:RadWindowManager>
JavaScript
<script type="text/javascript">
var loadingSign = null;
var contentCell = null;
function openRadWnd() {
$find("<%=RadWindow1.ClientID %>").show();
}
function OnClientShow(sender, args) {
loadingSign = $get("loading");
contentCell = sender._contentCell;
if (contentCell && loadingSign) {
contentCell.appendChild(loadingSign);
contentCell.style.verticalAlign = "middle";
loadingSign.style.display = "";
}
}
function OnClientPageLoad(sender, args) {
if (contentCell && loadingSign) {
contentCell.removeChild(loadingSign);
contentCell.style.verticalAlign = "";
loadingSign.style.display = "none";
}
}
</script>

Open the RadWindow with JavaScript on the client, set the desired URL through JavaScript. Performa partial postbacks that do not dispose the RadWindow. If you obtain the URL on the server only - use the same logic, but show the loading sign initially, when the response is done call a script to change the URL of the RadWIndow again.
http://www.telerik.com/help/aspnet-ajax/window-programming-opening.html
http://www.telerik.com/help/aspnet-ajax/window-troubleshooting-javascript-from-server-side.html
http://www.telerik.com/help/aspnet-ajax/window-programming-radwindow-methods.html