Click event on div in asp.net - asp.net

I have a div in default.aspx with img inside as follow
<div id="sTab" class="tabs firsttab" runat="server">
<asp:Image ID="sTabImg" src="images/home.png" runat="server" />
Activities
</div>
I want to perform some action on click of the div in ASP.NET (not in javascript).
I tried the following
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
}
sTabImg.Attributes["onclick"] = ClientScript.GetPostBackEventReference(this, "ClickDiv");
}
protected void ClickDiv()
{
Label2.Text = "helo got it";
}
The page is getting refreshed and when i debugged the issue, its not entering the ClickDiv function..What wrong here..

From Here
public partial class _Default : System.Web.UI.Page, IPostBackEventHandler
{
protected void Page_Load(object sender, EventArgs e)
{
div1.Attributes["onclick"]=ClientScript.GetPostBackEventReference(this,"ClickDiv");
}
protected void Div1_Click()
{
// Do something
}
#region IPostBackEventHandler Members
public void RaisePostBackEvent(string eventArgument)
{
if (!string.IsNullOrEmpty(eventArgument))
{
if (eventArgument == "ClickDiv")
{
Div1_Click();
}
}
}
#endregion
}
You have to implement the IPostBackEventHandler Interface.

Why not use ImageButton?
<%# Page Language="C#" AutoEventWireup="True" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>ImageButton Sample</title>
<script language="C#" runat="server">
void ImageButton_Click(object sender, ImageClickEventArgs e)
{
Label1.Text = "You clicked the ImageButton control at the coordinates: (" +
e.X.ToString() + ", " + e.Y.ToString() + ")";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<h3>ImageButton Sample</h3>
Click anywhere on the image.<br /><br />
<asp:ImageButton id="imagebutton1" runat="server"
AlternateText="ImageButton 1"
ImageAlign="left"
ImageUrl="images/pict.jpg"
OnClick="ImageButton_Click"/>
<br /><br />
<asp:label id="Label1" runat="server"/>
</form>
</body>
</html>
And you can see some examples here.

Related

Calling method in parent from user control

For some business related reasons I made a wizard navigation user control. Pretty simple: Next/Previous/Finish buttons.
Each of the parent pages that use this nav user control have a SaveData function, which saves the data and does a bunch of other stuff.
When the user clicks Next/Previous/Finish I want to call the parent's SaveData function before redirecting to the other page. How should I do this or can you recommend a better way (code examples if possible please)?
Thanks in advance!
UserControl should not call Parent's function. It is not a good design.
Instead, you want to bubble up the event from UserControl to the Parent page.
Note: my project's namespace is DemoWebForm.
MyUserControl.ascx
<%# Control Language="C#" AutoEventWireup="true"
CodeBehind="MyUserControl.ascx.cs"
Inherits="DemoWebForm.MyUserControl" %>
<asp:Button runat="server" ID="NextButton"
OnClick="NextButton_Click" Text="Next" />
<asp:Button runat="server" ID="PreviousButton"
OnClick="PreviousButtonn_Click" Text="Previous" />
<asp:Button runat="server" ID="FinishButton"
OnClick="FinishButton_Click" Text="Finish" />
MyUserControl.ascx.cs
public partial class MyUserControl : System.Web.UI.UserControl
{
public event ClickEventHandler NextClicked;
public event ClickEventHandler PreviousClicked;
public event ClickEventHandler FinishClicked;
protected void NextButton_Click(object sender, EventArgs e)
{
if (NextClicked != null)
{
NextClicked(sender, e);
}
}
protected void PreviousButtonn_Click(object sender, EventArgs e)
{
if (PreviousClicked != null)
{
PreviousClicked(sender, e);
}
}
protected void FinishButton_Click(object sender, EventArgs e)
{
if (FinishClicked != null)
{
FinishClicked(sender, e);
}
}
}
Parent.aspx
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Parent.aspx.cs"
Inherits="DemoWebForm.Parent" %>
<%# Register Src="MyUserControl.ascx" TagName="MyUserControl" TagPrefix="uc1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<uc1:MyUserControl ID="MyUserControl1" runat="server"
OnNextClicked="MyUserControl1_NextClicked"
OnPreviousClicked="MyUserControl1_PreviousClicked"
OnFinishClicked="MyUserControl1_FinishClicked" />
<asp:Literal runat="server" ID="MessageLiteral" />
</form>
</body>
</html>
Parent.aspx.cs
public partial class Parent : System.Web.UI.Page
{
protected void MyUserControl1_NextClicked(object sender,EventArgs e)
{
MessageLiteral.Text = "Next button was clicked";
}
protected void MyUserControl1_PreviousClicked(object sender, EventArgs e)
{
MessageLiteral.Text = "Previous button was clicked";
}
protected void MyUserControl1_FinishClicked(object sender, EventArgs e)
{
MessageLiteral.Text = "Finish button was clicked";
}
}
you only need the delegate:
public delegate void ClickEventHandler(object sender, EventArgs e);
public event ClickEventHandler NextClicked;

Ext.net change panel BodyCls in code behind

please help me ... my aspx page is :
<head runat="server">
<title></title>
<style type="text/css">
.notApprovedComment
{
background-color:#FFF8C1;
}
.ApprovedComment
{
background-color:#FFFFFF;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<ext:ResourceManager runat="server" ID="rc1" ViewStateMode="Enabled"> </ext:ResourceManager>
<ext:Panel runat="server" ViewStateMode="Enabled" ID="pnlTest" Title="Comment" Width="655" BodyCls="notApprovedComment">
<Content> comment </Content>
</ext:Panel>
<ext:Button runat="server" ViewStateMode="Enabled" ID="btnTest" Text="salam">
<DirectEvents>
<Click OnEvent="btnTest_Click" ViewStateMode="Enabled" ></Click>
</DirectEvents>
</ext:Button>
</div>
</form>
</body>
and code behind is :
protected void Page_Load(object sender, EventArgs e)
{
}
[DirectMethod]
protected void btnTest_Click(object sender, DirectEventArgs e)
{
btnTest.Text = btnTest.Text + " edited";
if (pnlTest.BodyCls == "ApprovedComment")
pnlTest.BodyCls = "notApprovedComment";
else if (pnlTest.BodyCls == "notApprovedComment")
pnlTest.BodyCls = "ApprovedComment";
}
but when click on ext:button ... pnlTest.BodyCls change only once and if I click again on ext:button pnl.BodyCls will not change !!! but ext:button work correctly !!!!
c#
[DirectMethod]
protected void btnTest_Click(object sender, DirectEventArgs e)
{
btnTest.Text = btnTest.Text + " edited";
X.Js.Call("triggerClass");
}
javascript (variant)
function triggerClass(){
var panel = Ext.getCmp('pnlTest');
if(Ext.select('.ApprovedComment').getCount() > 0)
panel.removeBodyCls('ApprovedComment');
else
panel.addBodyCls('ApprovedComment');
}
Here is client side sample http://jsfiddle.net/9LnYR/1/

Access a content page variable through the master page

I know in ASP.net, we can access a master page variable through content page, but is there anyway we can access a content page variable through the master page?
Yes you can. You have to implement a base class and content class should be derived from that base class.
EDIT : Posted markup and changed code for a clearer example
I have created a base page inherited the System.Web.UI.Page, then made the content page inherit it. My basepage:
namespace WebApplication2
{
public class BasePage : System.Web.UI.Page
{
public BasePage() { }
public virtual string TextValue()
{
return "";
}
}
}
Here's my content page markup:
<%# Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication2._Default" %>
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
<asp:Label ID="lblContentText" Text="Contentpage TextValue:" runat="server"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</asp:Content>
Content page code:
namespace WebApplication2
{
public partial class _Default : BasePage
{
protected void Page_Load(object sender, EventArgs e)
{
}
public override string TextValue()
{
return TextBox1.Text;
}
}
}
My Masterpage markup:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WebApplication2.SiteMaster" %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<meta charset="utf-8" />
<title><%: Page.Title %> - My ASP.NET Application</title>
<asp:ContentPlaceHolder runat="server" ID="HeadContent" />
</head>
<body>
<form runat="server">
<header> </header>
<div id="body">
<asp:Label ID="lblText" runat ="server" Text="Masterpage Text :" />
<asp:TextBox ID="txtMaster" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Click to read content page TextValue " OnClick="Button1_Click" />
<asp:ContentPlaceHolder runat="server" ID="MainContent" />
</div>
<footer>
</footer>
</form>
</body>
</html>
And the implementation in masterpage code behind:
namespace WebApplication2
{
public partial class SiteMaster : MasterPage
{
BasePage Currentpage = null;
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
Currentpage = this.Page as BasePage;
if (Currentpage != null)
{
txtMaster.Text = Currentpage.TextValue();
}
}
}
}
If you see any error like BasePase is not recognized, Please make sure that either it is using same namespace(i.e. WebApplication2), or the namespace is added to the implementation page (i.e. using WebApplication2;).
Hope it helps!

how to retrieve TextBox control's ClientID within the ListView's ItemDataBound event?

I am having trouble retrieving a TextBox control's ClientID value from a ListView control.
I thought this syntax would return me the ClientID fine(very strange):
((TextBox)e.Item.FindControl("amount")).ClientID;
but it keeps throwing this exception:
"Index was out of range. Must be non-negative and less than the size of the collection.
Parameter name: index"
Any help is greatly appreciated.
Below is my code:
aspx:
<asp:ListView ID="categories" runat="server"
ClientIDRowSuffix="ID"
ItemPlaceholderID="categoryItem"
DataKeyNames="ID" onitemdatabound="categories_ItemDataBound">
<ItemTemplate>
<div class="category">
<asp:TextBox ID="amount" runat="server" />
</div>
</ItemTemplate>
</asp:ListView>
codebehind:
public string AmountTextBoxClientID { get; set; }
protected string GetAmountTextBoxClientID()
{
return this.AmountTextBoxClientID;
}
protected void categories_ItemDataBound(object sender, ListViewItemEventArgs e)
{
switch (e.Item.ItemType)
{
case ListViewItemType.DataItem:
TextBox amountTextBox = (TextBox)e.Item.FindControl("amount");//this line excutes without any error
amountTextBox.Text = categoryAmount.ToString("C");
amountTextBox.Attributes.Add("readonly", "readonly");
this.AmountTextBoxClientID = amountTextBox.ClientID; //this line keeps throwing the OutOfRange exception
break;
}
}
Im afraid I cant pinpoint your problem but i drew up a page based on what you've given and pasted it below. It does NOT error.
<%# Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
public string AmountTextBoxClientID { get; set; }
protected void Page_Load(object sender, EventArgs e)
{
DataTable dt = new DataTable();
dt.Columns.Add("column1");
DataRow dr = dt.NewRow();
dr[0] = "some data";
dt.Rows.Add(dr);
ListView1.DataSource = dt;
ListView1.DataBind();
}
protected void ListView1_ItemDataBound(object sender, ListViewItemEventArgs e)
{
TextBox tbAmount = (TextBox)e.Item.FindControl("amount");
this.AmountTextBoxClientID = tbAmount.ClientID;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ListView ID="ListView1" runat="server" onitemdatabound="ListView1_ItemDataBound">
<ItemTemplate>
<asp:TextBox ID="amount" runat="server" />
</ItemTemplate>
</asp:ListView>
</div>
</form>
</body>
</html>

changing themes with buttons, how?

I have 2 themes that i want to use on site, and they are settled in Themes Folder-> theme1 and theme2 , in theme1 and theme2 i have one .css file.
So how will I connect these .css files to two buttons and when i click on button1 i want to theme1.css activates and for theme2.
If you need more informations about problem ask.
thanks
In the Page_PreInit or before insert the code
{
this.Theme = "myTheme"
}
I have created a sample application in asp.net check out this,and let me know if there is some doubt.
Updated
<%# Page Language="C#" AutoEventWireup="true" CodeFile="ProfilePage.aspx.cs" Inherits="ProfilePage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="test" Text="Stackoverflow" runat="server"></asp:Label>
<asp:Button ID="Button1" runat="server" Text="Theme1" OnClick="Button1_Click" />
<asp:Button ID="Button2" runat="server" Text="Theme2" OnClick="Button2_Click" />
</div>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class ProfilePage : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Page_PreInit(object sender, EventArgs e)
{
switch (Request.QueryString["theme"])
{
case "Blue":
Page.Theme = "Blue";
break;
case "Red":
Page.Theme = "Red";
break;
}
}
protected void Button1_Click(object sender, EventArgs e)
{
Response.Redirect("ProfilePage.aspx?theme=Red");
}
protected void Button2_Click(object sender, EventArgs e)
{
Response.Redirect("ProfilePage.aspx?theme=Blue");
}
}

Resources