Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 467
  • Last Modified:

Displaying Arrow Images dynamically....

Hi,
 
   I have a Asp.net Page, which contains a UserControl and that UserControl loads some employee names as link buttons from the database, and attaching one eventhandler to all the LinkButtons which will do some stuff according to the selected employee ID and displays some information on that Asp.net Page....

Now the problem is when Iam displaying all the employees names Iam also displaying a blackarrow before each employee name, now when user clicks on one particular employee name I want to display the red arrow, instead of blackarrow only for that particular employee name, rest all must display black arrow... I tried some ways, but I failed to achieve the result... AnyIdeas and if possible sample code would be greatly appreciable....
Please let me know if Iam too vague in explaining...
0
steve_mick972
Asked:
steve_mick972
  • 6
  • 5
  • 2
1 Solution
 
caner_elciCommented:
You can do that in client-side.. using Javascript.. if this is what you want, let me know so I give you an example...
0
 
gregoryyoungCommented:
is this causing a postback which shows the details ?

If so its very easy on either side (javascript or codebehind)
0
 
gregoryyoungCommented:
is this causing a postback which shows the details ?

If so its very easy on either side (javascript or codebehind)
0
NEW Veeam Agent for Microsoft Windows

Backup and recover physical and cloud-based servers and workstations, as well as endpoint devices that belong to remote users. Avoid downtime and data loss quickly and easily for Windows-based physical or public cloud-based workloads!

 
steve_mick972Author Commented:
Hi,
  caner_elci, Iam ready to use some javascript, but Iam writing displaying those employeenames using linkbuttons in codebehind, and I know I can append JavaScript in Codebehind, can you please provide me some javascript code which will do that for me, if possible please provide me the javascript code so that I can easily embed that into codebehind..

 gregoryyoung, Iam really not sure which one your asking whether it is causing postback r not??, but I'll explain you wht exactly going on (sorry for being so dumb)... Iam writing a database query which will get me all the employee names and looping through the Reader and creating a linkbutton and the tex of the linkbutton is the employee name and attaching all the link buttons to one eventhandler function, before attaching this link button to a table cell (to place the linkbutton at appropriate place on the page) Iam also attaching a black arrow Image to the table cell... and all this is done in PageLoad() event of the page. this is wat happening in the page, I want a mechanism to check which linkbutton is clicked and accordingly I want to place a red arrow instead of black arrow...


Thank You,
Steve
0
 
caner_elciCommented:
Hi Steve,

Of course, I can write a sample code for you.. But I need to see your code.. can you please paste some code from your aspx file? Especially, the parts those you create buttons.. So I can write a few Javascript functions to enable/disable them...

Caner
0
 
steve_mick972Author Commented:

public void Page_Load()
{
  //after opening the database connection and getting the data into the Reader Object
 // this is how my code looks like....
  while(Reader.Read())
  {
   //create a link button for each employee
    LinkButton lnkEmp = new LinkButton();
   // set linkbutton properties
    lnkEmp.ID = Reader["EmpID"].ToString();
    lnkEmp.Text = Reader["EmpName"].ToString() + "<br>";
  //set linkbutton clickevent handler
    lnkEmp.Click += new EventHandler(this.ProcessClick);

   // create a row and cell to attach Image and linkbutton to the page
    HtmlTableRow tblRowEmp = new HtmlTableRow();
    HtmlTableCell tblCellEmp = new HtmlTableCell();
    HtmlTableCell tblCellBarrow = new HtmlTableCell();
   
   //create a HtmlImage and add source as BlackArrow Image and set some prop
    HtmlImage imgBarrow = new HtmlImage();
    HtmlTableCell tblCellBarrow = new HtmlTableCell();
    imgBarrow.Src = "/images/Barrow.gif";
    tblCellEmp.Align = "left";

   //attach link button and image to appropriate cells
    tblCellBarrow.Controls.Add(imgBarrow);
    tblCellEmp.Controls.Add(lnkEmp);
   //attach cells to the row...
    tblRowEmp.Cells.Add(tblCellBarrow);
    tblRowEmp.Cells.Add(tblCellEmp);
  //above row is already attached to a table....
  }
}

that is what happening in my Page_Load() event of the page, Please let me know if you dont understand anything...

Thank You,
Steve
0
 
caner_elciCommented:
This is fine, but I need to know when and where you are going to disable buttons?
0
 
steve_mick972Author Commented:
when the user clicks on the link button, instead of BlackArrow Image I want to put  Red Arrow Image before the linkbutton (the code I wrote to put black arrow image I want to replace with it similar code to put red arrow image)..

