使用主题样式创建动态的 ASP.NET服务器控件

2015-1-4 15:34| 发布者: joejoe0332| 查看: 1202| 评论: 0|原作者: daxiang, 白文|来自: oschina

摘要: 这篇文章会向你展示如何添加、动态创建ASP.NET 服务器控件，并把控件添加到html div标签中。创建你的ASP.NET web应用（工程），并引入你需要的主题（模板）。按你的要求，创建一个web表单、设计页面布局、创建一个 ...

下载demo - 48.9 KB

简介

　　这篇文章会向你展示如何添加、动态创建ASP.NET 服务器控件，并把控件添加到html div标签中。创建你的ASP.NET web应用（工程），并引入你需要的主题（模板）。按你的要求，创建一个web表单、设计页面布局、创建一个id为myFormContainer的容器div，并设置div属性server control-runat=”server”。在这个div中，我们将要动态添加子div、label、textbox、button等控件。

动态创建ASP.NET服务器控件

　　所有的控件列表从 Controls json对象（一个 List）中读取。你可以创建一个 json文件，使用 C# 类反序列化 json对象，轻松地动态创建多个带有必需属性如 id、 text等的控件。你也可以尝试控制从数据库中读取的列表。

类、方法和事件

第一步：创建基础类

public class Control
{
    public string ID { get; set; }
    public string LabelText { get; set; }
}
public class ControlList
{
    public List<control> Controls { get; set; }
}

第二步：控件列表（从JSON对象或者数据表中获取）

1

2

3

4

5

// create the div to add form elements from a controls list
string json = @"{Controls:[{ID:&apos;UserName&apos;, LabelText:&apos;User Name&apos;},
{ID:&apos;EmailId&apos;, LabelText:&apos;Email Address&apos;},{ID:&apos;Password&apos;, LabelText:&apos;Password&apos;},
{ID:&apos;Phone&apos;, LabelText:&apos;Phone Number&apos;}]}";
var controls = new System.Web.Script.Serialization.JavaScriptSerializer().Deserialize<controllist>(json);

第三步：创建方法绑定控件

/// <summary>
/// Create & Add Controls to the container div
/// </summary>
/// <param name="controls"></param>
private void CreateControls(ControlList controls)
{
    foreach (var control in controls.Controls)
    {
        //Create Group Container Div
        HtmlGenericControl div = new HtmlGenericControl("div");
        div.Attributes.Add("class", "form-group");
        // create label and add to the div          
        div.Controls.Add(new Label() { Text = control.LabelText,
        AssociatedControlID = control.ID, CssClass = "col-md-2 control-label" });
        //create the div to add controls eg. textbox, checkbox etc.
        HtmlGenericControl divInner = new HtmlGenericControl("div");
        divInner.Attributes.Add("class", "col-md-10");
        //Create TextBox
        divInner.Controls.Add(new TextBox() { ID = control.ID, CssClass = "form-control" });
        //Create Validator
        divInner.Controls.Add(new RequiredFieldValidator() 
        { ControlToValidate = control.ID, CssClass = "text-danger", 
        ErrorMessage = "The user name field is required." });
        div.Controls.Add(divInner);
        Container.Controls.Add(div);
    }
    //create button with event and add to the div
    var button = new Button { ID = "btnClick", Text = "Create" };
    button.Click += btnClick_OnClick;
    Container.Controls.Add(button);
}

第四步：调用CreateControl()方法初始化OnInit事件

// <summary>
/// Load Controls on OnInit event
/// </summary>
/// <param name="e"></param>
override protected void OnInit(EventArgs e)
{
    // create the div to add form elements from a controls list
    string json = @"{Controls:[{ID:&apos;UserName&apos;, LabelText:&apos;User Name&apos;},
    {ID:&apos;EmailId&apos;, LabelText:&apos;Email Address&apos;},{ID:&apos;Password&apos;, LabelText:&apos;Password&apos;},
    {ID:&apos;Phone&apos;, LabelText:&apos;Phone Number&apos;}]}";
    var controls = new System.Web.Script.Serialization.JavaScriptSerializer().Deserialize<controllist>(json);
    CreateControls(controls); // Method with controls list param
}

酷毙

雷人

鲜花

鸡蛋

漂亮

收藏分享邀请

上一篇：让HAProxy 1.5感知MySQL复制的延迟下一篇：为设计师准备的14个免费的PhotoShop插件

快毕业了，没工作经验，
找份工作好难啊？
赶紧去人才芯片公司磨练吧!!

帐号		自动登录	找回密码
密码			注册

使用主题样式创建动态的 ASP.NET服务器控件

最新评论