zoukankan      html  css  js  c++  java
  • 前台动态增加行,并将结果打印到XML文件

     <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处将值存入数据库。

  • 相关阅读:
    Jedis API操作Redis数据库
    Go开发环境安装与环境变量配置
    Java中使用md5进行hash运算
    oracle创建表空间、用户
    CentOS安装MySQL
    Go语言之快速排序
    软件包管理rpm和yum
    第十一节:configParse模块
    redis数据库
    tcpdump命令
  • 原文地址:https://www.cnblogs.com/akingyao/p/2677516.html
Copyright © 2011-2022 走看看