webform在指定的div中添加动态添加label,该怎么解决

webform在指定的div中添加动态添加label,该怎么解决,第1张

动态生成Asp.Net服务器控件,并取其值

C# codeprivate void LoadProperty(int cateId)

HtmlGenericControl span = new HtmlGenericControl()

for (int i = 0i <ds.Tables[0].Rows.Counti++)

{

StringBuilder strHtml = new StringBuilder()

if (i % 2 == 0)

{

strHtml.Append("<div >")

strHtml.Append("<div class=\"layout1\">")

}

else

{

strHtml.Append("<div >")

}

TextBox txt = new TextBox()

Label lbl = new Label()

HiddenField hdf = new HiddenField()//

lbl.ID = "lblProp" + i.ToString()

lbl.Text = ds.Tables[0].Rows[i]["PropName"].ToString() + ":"

txt.ID = "txtProp" + i.ToString()

hdf.ID = "hdfProp" + i.ToString()//

lbl.EnableViewState = true

txt.EnableViewState = true

hdf.EnableViewState = true//

LiteralControl lc = new LiteralControl(strHtml.ToString())

lc.EnableViewState = true

span.Controls.Add(lc)

span.Controls.Add(lbl)

span.Controls.Add(txt)

span.Controls.Add(hdf)//

if (i % 2 == 0)

{

span.Controls.Add(new LiteralControl("</div></div>"))

}

else

{

span.Controls.Add(new LiteralControl("</div>"))

}

}

动态生成的控件,当点击页面按钮时会刷新页面,所以,生成控件的方法不需要

if(!IsPostBack)

{

}

------解决方案--------------------

JScript code$(function(){

$("#addLabel").click(function(){

$("#divAddLabel").append("<label>添加的label<label/><br />")

})

})

JavaScript可以通过CreateElement方法动态创建标签,具体示例如下:

示例1:定义方法创建一个label标签

 

var createLabel = function(id, name, value) { 

    //新建lable标签

    var label_var = document.createElement("label") 

    //新建id属性

    var label_id = document.createAttribute("id") 

    label_id.nodeValue = id 

    //新建文本节点

    var label_text = document.createTextNode(value) 

    //为label标签添加属性和文本

    label_var.setAttributeNode(label_id) 

    var label_css = document.createAttribute("class") 

    label_css.nodeValue = "select_css" 

    label_var.setAttributeNode(label_css) 

    label_var.appendChild(label_text) 

    //返回新标签

    return label_var 

}

示例2:定义方法创建input标签(主要为Text),并为标签添加id,name,value,type 属性,并绑定事件

 

var createInput = function(id, name, value, type, width, height, event) { 

    var var_input = null 

    var input_event_attr_IE = ""

    //event表示希望绑定的事件,可能是多个,如果为多个,则拆分一下 

    if (event != null && event != "") { 

        var event_array_IE = event.toString().split('|') 

        for (var i = 0 i < event_array_IE.length i++) { 

        var event_IE = event_array_IE[i].split('==') 

        input_event_attr_IE += " " + event_IE[0] + "='' " 

    } 

    } 

    try {//定义变量实现IE6.0和IE7.0兼容。 

        var_input = document.createElement("<input " + input_event_attr_IE + ">") 

    } catch (e) { 

        var_input = document.createElement("input") 

    } 

    //定义id、name、type、value和style属性

    var input_id = document.createAttribute("id") 

    input_id.nodeValue = id 

    var input_name = document.createAttribute("name") 

    input_name.nodeValue = name 

    var input_type = document.createAttribute("type") 

    input_type.nodeValue = type 

    var input_value = document.createAttribute("value") 

    input_value.nodeValue = value 

    var input_style = document.createAttribute("style") 

    var input_style_str = "" 

    //设置宽和高

    if (width != null && width != "") { 

        input_style_str += "width:" + width + "px" 

    } else { 

        input_style_str += "width:30px" 

    } 

    if (height != null && height != "") { 

        input_style_str += "height:" + height + "px" 

    } 

    

    if (event != null && event != "") { 

        var event_array = event.toString().split('|') 

        //循环绑定事件

        for (var i = 0 i < event_array.length i++) { 

            var events = event_array[i].split('==') 

            var input_event = document.createAttribute(events[0]) 

            input_event.nodeValue = events[1] 

            var_input.setAttributeNode(input_event) 

        } 

    } 

    //添加属性

    var_input.setAttributeNode(input_type) 

    input_style.nodeValue = input_style_str 

    try { 

        var_input.setAttributeNode(input_style) 

    } catch (e) { 

        width = (width == null || width == "") ? "30" : width 

        var_input.setAttribute("width", width) 

        if (height != null && height != "") { 

            var_input.setAttribute("height", height) 

        } 

    } 

    //为标签添加属性

    var_input.setAttributeNode(input_id) 

    var_input.setAttributeNode(input_name) 

    var_input.setAttributeNode(input_value) 

    

    return var_input 

}


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11910653.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-19
下一篇 2023-05-19

发表评论

登录后才能评论

评论列表(0条)

保存