【原创】ASP.NET 学习(2)

Abstract:

通过一个简单的 web application， 学习以下内容：

(1) ListView control

(2) User control

(3) Handle ViewState in User control

(4) FindControl() usage, especially when there is a Master page.

本文主要讲述第二部分，即User Control的用法

需求背景：

如果想把列Pass Rate由现在的单纯的数字表示转换成进度条显示，该怎么办?

 

====>

这个进度条可以通过创建一个Web User Control来实现。

1. 首先给项目增加一个Web User Control 文件 PassRateProgressBar.ascx

  

2. 在PassRateProgressBar.aspx中增加下面代码，

   因为需要根据数值的不同调整进度条的绘制，因此div的style需要动态设定，所以需要在code behind的文件中实现相应的方法。

<div>
    <table>
    <tr>
      <td style="border-0">
        <div style="<%=GetContainerStyle()%>">
            <div style="<%=GetPrograssStyle()%>"></div>
        </div>
      </td>
      <td style="border-0"><span><%=Percentage%></span></td>
    </tr>
    </table>
</div>

3. 对应的PassRateProgressBar.aspx.cs文件中相关代码如下，

public string Width { get; set; }

public string Height { get; set; }

public string Percentage { get; set; }

public string GetContainerStyle()
{
    if (string.IsNullOrEmpty(Width))
    {
        Width = "100px";
    }

    return string.Format("border:solid 1px #b4b4b4; text-align:left; {0}", Width);
}

public string GetPrograssStyle()
{
    if (string.IsNullOrEmpty(Percentage))
    {
        Percentage = "0";
    }

    if (string.IsNullOrEmpty(Width))
    {
        Width = "100px";
    }

    if (string.IsNullOrEmpty(Height))
    {
        Height = "20px";
    }

    string aStyle = string.Format("background-color:Green; height:{0};", Height);
    try
    {
        int aWidth = int.Parse(Width.Substring(0, Width.Length - 2));
        double aPercent = double.Parse(Percentage.TrimEnd(' ', '%'));
        double aProgWidth = (aPercent * aWidth) / 100;
        aProgWidth = aProgWidth < 0 ? 0 : aProgWidth;
        aProgWidth = aProgWidth > aWidth ? aWidth : aProgWidth;

        return string.Format("{0} {1}px", aStyle, aProgWidth);
    }
    catch
    {
        return aStyle;
    }
}

4. 把这个自定义的控件加入到default.aspx 页面中，首先需要在default.aspx页面中注册这个控件，然后才可以用

   <%@ Register Src="~/PassRateProgressBar.ascx" TagPrefix="local" TagName="ProgressBar"%>

5.  把原来的Pass Rate列改成用这个自定义的控件来代替

<td>

<local:ProgressBar runat="server" Width="80px" Height="15px" Percentage='<%# Eval("PassRate") %>'/>

</td>

  因为这个也是服务器端控件，需要加上 runat="server" 

  在step 4中，设置了这个空间的TagPrefix和TagName，所以这里面可以像用其他标准ASP.NET Server Control那样来使用这个自定义的control.

至此，开篇提到的需求基本满足了，但是这个自定义控件还有一个问题没有解决，就是状态保存问题。这个问题在下一篇中解决。

-- To Be Continued --