การ Highlight Control Input

         ตัวอย่างนี้ผมเจอในหนังสือ พัฒนาเว็บไซต์ด้วย ASP.NET 2.0 ผมคิดว่าน่าสนใจดี ถือเป็นลูกเล่นหนึ่งที่ทำให้เว็บของเราดูน่าสนใจ และช่วยให้ผู้ใช้งานทราบตำแหน่งเคอร์เซอร์ว่าอยู่ตรงไหน

    1. สร้างคลาสขึ้นมา 2 ตัว คือ Class BasePage และ Class Helpers (อยู่ในไฟล์ชื่อ BasePage.cs)

     

    2. เขียนโค้ดเพื่อสั่งให้วนลูปโดยเซ็ต Attribute “onfocus”,”onblur” กับ control กำหนดให้เรียกใช้ css class ชื่อ highlight

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public class BasePage : System.Web.UI.Page
{
    protected override void OnLoad(EventArgs e)
    {
        Helpers.SetInputControlsHighlight(this, "highlight", false);

        base.OnLoad(e);
    }
}
public static class Helpers
{
    public static void SetInputControlsHighlight(Control container, string className, bool onlyTextBoxs)
    {
        foreach (Control ctl in container.Controls)
        {
            if ((onlyTextBoxs && ctl is TextBox) || ctl is TextBox ||
                ctl is DropDownList || ctl is ListBox || ctl is CheckBox ||
                ctl is RadioButton || ctl is RadioButtonList || ctl is CheckBoxList)
            {
                WebControl wctl = ctl as WebControl;
                wctl.Attributes.Add("onfocus", string.Format("this.className='{0}';", className));
                wctl.Attributes.Add("onblur", "this.className='';");
            }
            else
            {
                if (ctl.Controls.Count > 0)
                {
                    SetInputControlsHighlight(ctl, className, onlyTextBoxs);
                }
            }
        }
    }
}

    3. ทำการ Inherits

    4. เขียน css

   5. ดูผลลัพธ์ ที่ได้

ref : http://www.wrox.com/WileyCDA/WroxTitle/ASP-NET-2-0-Website-Programming-Problem-Design-Solution.productCd-0764584642.html