Button Layout
I have 3 labels inside of a div. I want to make the div clickable and trigger a postback from clicking the div. In essensce I want to make a custom button that looks like the picture. So far the only way I found out of doing this is either having the div onclick event trigger javascript, or do some custom usercontrol magic, which i cant get to work.
User Control
<div class="meetingContainer" >
<div class="meetingCityState">
<asp:Label ID="lblMeetingCityState" runat="server" Text='<%# Eval("City") %>'></asp:Label>
</div>
<div>
<asp:Label ID="lblMeetingDate" runat="server" Text='<%# Eval("MeetingDate") %>'></asp:Label>
</div>
<div>
<asp:Label ID="lblMeetingSite" runat='server' Text='<%# Eval("Location") %>'></asp:Label>
</div>
</div>
code behind
<System.Security.Permissions.PermissionSetAttribute(System.Security.Permissions.SecurityAction.Demand, Name:="FullTrust")> _
Partial Public Class MeetingButton
Inherits System.Web.UI.UserControl
Implements System.Web.UI.IPostBackEventHandler
Public Event Click As EventHandler
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
End Sub
Protected Overridable Sub OnClick(ByVal E As EventArgs)
RaiseEvent Click(Me, E)
End Sub
Public Sub RaisePostBackEvent(ByVal eventArgument As String) _
Implements IPostBackEventHandler.RaisePostBackEvent
OnClick(New EventArgs())
End Sub
End Class
Yes, you can do this, using the __doPostBack method. You can create a custom reference to this from the server using this method: http://msdn.microsoft.com/en-us/library/ms153112(v=vs.80).aspx.
Otherwise, you can manually create it by passing it this:
<div id="<Server control's Client ID>" name="<Server control's Unique ID>" onclick="__doPostBack('<unique name>', '<command name and args>');">
On the server, check the following collection for the event:
string target = Request.Form["__EVENTTARGET"];
if (target != null && target.EndsWith("<id>"))
{
// do this
}
You need to math the __doPostBack unique name to the UniqueID property of the user control.
This would automatically invoke the method defined by the IPostBackEventHandler; any control that implements this interface has its RaisePostBackEvent method called... however, I'm not 100% sure it works the same way for user controls...
looks link an asp:linkbutton will do what I need thaank you
Related
I have encountered a problem with a page we have, and have narrowed down a sample like so:
ASPX:
<div>
<asp:DropDownList ID="ddlSomething" runat="server"
CausesValidation="true" AutoPostBack="true">
<asp:ListItem>One</asp:ListItem>
<asp:ListItem>Two</asp:ListItem>
</asp:DropDownList>
<asp:Button ID="btnFilter" runat="server" Text="Filter" />
</div>
Code:
Partial Class ValTest
Inherits System.Web.UI.Page
Protected Sub btnFilter_Click(sender As Object, e As EventArgs) Handles btnFilter.Click
BindGrid()
End Sub
Protected Sub ddlSomething_SelectedIndexChanged(sender As Object, e As EventArgs) Handles ddlSomething.SelectedIndexChanged
BindGrid()
End Sub
Private Sub BindGrid()
If (Page.IsValid) Then
'Do something that takes a little time here
System.Threading.Thread.Sleep(2000)
Response.Write("Done")
End If
End Sub
End Class
Note that the dropdown list has autopostback set to true and causesvalidation set to true.
Now, if I change the dropdown list and let the page load, it works without issue. Similarly, if I just click the button, then it works ok. However, if I change the dropdown list and then, before the page has totally reloaded, click the button, then I get this error:
Page.IsValid cannot be called before validation has taken place. It should be queried in the event handler for a control that has CausesValidation=True and initiated the postback, or after a call to Page.Validate.
Now, I can fix this by putting a Page.Validate() in front of my check for Page.IsValid, however I am curious if anybody can explain why this is happening. I am expecting two postbacks to have been sent, each causing validation, and each should have worked...
ASP.net 4.5, just in case it makes a difference.
I have a simple usercontrol which raises an event on button click
Public Class UcPaymentCheque
Inherits System.Web.UI.UserControl
Public Event OnCancelClick()
Private Sub btnCancelPayment_Click(sender As Object, e As System.EventArgs) Handles btnCancelPayment.Click
RaiseEvent OnCancelClick()
End Sub
End Class
This usercontrol is used within a listview
<asp:ListView ID="lvwNonTpProducts" runat="server" ItemPlaceholderID="ItemPlaceholder">
<LayoutTemplate>
<asp:PlaceHolder ID="ItemPlaceholder" runat="server" />
</LayoutTemplate>
<ItemTemplate>
<TPCustomControl:UcPaymentCheque ID="UcTPPaymentCheque" runat="server" Visible="false" />
</ItemTemplate>
</asp:ListView>
which is databound on page load
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Page.IsPostBack Then
Else
BuildPage()
End If
End Sub
At what point should add the handler? I have fiddled with the ondatabound event like so;
Private Sub lvwNonTpProducts_ItemDataBound(sender As Object, e As System.Web.UI.WebControls.ListViewItemEventArgs) Handles lvwNonTpProducts.ItemDataBound
Dim UcTPPaymentCheque = DirectCast(e.Item.FindControl("UcTPPaymentCheque"), UcPaymentCheque)
AddHandler UcTPPaymentCheque.OnCancelClick, AddressOf OnCancelClick
End Sub
but this does not work and am guess at a databound issue???
You can check out my response to a similar question here: creating and listening for events
Essentially, you want a user control to raise its own event, like this:
Partial Class myControl
Inherits System.Web.UI.UserControl
Public Event MyEvent As EventHandler
'your button click event
Protected Sub bnt_click(ByVal sender As Object, ByVal e As EventArgs)
'do stuff
'now raise the event
RaiseEvent MyEvent (Me, New EventArgs)
end sub
end class
In this example, I raise the event when the user clicks a button within the user control. You can easily raise the event anywhere, such as when the control loads, using a timer, whatever.
Then, in the main page, you want to and an event handler to the user control, like this:
<mc:myControlrunat="server" ID="myControl1" OnMyEvent="myControl_MyEvent" />
Now, in the code behind, you can add the event, like this:
Protected Sub myControl_MyEvent(ByVal sender As Object, ByVal e As EventArgs)
'do stuff
end sub
You can add the handler in the declaration of the user control in the listview, using OnCancelClick, as follows:
<asp:ListView ID="lvwNonTpProducts" runat="server" ItemPlaceholderID="ItemPlaceholder">
<LayoutTemplate>
<asp:PlaceHolder ID="ItemPlaceholder" runat="server" />
</LayoutTemplate>
<ItemTemplate>
<TPCustomControl:UcPaymentCheque ID="UcTPPaymentCheque" runat="server" Visible="false" OnCancelClick="UcTPPaymentCheque_OnCancelClick" />
</ItemTemplate>
</asp:ListView>
Where UcTPPaymentCheque_OnCancelClick is the function you should use to handle the event, in the control that contains the listview.
I have two user controls on the same page. One contains a ListView that displays navigation links, the second user control should be updated when user clicks on the buttonlink in the ListView. How can I do this?
UserControl A should handle the button-click and raise a custom event declared in the UserControl
The page handles this event and calls a public method of UserControl B that updates it's content
You could pass necessary informations from UserControl A to page via EventArgs(or pass the UserControl itself as argument and use it's public properties).
The page then passes the arguments to UserControl B via method parameter or by changing it's public properties before calling the Update-Method.
http://msdn.microsoft.com/en-us/library/fb3w5b53.aspx
http://chiragrdarji.blogspot.com/2007/08/raise-event-from-user-control-to-main.html
Here is the sample code you've requested.
Sorry for the meaningless naming but you haven't told what's this all about. You should use readable variables,properties,method and event-names instead.
Reduced UserControl A with a ListView:
<%# Control Language="vb" AutoEventWireup="false" CodeBehind="UsercontrolA.ascx.vb" Inherits="WebApplication1.UserControlA" %>
<asp:ListView ID="ListView1" runat="server">
<ItemTemplate>
<asp:LinkButton ID="LinkButton1"
CommandName="LinkClick"
CommandArgument='<%#Eval("ID") %>'
runat="server"
Text='<%#Eval("Text") %>'></asp:LinkButton>
</ItemTemplate>
</asp:ListView>
Removed the ListView databinding from codebehind because that doesn't matter. The important part is handling the ListView's ItemCommand and raising the custom event:
Public Event LinkClicked(sender As UserControlA, id As Int32)
Private Sub LV_ItemCommand(sender As Object, e As ListViewCommandEventArgs) Handles ListView1.ItemCommand
If e.CommandName = "LinkClick" Then
Dim id = CType(e.CommandArgument, Int32)
' This is the best way for UC's to commmunicate with the page: '
RaiseEvent LinkClicked(Me, id)
End If
End Sub
Simple UserControl B with nothing more than a Label(ascx):
<%# Control Language="vb" AutoEventWireup="false" CodeBehind="UserControlB.ascx.vb" Inherits="WebApplication1.UserControlB" %>
<asp:Label ID="Label1" runat="server"></asp:Label>
With an Update-Method in codebehind:
Public Sub Update(showID As Int32)
Me.Label1.Text = String.Format("Link {0} clicked", showID.ToString)
End Sub
Finally, here is the Page(aspx)
<uc1:UsercontrolA ID="UC_A" runat="server" />
<br />
<uc2:UserControlB ID="UC_B" runat="server" />
It controls both UserControls. It handles the event from UserControl A and calls the Update-Method that UserControl B provides:
Private Sub LinkClicked(sender As UserControlA, id As Integer) Handles UC_A.LinkClicked
Me.UC_B.Update(id)
End Sub
The advantage of this event-approach is that UserControls stay being reusable. You can use UserControl A in other pages as well even when they don't handle this event. It's part of the controller to decide what is needed and what should be done.
UserControls as a rule should not depend on specific controllers, otherwise they are hard-linked and not reusable. That would be also a good source for nasty erros. A UserControl might be a controller for other nested (User-)Controls but not for the page itself.
Communication Summary:
Page -> UserControl -> public properties and methods
UserControl -> Page -> Events
UserControl -> UserControl -> the controller-UserControl adopts the page-role(see above)
I have a user control with a panel on it:
CustomControl.ascx
<%# Control Language="vb" CodeBehind="CustomControl.ascx.vb" %>
<asp:Panel ID="myPanel" runat="server"></asp:Panel>
I'd lke to expose that panel as a property that I can use at design time.
CustomControl.ascx.vb
<ParseChildren(True), PersistChildren(False)> _
Partial Public Class CustomControl
Inherits System.Web.UI.UserControl
#Region "Members and Properties"
<PersistenceMode(PersistenceMode.InnerProperty)> _
Public Property SomePanel() As Panel
Get
Return myPanel
End Get
Set(ByVal value As Panel)
myPanel= value
End Set
End Property
#End Region
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Response.Write(myPanel.HasControls.ToString())
End Sub
End Class
And then bring the control onto a page like so:
<ucl:CustomControl runat="server">
<SomePanel>
<asp:Label ID="lblText" AssociatedControlID="txtBox" runat="server"></asp:Label>
<asp:TextBox id="txtBox" runat="server"></asp:TextBox>
</SomePanel>
</ucl:CustomControl>
When I run the page, HasControls is true but nothing is rendered. What am I doing wrong?
You could achieve a similar effect by designing your user control as a template control. It's not that hard to set up, if you choose to go the template route.
Check out this brief tutorial to determine if control templates are suitable for you:
http://msdn.microsoft.com/en-us/library/36574bf6.aspx
I'm trying to make a tabbed menu for the asp.net website I'm working on. One of the pre-requisite is obviously to color the current tab differently, so the user can know on which tab is currently is.
To do this, I made this method in my code-behind:
Protected Function GetCssClass(ByVal ctrl As LinkButton) As String
If ctrl.ID = currentLink Then
Return "current"
Else
Return String.Empty
End If
End Function
and I call the method like this in my aspx page:
<asp:LinkButton ID="LinkButton1" runat="server" PostBackUrl="/Default.aspx" CssClass="<%#GetCssClass(LinkButton1) %>" >Home</asp:LinkButton>
<asp:LinkButton ID="LinkButton2" runat="server" PostBackUrl="/Directory/page1.aspx" CssClass="<%#GetCssClass(LinkButton2) %>" >Page1</asp:LinkButton>
But the method is never hit... As I understand, the method should be called each time the LinkButton is drawn...
Does someone have an idea why?
Thanks in advance !
Edit: Just as a precision, all this code is in the masterpage.
Edit2: Here are the changes I made according to Quagland's suggestion.
In the aspx masterpage:
<asp:HiddenField ID="currentLink" runat="server" />
<asp:LinkButton ID="LinkButton1" runat="server" PostBackUrl="/Default.aspx" OnClick="LinkButton_Click" OnPreRender="LinkButton_PreRender" >Home</asp:LinkButton>
<asp:LinkButton ID="LinkButton2" runat="server" PostBackUrl="/OtherDirectory/Page1.aspx" OnClick="LinkButton_Click" OnPreRender="LinkButton_PreRender" >Page1</asp:LinkButton>
<asp:LinkButton ID="LinkButton3" runat="server" PostBackUrl="/OtherDirectory/Page2.aspx" OnClick="LinkButton_Click" OnPreRender="LinkButton_PreRender" >Page2</asp:LinkButton>
<asp:LinkButton ID="LinkButton4" runat="server" PostBackUrl="/OtherDirectory/Page3.aspx" OnClick="LinkButton_Click" OnPreRender="LinkButton_PreRender" >Page3</asp:LinkButton>
And in the code behind:
Protected Sub LinkButton_Click(ByVal sender As Object, ByVal e As EventArgs) Handles LinkButton1.Click, LinkButton2.Click, LinkButton3.Click, LinkButton4.Click, LinkButton5.Click, LinkButton6.Click, LinkButton7.Click, LinkButton8.Click
Dim lnk As LinkButton = CType(sender, LinkButton)
currentLink.Value = lnk.ID
End Sub
Protected Function GetCssClass(ByVal ctrl As LinkButton) As String
If ctrl.ID = currentLink.Value Then
Return "current"
Else
Return String.Empty
End If
End Function
Protected Sub LinkButton_PreRender(ByVal sender As Object, ByVal e As EventArgs) Handles LinkButton1.PreRender, LinkButton2.PreRender, LinkButton3.PreRender, LinkButton4.PreRender, LinkButton5.PreRender, LinkButton6.PreRender, LinkButton7.PreRender, LinkButton8.PreRender
Dim lnk As LinkButton = CType(sender, LinkButton)
lnk.CssClass = GetCssClass(lnk)
End Sub
The problem is now that the click event is not always fired. On first click, nothing happens, but on second click on a tab, the click event is correctly triggered. Any clue ?
Edit3: Could it be that the value stored in the hidden field is reset each time the masterpage is reloaded (I mean, each link points to a couple masterpage + content page) ?
You need to use <%= ... %> (i.e. replace # with =).
The hash form is used with data binding, you want to just create output.
For .NET 4 prefer <%: ... %> (use a colon) to automatically do HTML encoding.
I have quickly tested a solution that might work for you. I'm just not sure where your 'currentlink' variable comes from. I have implemented it as a hidden field here.
In Masterpage.aspx:
<asp:HiddenField ID="currentLink" runat="server" />
<asp:LinkButton ID="LinkButton1" runat="server">Home</asp:LinkButton>
<asp:LinkButton ID="LinkButton2" runat="server">Page1</asp:LinkButton>
In code behind:
use your original GetCssClass function add this:
Protected Sub LinkButton_PreRender(ByVal sender As Object, ByVal e As System.EventArgs)
Handles LinkButton1.PreRender, LinkButton2.PreRender
Dim lnk As LinkButton = CType(sender, LinkButton)
lnk.CssClass = GetCssClass(lnk)
End Sub
I have put it in PreRender because i was using the LinkButton click events to set the hidden field value (and Click happens after Load but before PreRender):
Protected Sub LinkButton_Click(ByVal sender As Object, ByVal e As System.EventArgs) _
Handles LinkButton1.Click, LinkButton2.Click
Dim lnk As LinkButton = CType(sender, LinkButton)
currentLink.Value = lnk.ID
End Sub
also, if there are numerous Linkbuttons, you may want to declare like:
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton_Click" OnPreRender="LinkButton_PreRender">Home</asp:LinkButton>
EDIT:
Here is another solution that will work with cross page postbacks. Not much code but you'll need to put some on every page. Anyway:
Masterpage.aspx:
<asp:LinkButton ID="LinkButton1" runat="server" PostBackUrl="Default.aspx">Home</asp:LinkButton>
<asp:LinkButton ID="LinkButton2" runat="server" PostBackUrl="Page1.aspx">Page1</asp:LinkButton>
<asp:LinkButton ID="LinkButton3" runat="server" PostBackUrl="Page2.aspx">Page2</asp:LinkButton>
<asp:LinkButton ID="LinkButton4" runat="server" PostBackUrl="Page3.aspx">Page3</asp:LinkButton>
Masterpage.aspx.vb:
Public Sub SetCssClass(ByVal ctrl As String)
CType(FindControl(ctrl), LinkButton).CssClass = "current"
End Sub
All content pages:
*.aspx:
add this directive to create a strongly typed reference to the masterpage
<%# MasterType VirtualPath="~/MasterPage.master" %>
*.aspx.vb:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Master.SetCssClass("LinkButton1") '' << put the name of the relevant link button here
End Sub
Set the CssClass in the code-behind. This will state your intent more clearly than calling DataBind on your linkbuttons if you use databinding syntax. Since you're doing it for multiple controls maybe stick them in a method called ApplyCssClasses.
I'm not sure why <%= %> isn't working but personally I don't like to mix code and markup, I like to keep them completely separate.
I would suggest setting the CSS class in code perhaps on the page load event.
lnkPopulate.CssClass = "current"
<%# ... %> will work if you're OK with doing LinkButton1.DataBind() in your code-behind at the appropriate time.