使用主题样式创建动态的 ASP.NET 服务器控件 已翻译 100%

oschina 投递于 2014/11/05 07:07 (共 2 段, 翻译完成于 11-05)
阅读 1864
收藏 22
0
加载中

下载demo - 48.9 KB

Create Dynamic ASP.NET Server Control

简介

这篇文章会向你展示如何添加、动态创建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等的控件。 你也可以尝试控制从数据库中读取的列表。

daxiang
daxiang
翻译于 2014/11/05 07:56
1

类、方法和事件

第一步:创建基础类

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

第二步:控件列表(从JSON对象或者数据表中获取)

// 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
}

白文
白文
翻译于 2014/11/05 09:40
1
本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接。
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。
加载中

评论(2)

l
liaoxuewei
无法收藏?
影子明
影子明
hao d好东西
返回顶部
顶部