个人中心
gpt4 book ai didi

asp.net中利用ajax获取动态创建表中文本框的值

转载 作者：qq735679552 更新时间：2022-09-29 22:32:09 28 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章asp.net中利用ajax获取动态创建表中文本框的值由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

假设现在主表为公司表(公司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="新增一行" onclick="addRow();" />  <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='#' onclick="delRow(this)">删除</a></td>  </tr>  </table>  <input id="btnOK" type="button" value="确定" onclick="getPageData();" />  <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中利用ajax获取动态创建表中文本框的值的文章就讲到这里了,如果你想了解更多关于asp.net中利用ajax获取动态创建表中文本框的值的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

28 4 0
文章推荐： aspnet_regsql.exe 工具注册数据库的图文方法
文章推荐： ASP.NET Sql Server安装向导（aspnet_regsql.exe）错误解决一例
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com