Tuesday, April 8, 2014

Asp.Net (Html 5) Button

retracting what i wrote lately, i had postback issues, seemed that the simple sln was the thing:

[ParseChildren(false)]
[PersistChildren(true)]
public class html5Button : Button
{
        protected override string TagName
        {
            get { return "button"; }
        }

        protected override HtmlTextWriterTag TagKey
        {
            get { return HtmlTextWriterTag.Button; }
        }
       
        // Create a new implementation of the Text property which
        // will be ignored by the parent class, giving us the freedom
        // to use this property as we please.
        public new string Text
        {
            get { return ViewState["NewText"] as string; }
            set { ViewState["NewText"] = HttpUtility.HtmlDecode(value); }
        }
       
        protected override void OnPreRender(System.EventArgs e)
        {
            base.OnPreRender(e);
            // I wasn't sure what the best way to handle 'Text' would
            // be. Text is treated as another control which gets added
            // to the end of the button's control collection in this
            //implementation
            LiteralControl lc = new LiteralControl(this.Text);
            Controls.Add(lc);
            // Add a value for base.Text for the parent class
            // If the following line is omitted, the 'value'
            // attribute will be blank upon rendering
            base.Text = UniqueID;
        }
       
        protected override void RenderContents(HtmlTextWriter writer)
        {
            RenderChildren(writer);
        }

}

phone user control

we developed a nice easy-to-custom UC for phone with prefix:

i must say that the MyForm:TextBoxField are custom WebControls that renders like this:
<span>
    <label>
    <input>
    <validator>
    <validator>
    ...
<span>

so aspx/html is

<div id="IecPhoneField" class="PhoneField" runat="server">

   <MyForm:TextBoxField ID="txtFullPhone" Required="True" CssClass="PhoneFieldPhone" ValidationType="Phone" runat="server" RequiredError="required" />

   <span class="makaf">-</span>

   <MyForm:TextBoxField runat="server" ID="PhonePrefix" CssClass="PhoneFieldPrefix" ValidationType="RegExp" FormatError="יש למלא קידומת תקנית" RegExp="^(0[0-9]{1,2})$" Required="true" MaxLength="3"/>

</div>

and cs is

public partial class PhoneField : UserControl
{
 
public string ValidationGroup
  {
 
  get { return (string)ViewState["ValidationGroup"]; }
    set { ViewState["ValidationGroup"] = value; }
  }
 

  public string CssClass
  {
 
  get { return (string)ViewState["CssClass"]; }
    set { ViewState["CssClass"] = value; }
  }
 

  public string Label
  {
 
  get { return (string)ViewState["Label"]; }
    set { ViewState["Label"] = value; }
  }


 
public string Prefix { get { return txtPhonePrefix.Text; } }

  public string Phone { get { return txtFullPhone.Text; } }

  protected void Page_Load(object sender, EventArgs e)
  {
 
  if (!string.IsNullOrEmpty(CssClass))
    PhoneField.Attributes["class"] = PhoneField.Attributes["class"] + " " + CssClass;
    if (!string.IsNullOrEmpty(ValidationGroup))
      txtFullPhone.ValidationGroup = txtPhonePrefix.ValidationGroup = ValidationGroup;
   
if (!string.IsNullOrEmpty(Label))
      txtFullPhone.Label = Label;
  }
}
 


is if you want basic CSS

.PhoneField > span { display:table-cell; }

.PhoneField .PhoneFieldPhone label { display:inline-block; width:210px; }

.PhoneField .PhoneFieldPhone { width:400px; margin-left:0; }

.PhoneField .PhoneFieldPrefix input { width:25px; }

.PhoneField .PhoneFieldPhone input { width:170px; }

.PhoneField .makaf { padding-left:13px; padding-right:13px; }