asp.net中利用ajax获取动态创建表中文本框的值
asp.net中利用ajax获取动态创建表中文本框的值
发布时间:2016-12-29 来源:查字典编辑
摘要:假设现在主表为公司表(公司ID,公司名称,公司类型,公司规模),从表为部门表(部门ID,公司ID,经理,联系电话),现在一个公司有四个部门,...

假设现在主表为公司表(公司ID,公司名称,公司类型,公司规模),从表为部门表(部门ID,公司ID,经理,联系电话),现在一个公司有四个部门,要在同一个页面上录入公司信息以及四个部门的信息,如何动态创建部门信息录入口,以及如何获取数据存储到数据库中,请看下面的代码。

页面HTML代码及js脚本

代码

复制代码 代码如下:

<%@ Page Language="C#" AutoEventWireup="true" Codebehind="Default.aspx.cs" Inherits="WebApp._Default" %>

<!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>Untitled Page</title>

<script language="javascript" type="text/javascript">

function addRow()

{

var tbl = document.getElementById("tbl");

var rows = tbl.rows.length;

var tr = tbl.insertRow(rows);

var td;

for(var i=0;i<4;i++)

{

td = tr.insertCell(i);

if(i==3)

td.innerHTML = "<a id='a"+rows+"' href='#' onclick='delRow(this)'>删除</a>";

else

td.innerHTML = "<input id='txt"+rows+i+"' type='text' />";

}

}

function delRow(obj)

{

var tbl = document.getElementById("tbl");

tbl.deleteRow(obj.parentNode.parentNode.rowIndex);

}

function getPageData()

{

var companyName = document.getElementById("txtCompanyName");

var companySize = document.getElementById("txtCompanySize");

var companyType = document.getElementById("ddlCompanyType");

var tbl = document.getElementById("tbl");

var txt;

var datas = new Array(tbl.rows.length-1);

for(var i=1;i<tbl.rows.length;i++)

{

txt = tbl.rows[i].getElementsByTagName("input");

datas[i-1] = txt[0].value +","+ txt[1].value+","+ txt[2].value;

}

PageMethods.GetData(companyName.value,companySize.value,companyType.options[companyType.selectedIndex].value, datas, showResult);

}

function showResult(msg)

{

alert(msg);

}

</script>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>

<table>

<tr>

<td>

公司名称:</td>

<td>

<asp:TextBox ID="txtCompanyName" runat="server"></asp:TextBox></td>

<td>

公司规模:</td>

<td>

<asp:TextBox ID="txtCompanySize" runat="server"></asp:TextBox></td>

<td>

公司类型:</td>

<td>

<asp:DropDownList ID="ddlCompanyType" runat="server">

</asp:DropDownList></td>

</tr>

</table>

<input id="btnAddRow" type="button" value="新增一行" />

<table id="tbl">

<tr>

<td>

部门</td>

<td>

电话</td>

<td>

经理</td>

<td>

</td>

</tr>

<tr>

<td>

<input id="txt10" type="text" /></td>

<td>

<input id="txt11" type="text" /></td>

<td>

<input id="txt12" type="text" /></td>

<td>

<a id="a1" href='#'>删除</a></td>

</tr>

</table>

<input id="btnOK" type="button" value="确定" />

<br />

</form>

</body>

</html>

后置代码

代码

复制代码 代码如下:

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Collections.Generic;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Text;

using System.Web.UI.HtmlControls;

namespace WebApp

{

public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

//绑定公司类型

ddlCompanyType.Items.Add(new ListItem("国营企业", "1"));

ddlCompanyType.Items.Add(new ListItem("民营企业", "2"));

ddlCompanyType.Items.Add(new ListItem("外资企业", "3"));

ddlCompanyType.SelectedValue = "1";

}

}

[System.Web.Services.WebMethod]

public static string GetData(string companyName, string companySize, string companyType, string[] depts)

{

StringBuilder buider = new StringBuilder();//显示一下提取到的数据

buider.AppendLine(string.Format("公司名称:{0}", companyName));

buider.AppendLine(string.Format("公司规模:{0}", companySize));

buider.AppendLine(string.Format("公司性质:{0}", companyType));

CompanyInfo info = new CompanyInfo(companyName, companySize, companyType);//将数据插入到公司实体对象中

List<DepartmentInfo> infos = new List<DepartmentInfo>();

DepartmentInfo info1 = null;

string[] temp;

for (int i = 0; i < depts.Length; i++)

{

temp = depts[i].Split(new char[] { ',' });

buider.AppendLine(string.Format("部门:{0},经理:{1},电话:{2}", temp[0], temp[1], temp[2]));

info1 = new DepartmentInfo();

info1.DeptName = temp[0];

info1.Mamanger = temp[1];

info1.Phone = temp[2];

infos.Add(info1);//将数据插入到部门实体对象List集合中

}

//数据提取出来插入到数据库就是很简单的事情了。

return buider.ToString();

}

}

public class CompanyInfo

{

private string _companyName;

private string _companySize;

private string _companyType;

public string CompanyType

{

get { return _companyType; }

set { _companyType = value; }

}

public string CompanyName

{

get { return _companyName; }

set { _companyName = value; }

}

public string CompanySize

{

get { return _companySize; }

set { _companySize = value; }

}

public CompanyInfo()

{ }

public CompanyInfo(string companyName,string companySize,string companyType)

{

this._companyName = companyName;

this._companySize = companySize;

this._companyType = companyType;

}

}

public class DepartmentInfo

{

private string _deptName;

private string _mamanger;

private string _phone;

public string Phone

{

get { return _phone; }

set { _phone = value; }

}

public string Mamanger

{

get { return _mamanger; }

set { _mamanger = value; }

}

public string DeptName

{

get { return _deptName; }

set { _deptName = value; }

}

public DepartmentInfo()

{

}

}

}

首先是用JS实现动态新增一行、删除指定行的操作,然后利用AJAX的PageMethod方式,调用后台代码实现数据提取,然后把数据装载到公司实体对象与部门实体对象集合中,提交到数据库(这部分没有去实现,不用多说了,大家都会)。其中需要注意几个方面

、必须在 ScriptManager 设置 EnablePageMethods="true",这样才能使用PageMethod方式

、在JS中调用的服务端函数必须加上[System.Web.Services.WebMethod]

其它的代码太简单,就不用一一说明。

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新asp.net教程学习
热门asp.net教程学习
编程开发子分类