ASP.NET Web Forms-数据绑定

们可以使用数据绑定（Data Binding）来完成带可选项的列表，这些可选项来自某个导入的数据源，比如数据库、XML 文件或者脚本。

数据绑定

下面的控件是支持数据绑定的列表控件：

asp:RadioButtonList
asp:CheckBoxList
asp:DropDownList
asp:Listbox

以上每个控件的可选项通常是在一个或者多个 asp:ListItem 控件中定义，如下：

<html>

<body>

<asp:RadioButtonList id="countrylist" runat="server">

<asp:ListItem value="N" text="Norway" />

<asp:ListItem value="S" text="Sweden" />

<asp:ListItem value="F" text="France" />

<asp:ListItem value="I" text="Italy" />

</asp:RadioButtonList>

</form>

</body>

</html>

然而，我们可以使用某种独立的数据源进行数据绑定，比如数据库、XML 文件或者脚本，通过数据绑定来填充列表的可选项。

通过使用导入的数据源，数据从 HTML 中分离出来，并且对可选项的修改都是在独立的数据源中完成的。

在下面的三个章节中，我们将描述如何从脚本化的数据源中绑定数据。

一篇我们学习了如何使用zTree对静态数据进行绑定并显示。但是实际运用中数据都是数据库或者经过计算后得到的，所以这一次我们将上次的Demo改为动态绑定。

数据表如下，其中平pId为0的是根节点

上一次讲过zTree的回调事件中可以有许多函数，那么我们就利用点击节点的回调函数进行动态绑定。但是问题来了，首次加载时网页上并没有节点，那么我们如何实现点击节点加载数据呢？思路是这样的，首次加载时用ajax向后台发送一个空请求，点击节点时ajax发送点击节点的id。后台收到请求，将请求参数取出，传入数据库查询方法，此时进行判断，若参数为空说明是首次加载，则执行的sql语句是select * from demo where pId='0' 即取出根节点，然后返回，而参数不为空则说明是点击节点发出的请求，此时sql语句是select * from demo where pId='"+id+"'" 即取出父节点是我们点击节点的节点。

下面上代码

额，先看效果图吧

前台

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Insert title here</title>

</head>

</div>

</body>

var treeNodes;

