ControlValueJson类:后台通过json数据为html标签赋值

1,ControlValueJson类:

内部一个成员变量public Dictionary<string, string> ControlValue = new Dictionary<string, string>();

用来保存标签的id和value;  方法ResponJson()返回json字符串。

 public class ControlValueJson
    {
        /// <summary>
        /// key控件id,value控件值
        /// </summary>
        public Dictionary<string, string> ControlValue = new Dictionary<string, string>();

        /// <summary>
        /// 输出json
        /// </summary>
        /// <returns></returns>
        public string ResponJson()
        {
            StringBuilder sb = new StringBuilder();
            sb.Append("var ControlValue={");
　　　　　　　//json标准是加双引号，不要加单引号
            foreach (string key in ControlValue.Keys)
            {
                if (ControlValue[key] == null)
                {
                    sb.Append("\""+key + "\":\"\",");
                }
                else
                {　　//\\r\\n是为了在C#中拼接换行符
                    sb.Append("\""+key + "\":" + "\"" + ControlValue[key].Replace("\r\n", "\\r\\n") + "\",");
                }
            }
            sb.Length -= 1;
            sb.Append("}");
            return sb.ToString();
        }
    }

2,前台aspx页面放置两个text标签,jquery遍历json对象为所有标签赋值.使用2种方法获取json对象:

(1)在前台script中放置一个asp:Literal标签,用来保存json变量。

(2)后台直接使用方法Page.ClientScript.RegisterStartupScript(type,key,script,addScriptTags)

将json对象输入到脚本中。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.TestPage.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script>
    
    <script type="text/javascript">
        $(function () {
            //ControlValue是后台返回的json变量名
            if (typeof (ControlValue) != "undefined") {
                $(":text").val();//清空所有text标签的值
                for (var control in ControlValue) {                   
                    $("#" + control + "").val(ControlValue[control]);
                }
            }
        });    
    </script>

</head>
<body>
    <form id="form1" runat="server">  

    <span>姓名:<input name="username" type="text" id="username"  /></span>
    <span>手机:<input name="userphone" type="text" id="userphone" /></span>
　　 <span>内容:<textarea rows="auto" cols="auto"  name="content" id="content"  ></textarea></span>
    </form>

    <!--下面的ltlControlValue用来保存后台返回的json数据-->  
    <script type="text/javascript">    
    <asp:Literal runat="server" ID="ltlControlValue" EnableViewState="false" ></asp:Literal>   
    </script> 

</body>
</html>

注意：asp:Literal是放置在script中的。

3,后台初始化一个ControlValueJson对象，添加key-value值，并且将结果赋值给前台控件,或直接输出到脚本。

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

namespace WebApplication1.TestPage
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            SetControlValue();
        }

        protected void SetControlValue()
        {
            ControlValueJson controlvalue = new ControlValueJson();
            controlvalue.ControlValue.Add("username",null);
            controlvalue.ControlValue.Add("userphone", "18790181111");
　　　　　　　 controlvalue.ControlValue.Add("content","王\r\n金河");
　　　　　　　　//直接将json字符串输入到页面脚本中,最后一个参数不写就会显示到前台，而不是写入脚本中            
            Page.ClientScript.RegisterStartupScript(this.GetType(), "key1", controlvalue.ResponJson(),true);

            //将json数据赋值给控件
            this.ltlControlValue.Text = controlvalue.ResponJson();       
           
        }
    }
}

 注意：(1)通过Page.ClientScript.RegisterStartupScript写入script中或者赋值给前台控件。

 

最后输出结果：

<script type="text/javascript">
var ControlValue={username:'',userphone:'18790181111',content:'王\r\n金河'}
</script>

 

 

 

posted @ 2012-12-13 13:02  金河  阅读(485)  评论(0)  编辑  收藏  举报