<form id="form1" runat="server">
    <div>
        <input id="Button2" type="button" value="Save" onclick="ForData();" />
        <input id="Button1" type="button" value="Add" onclick="AddTr();" />
        <asp:Button ID="Button3" runat="server" Text="ClearSession" OnClick="Button3_Click" />
        <asp:Button ID="Button4" runat="server" Text="ExportXML" OnClick="Button4_Click" />
        <table id="tab">
            <tr>
                <td>
                    <input id="name_0" type="text" runat="server" />
                </td>
                <td>
                    <input id="sex_0" type="text" runat="server" />
                </td>
                <td>
                    <input id="age_0" type="text" runat="server" />
                </td>
                <td>
                    <input id="phone_0" type="text" runat="server" />
                </td>
            </tr>
        </table>
    </div>
    </form>

首先HTML文件如上,Add按钮点击触发如下事件,将在ID为tab的表中添加一个TR

           var i = 1; //定义的全局变量
function AddTr() {
var id = 'phone_' + i; var str = ' <tr><td>'; str += ' <input id="name_' + i + '" type="text" /></td><td>'; str += ' <input id="sex_' + i + '" type="text" /></td><td>'; str += ' <input id="age_' + i + '" type="text" /></td><td>'; str += ' <input id="phone_' + i + '" type="text" /></td></tr>'; $('#tab').append(str); i += 1; }

我们需要通过异步的方式将多组值通过Session保存到User用户信息类中User类只是简单的定义属性代码如下

public class User
    {
        private string _name;
        private string _sex;
        private int _age;
        private int _phone;
        public string Name
        {
            get { return _name; }
            set { _name = value; }
        }
        public string Sex
        {
            get { return _sex; }
            set { _sex = value; }
        }
        public int Age
        {
            get { return _age; }
            set { _age = value; }
        }
        public int Phone
        {
            get { return _phone; }
            set { _phone = value; }
        }
    }

通过User类我们将动态增加的数据放入List<User>中,通过ASHX文件来实现前台通过Jquery的Ajax

Ajax代码如下

 function ForData() {

            for (x = 0; x < i; x++) {

                var settings = {
                    name: $('#name_' + x + '').val(), sex: $('#sex_' + x + '').val(), age: $('#age_' + x + '').val(), phone: $('#phone_' + x + '').val()
                };
                var path = "/Handler1.ashx";
                $.ajax({
                    type: "Get",
                    // async: false,
                    url: path,
                    dataType: "json",
                    data: settings,
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {

                        ss = data;

                    },
                    error: function (err) {

                        ss = null;
                    }
                });
            }
        }

此处我是通过Get方法来实现,Get方法能传送2KB的量,对于有textarea的动态行应该不适用因为动态行不能建带有runnat="server"属性的控制,所以无法通过Form来得到前台的值,所以此处我只有Get方法来得值,Post方式取Form表单中的值我没有方式,希望有大虾给出思路

ashx文件代码如下

           context.Response.ContentType = "text/plain";
           string aa= context.Request.QueryString["id"];
           User model = new User();
           model.Name = context.Request.QueryString["name"];
           model.Sex = context.Request.QueryString["sex"];
           model.Age = Convert.ToInt32(context.Request.QueryString["age"]);
           model.Phone = Convert.ToInt32(context.Request.QueryString["phone"]);
           if (context.Session["aking"] == null)
           {
               List<User> lists = new List<User>();
               lists.Add(model);
               context.Session["aking"] = lists;
           }
           else
           {
               (context.Session["aking"] as List<User>).Add(model);
 
           }

至此动态添行并将值保存到session中已经完成,下面只需要打印到XML文本,具体实现代码如下

 protected void Button4_Click(object sender, EventArgs e)
        {
            List<User> lists = Session["aking"] as List<User>;
            if (lists == null) return;
            XmlDocument doc = new XmlDocument();

            XmlDeclaration xmldeclaration = doc.CreateXmlDeclaration("1.0","","yes");
            doc.PrependChild(xmldeclaration);

            XmlElement root = doc.CreateElement("Users");
            doc.AppendChild(root);
           
            foreach (User c in lists)
            {
                XmlElement First = doc.CreateElement("User");
                First.SetAttribute("ID", c.Name);
                root.AppendChild(First);
                XmlText text1 = doc.CreateTextNode(c.Name);
                XmlText text2 = doc.CreateTextNode(c.Sex);
                XmlText text3 = doc.CreateTextNode(c.Age.ToString());
                XmlText text4 = doc.CreateTextNode(c.Phone.ToString());

                XmlElement element1 = doc.CreateElement("Name");
                First.AppendChild(element1);
                element1.AppendChild(text1);

                XmlElement element2 = doc.CreateElement("Sex");
                First.AppendChild(element2);
                element2.AppendChild(text2);

                XmlElement element3 = doc.CreateElement("Age");
                First.AppendChild(element3);
                element3.AppendChild(text3);

                XmlElement element4 = doc.CreateElement("Phone");
                First.AppendChild(element4);
                element4.AppendChild(text4);
                
            }
            doc.Save(@"e://aking//User.xml");
            Console.Write(doc.OuterXml);
        }

    }

至此整个动态添加并打印到XML已经完成,如果有数据库的可以类比将值直接在ashx文件中将值存入数据库,省去session也可以在打印XML处将值存入数据库。

posted on 2012-09-09 15:44  aking96  阅读(445)  评论(0编辑  收藏  举报