WebForm 获取实体类的数据，填充页面(用AJAX异步获取值，和用session传值)

Ajax 2020-06-04

用AJAX异步的方式来获取数据，并在页面动态的展示数据

<1>

创建一个UserService类。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;

namespace ModelService
{
    public class UserService
    {
        public static string SelectDataToJson()
        {
            //将从数据库查询出来的数据保存到 一个DataTable中
            DataTable dt= sqlHelper.ExecuteDataTable("select * from T_User");

            //将这个dt表转换成Json格式 示例：{"Json":[{"Id":"1","UserName":"张三"}]}
            string JsonStr = DataTabletoJson.DtToJson("Json",dt);

            //返回这个Json格式的字符串
            return JsonStr;
        }
    }
}


<2>

创建一个Handler1.ashx (让AJAX请求从这里获得数据)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using 实体类.ModelService;

namespace 实体类
{
    /// <summary>
    /// Handler1 的摘要说明
    /// </summary>
    public class Handler1 : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/html";

            //调用UserService类下的SelectDataToJson()方法，获取到一个Json格式的字符串(字符串保存了执行sql语句查询到的数据)
            string str = UserService.SelectDataToJson();

            //将数据写到浏览器
            context.Response.Write(str);
             
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

<3>

WebForm1.aspx页面

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="实体类.WebForm1" %>
<!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></title>
    <script type="text/javascript" src="jquery-1.11.2.js"></script>
    <script type="text/javascript">

        <!--一个Post类型AJAX异步请求-->
        $.post("Handler1.ashx",function (strjson) { //strjson是请求成功后服务器返回的数据

            //strjson的值为{"Json":[{"Id":"1","UserName":"张三","Age":"25","Gender":"0"},{"Id":"2","UserName":"李四","Age":"26","Gender":"1"}]}

            var oJson = $.parseJSON(strjson); //将这个数据转换成Json格式

            //oJson.Json是获取key为Json这个对象的值；因为这个值为一个数组，那么.length就获取到了这个数组的长度(为2)
            var oJsonLength = oJson.Json.length;

            //遍历这个数组的长度（）
            for (var i = 0; i < oJsonLength; i++) {

                //当i=0的时候oJson.Json[i]就代表数组的第一个元素，这个元素又是一个Json对象。所以就可以通过.Id来获得数据了
                var tr = "<tr><td>" + oJson.Json[i].Id + "</td><td>" + oJson.Json[i].UserName + "</td><td>" + oJson.Json[i].Age + "</td><td>" + oJson.Json[i].Gender + "</td></tr>";

                $("#t1").append(tr); //将这个tr字符串添加到id为t1的这个Table中去
            }
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>

    <table id="t1" border="1px">
       <tr><td>编号</td><td>姓名</td><td>年龄</td><td>性别</td></tr>        
    </table>
    </div>   
    </form>
</body>
</html>


用Session传值的形式，将数据传递到WebForm.aspx页面来展示数据

<1>

首先创建一个实体类 User

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace 实体类
{
    public class User
    {       
        public int Id { get; set; }

        public string UserName { get; set; }

        public int Age { get; set; }

        public int Gender { get; set; }

    }
}

<2>

调用sqlHelper将这个查询出来的数据转换成一个 list对象（将查询出来的数据映射到实体类上）

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;

namespace 实体类.ModelService
{
    public class UserService
    {
        public static List<User>  SelectDataToEntity()
        {
            //通过查询数据库，将获取到的数据转换成一个list
            List<User> list = sqlHelper.SelectDataToList<User>("select * from T_User");
            return list;            
        }
    }
}

<3>

WebForm1.aspx.cs页面 （注意：WebForm1.aspx页面是继承WebForm1.aspx.cs类的）

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using 实体类.ModelService;

namespace 实体类
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender,EventArgs e)
        {
            //将获取到的list（List<User> lsit）存放到 Session里。然后可以在WebForm1.aspx页面中来遍历这个list 从而取到实体类的数据
            Session.Add("User",UserService.SelectDataToEntity());
        }
    }
}


<4>

WebForm1.aspx页面

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="实体类.WebForm1" %>
<!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></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <table border="1px">
    <% var list = (List<实体类.User>)Session["User"];%> <1--获取到这个key为User的Session，强转为List<实体类.User>类型-->
    <tr><td>编号</td><td>姓名</td><td>年龄</td><td>性别</td></tr>
    <% foreach( var r in list){ %> 
             
       <tr><td><%=r.Id %></td><td><%=r.UserName %></td><td><%=r.Age %></td><td><%=r.Gender %></td></tr>

    <% }%>
        
    </table>
    </div>   
    </form>
</body>
</html>

相关文章

ajax 上传文件项目下载
IE6是一个非常老旧的网页浏览器，虽然现在很少人再使用它，但...
ajax .post()
PHP中的count()函数是用来计算数组或容器中元素的个数。这个...
ajax 不返回值 写法
使用 AJAX（Asynchronous JavaScript and XML）技术可以在不...
ajax 下载文件 blob
Ajax（Asynchronous JavaScript and XML）是一种用于改进网页...
ajax 下载excel文件流
本文将介绍如何通过AJAX下载Excel文件流。通过AJAX，我们可以...
ajax .get .post
Ajax是一种用于客户端和服务器之间的异步通信技术。通过Ajax...