Steve
0
 
caner_elciCommented:
Okay, here we go:

in your C# code, add an attribute to your linkButton which is actually an javaScript event handler for click event of that LinkButton.. That will include a simple javascript code that changes your image.. For example:

HtmlImage imgArrow = new HtmlImage();
imgArrow.ID = "image_to_change";
imgArrow.Src = "Barrow.jpg";
this.Controls.Add( imgArrow );

LinkButton1.Attributes.Add( "onClick", "image_to_change.src='images/RArrow.jpg';" );

Above, you should generate a unique ID for your HtmlImage control, and add that ID to generated JavaScript code in Attributes.Add() method.. such as:

imgArrow.ID = "ArrowImage" + someCounter;
LinkButton1.Attributes.Add( "onClick", imgArrow.ID + ".src='images/RArrow.jpg';" );

This code will add an event handler to your LinkButton and it will be on client-side..

But if your LinkButtons does postback, you should add another attribute for its href property.. if you know any other way to stop it causing postback, you can do that too.. In my example, you can do this:

LinkButton1.Attributes.Add( "href", "#" );

I tried this with a simple project and works fine.. if there is anything you don't understand, please let me know..

Caner ELCI
0
 
steve_mick972Author Commented:
I am sorry for the late reply, But your code is not working, can you please look into where I am doing wrong... here is what I am doing in my case with your example...

public void Page_Load()
{
  //after opening the database connection and getting the data into the Reader Object
 // this is how my code looks like....
  while(Reader.Read())
  {
   //create a link button for each employee
    LinkButton lnkEmp = new LinkButton();
   // set linkbutton properties
    lnkEmp.ID = Reader["EmpID"].ToString();
    lnkEmp.Text = Reader["EmpName"].ToString() + "<br>";
  //set linkbutton clickevent handler
    lnkEmp.Click += new EventHandler(this.ProcessClick);

   // create a row and cell to attach Image and linkbutton to the page
    HtmlTableRow tblRowEmp = new HtmlTableRow();
    HtmlTableCell tblCellEmp = new HtmlTableCell();
    HtmlTableCell tblCellBarrow = new HtmlTableCell();
   
   //create a HtmlImage and add source as BlackArrow Image and set some prop
    HtmlImage imgBarrow = new HtmlImage();
    HtmlTableCell tblCellBarrow = new HtmlTableCell();
    imgBarrow.Src = "/images/Barrow.gif";
   
// code added..
    imgBarrow.ID = "arrow" + counter // Iam incrementing the counter every call..
    lnkEmp.Attributes.Add("onClick",imgBarrow.ID+".src='/images/Rarrow.gif';");
    lnkEmp.Attributes.Add("href","#");

   //attach link button and image to appropriate cells
    tblCellBarrow.Controls.Add(imgBarrow);
    tblCellEmp.Controls.Add(lnkEmp);
   //attach cells to the row...
    tblRowEmp.Cells.Add(tblCellBarrow);
    tblRowEmp.Cells.Add(tblCellEmp);
  //above row is already attached to a table....
  }
}

in the above code "//code added part "is the one I am changing rest everything I am keeping the same... can you please help me out what's wrong with one Iam doing...
0
 
caner_elciCommented:
First of all, I have a question.. what are you going to do when users clicks on your lnkEmp? I ask this, because I see that you are adding an event handler to that button, which causes postback (refreshing page and running your server-side code - this.ProcessClick)... So next time the page is loaded, your client-side changes, such as changing image source, will not be seen..
0
 
steve_mick972Author Commented:
Actually in my case I definitely need to have the post back and the link buttons has to be created dynamically in PageLoad event anyways... I have got the way around in c# without using javascript I have got the solution... but I dont know for some reason your way is not working, I tried to do it in normal way not using my code just sample example, still it was not working... I guess Im doing some thing very wrong...

But still I really appreciate ur help and ofcourse Im accepting ur answer....
I have another Question, I have posted that in ASP.NET section, If you could I would really appreciate your looking at that question.... ..

Thank You,
Steve...
0
 
caner_elciCommented:
Thank you, I'll check it out..

Caner
0

Featured Post

Get your Disaster Recovery as a Service basics

Disaster Recovery as a Service is one go-to solution that revolutionizes DR planning. Implementing DRaaS could be an efficient process, easily accessible to non-DR experts. Learn about monitoring, testing, executing failovers and failbacks to ensure a "healthy" DR environment.

  • 6
  • 5
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now