var setting = {

//外观

view: {

showIcon: true, //设置是否显示节点图标

showLine: true, //设置是否显示节点与节点之间的连线

showTitle: true, //设置是否显示节点的title提示信息

fontCss : {color:"black",size:30}

//异步

async:{

enable: true,//true代表异步

url: "/Demo/DataProcessing",//异步获取数据的地址

autoParam: ["id=id"]//传递id

//数据类型

data: {

simpleData: {

enable: true, //设置是否启用简单数据格式（json格式）

idKey: "id", //设置启用简单数据格式时id对应的属性名称（对应json数据中的key）

pidKey: "pId" //设置启用简单数据格式时parentId对应的属性名称,ztree根据id及pid层级关系构建树结构

}

//回调事件

callback: {

//点击节点事件

onClick: function(event, treeId, treeNode, clickFlag) {

// 判断是否父节点，是父节点则ajax向后台发送节点名称以获取子文件

if(treeNode.isParent){

//判断节点是否折叠，若已折叠则请求子节点的数据，返回后展开

if(treeNode.collapse==true){

//ajax提交请求

$.ajax({

url: "/Demo/DataProcessing",//请求的action路径

type:"post", //提交方式

async:false,//同步

dataType:"json",//数据格式是json

data:{'id':treeNode.id}, //传递被点击节点的id

error: function(){//请求失败后执行的事件

//请求成功后执行事件

success:function(data)

{

var jsondata= data;

//json为空说明没有子节点，不用执行操作

if(jsondata == null || jsondata == ""){ }

//否则子节点添加到父节点

else{

var treeObj = $.fn.zTree.getZTreeObj("demotree");

var parentZNode = treeObj.getNodeByParam("name",treeNode.name, null);//获取指定父节点

newNode = treeObj.addNodes(parentZNode,jsondata, false);

}

});

}

};

//首次加载用ajax请求初始化

$(function(){

$.ajax({

async : false,

cache:false,

type: 'POST',

dataType : "json",

url: "/Demo/DataProcessing",//请求的action路径

error: function () {//请求失败处理函数

alert('请求失败');

success:function(data){ //请求成功后处理函数。

treeNodes = data; //把后台封装好的简单Json格式赋给treeNodes

}

});

var zTree;

$(document).ready(function(){

$.fn.zTree.init($("#treeDemo"), setting, treeNodes);

});

</script>

</html>

后台servlet

package myServlet;

import java.io.IOException;

import java.util.List;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import Db.DbOperate;

import Model.Demo;

import com.alibaba.fastjson.JSON;

/**

* Servlet implementation class DataProcessing

@WebServlet("/DataProcessing")

public class DataProcessing extends HttpServlet {

private static final long serialVersionUID = 1L;

/**

* @see HttpServlet#HttpServlet()

public DataProcessing() {

super();

// TODO Auto-generated constructor stub

}

/**

* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

// TODO Auto-generated method stub

}

/**

* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

// TODO Auto-generated method stub

String id=request.getParameter("id");

List<Demo> list;

try {

list = new DbOperate().getDemo(id);

String jsonArr = JSON.toJSONString(list);

System.out.println(jsonArr);

//response.setContentType("application/json; charset=UTF-8");

response.setCharacterEncoding("UTF-8");

response.getWriter().print(jsonArr);

} catch (Exception e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

数据库查询

package Db;

import java.sql.Connection;

import java.sql.DriverManager;

import java.sql.ResultSet;

import java.sql.Statement;

import java.util.ArrayList;

import java.util.List;

import Model.Demo;

public class DbOperate {

private static String url = "jdbc:mysql://localhost:3306/dir?rewriteBatchedStatements=true";

private static String user = "root";

private static String password = "";

public List<Demo> getDemo(String id) throws Exception {

Class.forName("com.mysql.jdbc.Driver");

System.out.print("!!!!!!!!!");

Connection conn = DriverManager.getConnection(url, user, password);

List<Demo> list = new ArrayList<Demo>();

Statement s = null;

String sql;

if(id==null||id==""){

sql= "select * from demo where pId='0'";

}

else{

sql= "select * from demo where pId='"+id+"'";

}

s = conn.createStatement();

ResultSet rs = s.executeQuery(sql);

while (rs.next()) {

list.add(new Demo(rs.getString("id"), rs.getString("name"), rs.getString("pId"), rs.getInt("isParent")));

}

if (s != null) {

s.close();

}

if (conn != null) {

conn.close();

}

return list;

}

实体类

package Model;

public class Demo {

private String id;

private String name;

private String pId;

private int isParent;

public Demo(String id, String name, String pId, int isParent) {

super();

this.id = id;

this.name = name;

this.pId = pId;

this.isParent = isParent;

}

public String getId() {

return id;

}

public void setId(String id) {

this.id = id;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

public String getpId() {

return pId;

}

public void setpId(String pId) {

this.pId = pId;

}

public int getIsParent() {

return isParent;

}

public void setIsParent(int isParent) {

this.isParent = isParent;

}

源码可以私信获取，谢谢支持

台拖一个Gridview，在拖一个导出excel的按钮，给这个按钮添加事件
后台代码：

using BLL;
using Model;

namespace Web
{
    public partial class ExcelOperate : System.Web.UI.Page
    {
        private StudentBLL bll = new StudentBLL();
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                Bind();
            }
        }

        //绑定数据
        private void Bind()
        {
            GridView1.DataSource = bll.GetAllStu(null);
            GridView1.DataBind();
        }
        #region 导出到excel

        //导出excel
        protected void btnExcelout_Click(object sender, EventArgs e)
        {
            string style = @"<style> .text { mso-number-format:\@; } </script> "; //设置格式
            Response.ClearContent();
            Response.ContentEncoding = Encoding.GetEncoding("gbk");
            Response.AddHeader("content-disposition", "attachment;filename=ouput.xls");
            Response.ContentType = "application/excel";
            StringWriter sw = new StringWriter();
            HtmlTextWriter htw = new HtmlTextWriter(sw);
            GridView1.RenderControl(htw);
            Response.Write(style);//注意
            Response.Write(sw.ToString());
            Response.End();
        }
        //注意：必须覆盖此方法
        public override void VerifyRenderingInServerForm(Control control)
        {
            //base.VerifyRenderingInServerForm(control);
        }
        //解决数字字符串显示不完全
        protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            // e.Row.Cells[3].Attributes.Add("class", "text");//在数据绑定中设置格式
            //哪一列需要显示文本的，加上下面这句话即可
            e.Row.Cells[3].Attributes.Add("style", "vnd.ms-excel.numberformat:@");
        } 
        #endregion
    }
}

页面效果：

导入Excel并保存到数据库：
前台需要拖一个FileUpload上传控件，一个导入excel按钮，给其添加事件：

//导入excel数据
        protected void btnExcelIn_Click(object sender, EventArgs e)
        {
            string filepath = string.Empty;
            string getErrormg = string.Empty;
            DataTable dt=new DataTable();
            if (!fuFile.HasFile)
            {
                Response.Write("<script>alert('请选择你要导入的Excel文件');</script>");
                return;
            }
            //获取文件的后缀名
            string fileExt = System.IO.Path.GetExtension(fuFile.FileName);
            if (fileExt != ".xls")
            {
                Response.Write("<script>alert('文件类型错误！');</script>");
                return;
            }
            //获取绝对路径
            filepath = fuFile.PostedFile.FileName;
            string conn = "Provider=Microsoft.Jet.OLEDB.4.0;Extended Properties=\"Excel 8.0;HDR=Yes;IMEX=1\";Data Source=" + filepath;
            OleDbConnection excelCon = new OleDbConnection(conn);
            //Excel文件里面工作表名 默认为Sheet1,后面需要加上$符号[工作表名称$]切记，不然会报错
            OleDbDataAdapter odda = new OleDbDataAdapter("SELECT * FROM [Sheet1$]", excelCon);
            try
            {
                odda.Fill(dt);
            }
            catch (Exception ex)
            {
                Response.Write(ex.Message);
                Response.Write("<script>alert('" + ex.Message + "！')</script>");
            }
            finally
            {
                excelCon.Close();
                excelCon.Dispose();
            }
            //将数据写到数据库里面
            try
            {
              
                for (int i = 0; i < dt.Rows.Count; i++)
                {
                    Studnet stu=new Studnet();
                    stu.C_id = Convert.ToInt32(dt.Rows[i]["c_id"]);
                    stu.No = dt.Rows[i]["no"].ToString();
                    stu.Name = dt.Rows[i]["name"].ToString();
                    stu.Gender = dt.Rows[i]["gender"].ToString() == "男" ? true : false;
                    stu.Age = Convert.ToInt32(dt.Rows[i]["age"].ToString());
                    bll.InsertStu(stu);
                }

            }
            catch (Exception ex)
            {

                getErrormg = ex.Message;
                Response.Write(ex.Message);
            }

            if (getErrormg == "")
            {
                Response.Write("<script>alert('导入Excel文件成功！')</script>");
                Bind();
            }
            else { Response.Write("<script>alert('导入Excel文件失败！')</script>"); }

        }

Excel和导入后的页面效果：

数据库在导入excel数据之前和时候的效果：

这里要注意几个地方，一般导出excel的时候，数字文本会把前面的0都省略掉了，这里需要注意：红色代码片段，导入的时候，也有个***红红红色***标记码块要注意
以下是前台完整代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ExcelOperate.aspx.cs" Inherits="Web.ExcelOperate" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" runat="server" OnRowDataBound="GridView1_RowDataBound"></asp:GridView>
        <br />
        <asp:Button ID="btnExcelout" runat="server" OnClick="btnExcelout_Click" Text="导出到Excel" />
        <br />
        <asp:FileUpload ID="fuFile" runat="server" />
        <asp:Button ID="btnExcelIn" runat="server" OnClick="btnExcelIn_Click" Text="导入Excel数据" />
    </div>
    </form>
</body>
</html>

以下是后台完整代码：

在线咨询

上一篇：HTML 5 - 交互
下一篇：使用HTML写一个注册页面

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

ASP.NET Web Forms-数据绑定

您的项目需求