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