When you need to go back to the server for further processing on clicking of a html element, for example on html table row click, below code may help you provide such functioning in ASP.NET.
Well, actually to allow control to support bubbling of the events, and allow user of the control to specify CommandName and CommandArgument while being used in template controls, there is some extract effort, essentially will need to implement IButtonControl. Let’s see the code below that I have implemented to provide function of selecting row when clicked on it.
1: [ToolboxData("<{0}:ListViewRowClickCommand CommandName=\"Select\" runat=\"server\"></{0}:ListViewRowClickCommand>")]
2: public class ListViewRowClickCommand : HtmlTableRow, IButtonControl, IPostBackEventHandler
3: {
4: public bool DisableCommand { get; set; }
5: protected override void Render(HtmlTextWriter writer)
6: {
7: writer.WriteBeginTag("tr");
8: if (ID != null)
9: writer.WriteAttribute("id", ClientID);
10: if (!DesignMode)
11: {
12: if (!DisableCommand)
13: writer.WriteAttribute("onclick", "javascript:" +
14: Page.ClientScript.GetPostBackEventReference(this, CommandArgument));
15: }
16: Attributes.Render(writer);
17: writer.Write(HtmlTextWriter.TagRightChar);
18:
19: RenderChildren(writer);
20: writer.WriteEndTag("tr");
21: }
22:
23: public bool CausesValidation
24: {
25: get { return (bool)(ViewState["CausesValidation"] ?? true); }
26: set { ViewState["CausesValidation"] = value; }
27: }
28:
29: public string CommandArgument
30: {
31: get { return (string)ViewState["CommandArgument"]; }
32: set { ViewState["CommandArgument"] = value; }
33: }
34:
35: public string CommandName
36: {
37: get { return (string)ViewState["CommandName"]; }
38: set { ViewState["CommandName"] = value; }
39: }
40:
41: public string PostBackUrl
42: {
43: get { return (string)ViewState["PostBackUrl"]; }
44: set { ViewState["PostBackUrl"] = value; }
45: }
46:
47: public string ValidationGroup
48: {
49: get { return (string)ViewState["ValidationGroup"]; }
50: set { ViewState["ValidationGroup"] = value; }
51: }
52:
53: public event EventHandler Click;
54: public event CommandEventHandler Command;
55:
56: public void RaisePostBackEvent(string eventArgument)
57: {
58: if (CausesValidation)
59: {
60: if (Page.IsPostBack)
61: Page.Validate();
62: if (!Page.IsValid)
63: return;
64: }
65:
66: OnClick(EventArgs.Empty);
67: OnCommand(new CommandEventArgs(CommandName, CommandArgument));
68: }
69:
70: protected virtual void OnCommand(CommandEventArgs eventArgs)
71: {
72: if (Command != null)
73: Command(this, eventArgs);
74:
75: RaiseBubbleEvent(this, eventArgs);
76: }
77:
78: protected virtual void OnClick(EventArgs eventArgs)
79: {
80: if (Click != null)
81: Click(this, eventArgs);
82: }
83: }
Above control can be used as below:
1: ...
2:
3: <asp:ListView ID="listViewOfSomething" runat="server" OnSelectedIndexChanging="OnSelectedIndexChanging">
4: <LayoutTemplate>
5: <table id="htmlTableOfSomething" >
6: <tbody>
7: <asp:PlaceHolder ID="itemPlaceholder" runat="server" />
8: </tbody>
9: </table>
10: </LayoutTemplate>
11: <ItemTemplate>
12: <vdd:ListViewRowClickCommand ID="ListViewRowClickCommand" runat="server"
13: CommandName="Select" Class="SomeCssClassForRow" >
14: <td class="CssClassForColumn">
15:
16: ...
Feel free to put comments in case if things are not clear.
Thank you for this, this is perfectly what i was looking for 🙂
Comment by Tigrou — November 11, 2011 @ 6:33 pm
Great and simple solution. Thanks for that.
Comment by Milan Prikner — November 5, 2013 @ 5:47 pm