I'm updating my ImageButtons on my asp.net application to a WebControl that extends the ImageButton, which I called CSSImageButton. I've overridden the render methods so I can make them work with css sprites. I've managed to get the OnClick working and the OnClientClick. But some buttons have the OnCommand, and I can't figure out what to do.
public class CSSImageButton : ImageButton
{
public string DivClass { get; set; }
public CSSImageButton()
{
CssClass = "";
}
protected override void Render(HtmlTextWriter writer)
{
base.Render(writer);
}
public override void RenderBeginTag(HtmlTextWriter writer)
{
writer.Write("<div class=\"" + CssClass + " " + DivClass + "\">");
}
protected override void RenderContents(HtmlTextWriter writer)
{
writer.Write("<a id=\"" + this.ClientID + "\" title=\""+ this.ToolTip+"\"");
if (!String.IsNullOrEmpty(OnClientClick))
{
writer.Write(" href=\"javascript:void(0);\" OnClick = \"" + OnClientClick + "\"");
}
else
{
writer.Write(" href=\"javascript:" + this.Page.GetPostBackEventReference(this, "ButtonClick") + "\"");
}
writer.Write("\"></a>");
}
public override void RenderEndTag(HtmlTextWriter writer)
{
writer.Write("</div>");
}
}
Alternatively, you can replace ImageButton with LinkButton, and have a div inside of it with proper class for css-sprites
The Source
In the property ImageUrl of your ImageButton, you could place a link to a transparent image (which has a size of 1x1 pixel, for example: spacer.png).
Then in your CSS you place a background image on it, with a width and height.
So at any place where you use an ImageButton, you call the same transparent image (which remain in the browsers cache).
#roman m: The issue with this approach (depending on your situation), is that this will end up nesting a div within an anchor ("bar") which will not pass HTML validation.
Granted, if that is not a concern, then what you suggest will solve the problem, however Etienne's solution is more "natural" from a markup / validation perspective.
Just my $.02
Related
I'm creating an Xamarin.Forms MVVM App (only using Android) which needs certain buttons to be outlined red, whenever their text property holds a specific value. (Purpose: alert the user to press the button and select a value, which will change the Button Text Property and therefore remove the red outline)
To achieve this I've create the following documents:
A custom button CButton that extents the default Button:
public class CButton : Button
{
// this Hides the Default .Text-Property
public string Text
{
get => base.Text;
set
{
base.Text = value;
TextChangedEvent(this, new EventArgs());
}
}
// The Raised Event
protected virtual void TextChangedEvent(object sender, EventArgs e)
{
EventHandler<EventArgs> handler = TextChanged;
handler(sender, e);
}
public event EventHandler<EventArgs> TextChanged;
}
A custom behavior makes use of the raised TextChangedEvent
public class ButtonValBehavior : Behavior<CButton>
{
protected override void OnAttachedTo(CButton bindable)
{
bindable.TextChanged += HandleTextChanged;
base.OnAttachedTo(bindable);
}
void HandleTextChanged(object sender, EventArgs e)
{
string forbidden = "hh:mm|dd.mm.yyyy";
if (forbidden.Contains((sender as CButton).Text.ToLower()))
{
//Do when Button Text = "hh:mm" || "dd.mm.yyyy"
(sender as CButton).BorderColor = Color.Gray;
}
else
{
//Do whenever Button.Text is any other value
(sender as CButton).BorderColor = Color.FromHex("#d10f32");
}
}
protected override void OnDetachingFrom(CButton bindable)
{
bindable.TextChanged -= HandleTextChanged;
base.OnDetachingFrom(bindable);
}
}
The relevant parts of the ViewModel look the following:
public class VM_DIVI : VM_Base
{
public VM_DIVI(O_BasisProtokoll base)
{
Base = base;
}
private O_BasisProtokoll _base = null;
public O_BasisProtokoll Base
{
get => _base;
set
{
_base = value;
OnPropertyChanged();
}
}
Command _datePopCommand;
public Command DatePopCommand
{
get
{
return _datePopCommand ?? (_datePopCommand = new Command(param => ExecuteDatePopCommand(param)));
}
}
void ExecuteDatePopCommand(object param)
{
//launch popup
var p = new PP_DatePicker(param);
PopupNavigation.Instance.PushAsync(p);
}
}
The .xmal looks the following (b is the xmlns of the Namespace):
<b:CButton x:Name="BTN_ED_Datum"
Text="{Binding Base.ED_datum, Mode=TwoWay}"
Grid.Column="1"
Command="{Binding DatePopCommand}"
CommandParameter="{x:Reference BTN_ED_Datum}">
<b:CButton.Behaviors>
<b:ButtonValBehavior/>
</b:CButton.Behaviors>
</b:CButton>
This solution works fine whenever the input is caused by user interaction. However, when a Value is assigned during the initialization of the Page no red outline is created, in fact the TextChangedEvent isn't raised. By using breakpoints I noticed that during initialization the Text Property of CButton is never set, eventhough it actually will be in the view.
Despite fiddling around with my solution I cannot make this work on initialization. I tried to work around this issue by outlining every button by default in their constructor, however this will outline every button red, even when their text value doesn't require them to be.
How can I achieve my initial goal?
Many thanks in advance!
It's been a while but if I recall correctly what I ended up doing was:
Changing the new Text-Property of my custom Button to CText and
Making sure that I have Mode=TwoWay activated for any Element, that doesn't have it enabled by default. (Look up Binding modes on msdn for more)
making CText a bindable property of CButton
My custom button now looks the following:
using System;
using System.Collections.Generic;
using System.Text;
using Xamarin.Forms;
namespace EORG_Anton.Model
{
public class CButton : Button
{
public static readonly BindableProperty CTextProperty =
BindableProperty.Create(nameof(CText),
typeof(string),
typeof(CButton),
default(string),
BindingMode.TwoWay,
propertyChanged: OnTextChanged);
private static void OnTextChanged(BindableObject bindable, object oldValue, object newValue)
{
var control = (CButton)bindable;
var value = (string)newValue;
control.CText = value;
}
public string CText
{
get => base.Text;
set
{
base.Text = value;
TextChangedEvent(this, new EventArgs());
}
}
protected virtual void TextChangedEvent(object sender, EventArgs e)
{
EventHandler<EventArgs> handler = TextChanged;
handler(sender, e);
}
public event EventHandler<EventArgs> TextChanged;
}
}
I want to render xamarin forms view control into android textview.
Below customrenderer renders Android TextView on Android device with initial default text.
Now, If I add more text into it, this control would not grow in height but instead becomes scrollable to see the text not visible on screen.
On other way around, if I reduce text content, this control would not reduce in height and occupy the same space and show reduced text content on scree.
Issue : In this case of text change, this label should increase or reduce height on screen for Android. It is working fine on IOS as expected.
BindingText is bindable property to set text for this control.
CopyableLabelRenderer is my custom renderer class for Xamarin Forms
view.
Here is a sample code.
class CopyableLabelRenderer : ViewRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.View> e)
{
base.OnElementChanged(e);
try
{
var label = new TextView(MainApplication.Context);
label.SetTextIsSelectable(true);
label.LinksClickable = true;
label.Text = (e.NewElement as CopyableLabel).BindingText; // this line sets text into this label
SetNativeControl(label);
}
catch (Exception ex)
{
var msg = ex.Message;
}
}
protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged(sender, e);
if (e.PropertyName.Equals("BindingText"))
{
TextView textView = this.Control as TextView;
textView.Text = (Element as CopyableLabel).BindingText;
}
}
}
Here is a base class,
public class CustomLabel : View
{
public static readonly BindableProperty BindingTextProperty = BindableProperty.Create("BindingText", typeof(string),typeof(View),
string.Empty
);
public string BindingText
{
get
{
return (string)GetValue(BindingTextProperty);
}
set
{
SetValue(BindingTextProperty, value);
}
}
}
I have spent two days with another colleague investigating this. I was surprised as most solutions discussing this problem either have the wrong solution or a solution that works, I think, for the wrong reasons.
We have a custom button control that needs to raise a ServerClick event when it is pressed. Here is the summarised code:
public class MyButton : WebControl, IPostBackEventHandler
{
protected HtmlGenericControl _Button;
protected string _OnClick = "";
protected string _Name;
public event EventHandler ServerClick;
// etc...
public MyButton()
{
Width = Unit.Pixel(100);
_Button = new HtmlGenericControl("button");
Controls.Add(_Button);
}
protected override void Render(HtmlTextWriter writer)
{
_Button.Attributes.Add("id", string.IsNullOrEmpty(_Name) ? base.ID : _Name);
_Button.Attributes.Add("name", _Name);
// etc...
_OnClick = Page.ClientScript.GetPostBackEventReference(this, "");
_Button.Attributes.Add("onClick", _OnClick);
// etc...
ID = String.Empty;
Name = String.Empty;
AccessKey = String.Empty;
TabIndex = -1;
Width = Unit.Empty;
base.Render(writer);
}
protected virtual void OnServerClick()
{
if (this.ServerClick != null)
{
this.ServerClick(this, new EventArgs());
}
}
public void RaisePostBackEvent(string eventArgument)
{
this.OnServerClick();
}
}
On the browser end the code uses two of these buttons
<form>
<!-- etc ... -->
<div class="row actionBar">
<PGSC:MyButton Name="btnAccept" ID="btnAccept" LabelID="3244" TabIndex="70" runat="server" OnServerClick="AcceptClickHandler"/>
<PGSC:MyButton Name="btnClose" ID="btnClose" LabelID="349" OnClick="window.returnValue=frmMMD.hdnMmdId.value;window.close();" TabIndex="80" runat="server" />
</div>
</form>
The Problem:
The event is not raised on the accept button. Debugging reveals that RaisePostBackEvent is called but on the Close button, which does not have a ServerClick handler attached, hence nothing happens. No event handlers get called.
Notes:
The problem is not seen if there is only one MyButton on the page.
If the buttons are reordered such that the accept button is the last on the page, it starts working.
Moving the buttons outside of the form tag causes events to work as expected, and the accept buttons event handler is called correctly.
Implementing IPostBackDataHandler and calling RaisePostBackEvent() from IPostBackDataHandler::RaisePostDataChangedEvent() causes the event to be raised correctly on the accept button when inside the form tag.
Calling RegisterRequiresRaiseEvent(btnAccept) during PageLoad routes events correctly to the accept button.
The Question:
What is the correct solution from the ones that work above? Or is there another solution? We need it to work such that multiple buttons on the page can raise independent click events, without regard to their order or position on the page.
My Thoughts:
This problem seems to be discussed here: http://forums.asp.net/t/1074998.aspx?ASP+NET+RaisePostbackEvent+Issues
One is lead to believe that calling __doPostback() with the correct __EVENTTARGET should automatically route the event correctly to the button, but this is not happening in reality. It only happens if we also implement IPostBackDataHandler. Many solutions on the web seem to point to __doPostback, UniqueID etc as the culprit when actually implementing IPostBackDataHandler is what seemingly fixes the issue.
The Control implements IPostBackEventHandler but not IPostBackDataHandler. I think this is correct because the control does not need to raise any data driven events. So implementing IPostBackDataHandler to get it working seems like a hack.
Using RegisterRequiresRaiseEvent is unintuitive and besides will not work if multiple buttons on the page would like to raise events.
I wonder, how does an asp:Button do it?
I've simulated a situation.
Hope it helps.
There is the MyButton WebServerControl class:
[DefaultProperty("Text")]
[ToolboxData("<{0}:MyButton runat=server></{0}:MyButton>")]
public class MyButton : WebControl, IPostBackEventHandler
{
[Bindable(true)]
[Category("Appearance")]
[DefaultValue("")]
[Localizable(true)]
public string Text
{
get
{
String s = (String)ViewState["Text"];
return ((s == null) ? String.Empty : s);
}
set
{
ViewState["Text"] = value;
}
}
protected HtmlGenericControl _Button;
protected string _OnClick = "";
protected string _Name;
public event EventHandler ServerClick;
// etc...
public MyButton()
{
Width = Unit.Pixel(100);
_Button = new HtmlGenericControl("button");
Controls.Add(_Button);
}
protected override void Render(HtmlTextWriter writer)
{
_Button.Attributes.Add("id", string.IsNullOrEmpty(_Name) ? base.ID : _Name);
_Button.Attributes.Add("name", _Name);
// etc...
_OnClick = Page.ClientScript.GetPostBackEventReference(this, "");
_Button.Attributes.Add("onClick", _OnClick);
// etc...
ID = String.Empty;
//Name = String.Empty;
AccessKey = String.Empty;
TabIndex = -1;
Width = Unit.Empty;
base.Render(writer);
}
protected virtual void OnServerClick()
{
if (this.ServerClick != null)
{
this.ServerClick(this, new EventArgs());
}
}
public void RaisePostBackEvent(string eventArgument)
{
this.OnServerClick();
}
}
I then used my web server control in a project, let's say this is the default.aspx:
<div><cc1:MyButton ID="btnAccept" runat="server" TabIndex="70" OnServerClick="AcceptClickHandler" />
<cc1:MyButton ID="btnClose" Text="Close" Width="256px" LabelID="349" runat="server" TabIndex="80" /></div><div>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>
And in default.aspx.cs I've implemented simply the event:
protected void AcceptClickHandler(object sender, EventArgs e)
{
Label1.Text = DateTime.Now.ToLongTimeString();
}
The AcceptClickHandler fires only when clicking on the Accept button and not
on the Close button.
Sorry if I didnt get the problem right.
How do I override the TextBox property "Text" (getter) ?
According to MSDN the property is virtual so you should be able to override like so:
class MyTextBox : TextBox {
public override string Text
{
get { return /* return what you wish*/; }
set { /**/ }
}
}
You can also override one of the Render methods to have full control of generated HTML. Though perhaps you had something else in mind?
I would like to be able to do something like:
<ui:Tab Title="A nice title">
<TabTemplate>
<asp:Literal runat="server" ID="SetMe">With Text or Something</asp:Literal>
</TabTemplate>
</ui:Tab>
but also be able to do:
<ui:Tab Title="A nice title">
<TabTemplate>
<asp:DataList runat="server" ID="BindMe"></asp:DataList>
</TabTemplate>
</ui:Tab>
Answer code I eventually came up with:
[ParseChildren(true)]
public class Node : SiteMapNodeBaseControl, INamingContainer
{
private ITemplate tabTemplate;
[Browsable(false),
DefaultValue(null),
Description("The tab template."),
PersistenceMode(PersistenceMode.InnerProperty),
TemplateContainer(typeof(TabTemplate))]
public ITemplate TabTemplate
{
get { return tabTemplate; }
set { tabTemplate = value; }
}
protected override void CreateChildControls()
{
if (TabTemplate != null)
{
Controls.Clear();
TabTemplate i = new TabTemplate();
TabTemplate.InstantiateIn(i);
Controls.Add(i);
}
}
protected override void Render(HtmlTextWriter writer)
{
EnsureChildControls();
base.Render(writer);
}
}
public class TabTemplate : Control, INamingContainer
{
}
The ParseChildren attribute tells .NET whether to treat your control's children as properties or as controls. For your first example, you want to treat children as controls, so add
[ ParseChildren(ChildrenAsProperties = false) ]
For the second, you want ChildrenAsProperties=true, and a TabTemplate property of type ITemplate. There's some plumbing involved after that, which this MSDN sample describes. It doesn't add a lot of value if you only need one template, though.