Custom Events in ASP.NET

Question

I want to handle a custom event on an asp.net page with C# as my code Behind. I want to increase the size of the search text box on clicking it. It should be somewhat like this...

I know this can be done using event and delegate.I tried something, but I'm not sure when exactly should I raise the event.So I'm simply raising it on txtSearch_TextChanged event

Here's a snippet:

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;


delegate void MessageEventHandler(object sender, EventArgs e);

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {

    if (Session["Redirected"] != null)
    {
        Session["Redirected"] = null;
        if (Session["FirstName"] != null)
            txtSearch.Text = Session["FirstName"].ToString();
        if (Session["Gender"] != null)
            ddlGen.SelectedValue = Session["Gender"].ToString();
        btnSearch_Click(sender, e);
    }


    if (!Page.IsPostBack)
    {   
        BindGrid();
    }
}

private void BindGrid()
{
    //Get dataset
    //bind
    string query = "select EmployeeId,FirstName,Password,Address,sex,Deptno,act_book,actTV,DOJ,isActiveYN from employees";

    DataSet ds = new DataSet("Employees");
    SqlConnection con = new SqlConnection("Password=admin;User ID=admin;Initial Catalog=asptest;Data Source=dbsvr");
    SqlDataAdapter da = new SqlDataAdapter(query, con);

    da.Fill(ds);
    gvSession.DataSource = ds;        
    gvSession.DataBind();
}

protected void btnSearch_Click(object sender, EventArgs e)
{

    string query = "Select EmployeeId,FirstName,Password,Address,sex,Deptno,act_book,actTV,DOJ,isActiveYN from employees where 1=1";

    if (txtSearch.Text != "")
    {
        query += " and FirstName like '%" + txtSearch.Text + "%'";            
        Session["FirstName"] = txtSearch.Text;   
    }

    if (ddlGen.SelectedValue != "")
    {
        query += "  and sex='" + ddlGen.SelectedValue.ToUpper() + "'";            
        Session["Gender"] = ddlGen.SelectedValue;
    }


    DataSet ds = new DataSet("Employees");
    SqlConnection con = new SqlConnection("Password=admin;User ID=admin;Initial Catalog=asptest;Data Source=dbsvr");
    SqlDataAdapter da = new SqlDataAdapter(query, con);            


    da.Fill(ds);
    gvSession.DataSource = ds;
    gvSession.DataBind();


}


private event MessageEventHandler texBoxOnClick;

void _Default_texBoxOnClick(object sender, EventArgs e)
{
    //this function auto generates when you use += and tab twice in Visual Studio
    //handle the event here
    txtSearch.Width = Convert.ToInt32(300);
    //throw new Exception("The method or operation is not implemented.");
} 

private void OnTextBxClicked(EventArgs e)
{
    if (texBoxOnClick != null)
        texBoxOnClick(this, e);
}

protected void txtSearch_TextChanged(object sender, EventArgs e)
{
    //adding handler
    this.texBoxOnClick += new MessageEventHandler(_Default_texBoxOnClick);
    //Raising a Notification
    OnTextBxClicked(e);
    Session["FirstName"] = "";

}

protected void ddlGen_SelectedIndexChanged(object sender, EventArgs e)
{
    Session["Gender"] = "";   

    }
}

After the last edit I mentioned.It now raises the event when the search button is clicked as textchange occurs on postback.My problem is that I can't gauge when exactly to call OnTextBxClicked(e); coz I want it to happen when the textbox is clicked.(link on this website itself)

Answer 1

The TextChanged event only fires on the server when the page is posted back, so while you could handle it there to increase the textbox width, you most likely want to do this on the client side:

<script type="text/javascript" language="javascript"> 
<!--
    $(document).ready(function () {
        $('#myTextBoxID').focus(function () {
            $(this).width(500)
        });
    }) 
//--> 
</script>

Answer 2

That would most likely have to be done on the client-side through javascript or any other client technology.