C#Web API 获取List 对象类型 Hbulider绑定数据！实现下拉刷新。

最近开发一个工厂自己用的工具！用来上传数据信息和返回处理结果！因为用的是局域网所以这边对于网络的处理就不演示了！最好用的工具也就是Hbulider 也是最方便的！它里面已经给我们封装好了我们所需要的东西！废话不多说直接上思路！

思路很简单 数据返回之前看只有ajax 才可以 但是也只能返回json 所以就试了下能不能把list也返回进去！

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

namespace MaterialsDetails.Models
{
    public class ErrorLogs
    {
        public string Createtime { get; set; } //创建时间
        public string AssPeople { get; set; }  //需要帮助人
        public string StatusZT { get; set; } //状态
        public string ProbleMdes { get; set; } //问题描述
        public string Finds { get; set; } //异常提交人员信息
        public string AssPeop { get; set; } //需要协助人员信息
        public string StatusZTwo { get; set; } //状态二次查询
        public string StatusNumber { get; set; } //状态类型数字
        public string LookPeople { get; set; } //最新查看人
        public string LookTime { get; set; } //最新查看时间
        public string CLYJ { get; set; } //处理意见

    }
}

首先我们封装一个用于接受数据库的的对象类 用来接受我们list返回的数据信息！（如上代码）

接下来展示访问数据类的代码 非常简单的访问数据库信息！

using MaterialsDetails.Models;
using System;
using System.Collections.Generic;
using System.Data.SqlClient;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;

namespace MaterialsDetails.Controllers
{
    public class FeedBackViewController : ApiController
    {
        
        /// <summary>
        /// 查询数据库信息返回list数组
        /// </summary>
        /// <returns></returns>
        public List<ErrorLogs> GetAllUser()   //因为 WebApi 要想跟数据交互必须加上类似于Get 和Post 的开头 这里具体我就不解释了
        {
            List<ErrorLogs> list = new List<ErrorLogs>();  //接受返回的list集合数据！
            try
            {
                    string sql_lj = "Server=192.168.14.59;uid=sa;pwd=as;database=SupplyIsc";
                    SqlConnection connection = new SqlConnection(sql_lj);
                    connection.Open();
                    string sql = "select CreateTime,AssPeople,StatusZT,ProbleMdes,FindPeopleBM+'-'+FindPeople as Finds,AssPeopleBM+'-'+AssPeople as AssPeop,StatusZT,StatusNumber,isnull(ISNULL(EndPeople,CKPeople),FindPeople) as LookPeople,isnull(ISNULL(EndTime,CKTime),CreateTime) as LookTime,isnull(Handling,'无') as CLYJ from ErrorLogs order by StatusNumber,CreateTime desc";
                    SqlCommand comm = new SqlCommand(sql, connection);
                    SqlDataReader sdr = comm.ExecuteReader();
                    ErrorLogs er = new ErrorLogs();
                    while (sdr.Read())
                    {
                         er = new ErrorLogs { Createtime = sdr[0].ToString(), AssPeople = sdr[1].ToString(), StatusZT = sdr[2].ToString(), ProbleMdes = sdr[3].ToString(), Finds = sdr[4].ToString(), AssPeop = sdr[5].ToString(), StatusZTwo = sdr[6].ToString(), StatusNumber = sdr[7].ToString(), LookPeople = sdr[8].ToString(), LookTime = sdr[9].ToString(), CLYJ = sdr[10].ToString() }; //这里的下标根据index 获取所以我们只能从0开始 ！之前因为从1拿数据导致后面数据不足造成报错
                        list.Add(er);  //这一句很重要不然数据写入会出现问题
                    }

                    if (!sdr.HasRows)
                    {
                        er = new ErrorLogs { LookTime = "无匹配记录" };
                        list.Add(er);  //这里判断下数据是否真的存在
                    } 

                    sdr.Close();
            }
            catch (Exception e)
            {

            }
            return list;
        }
    }
}

 

这个时候我们根据webapi的特性去访问路由信息就可以查到信息了

接下来就是重点了！我们的Hbulider 如何去读取和获取他并绑定！

首先先看我的Hbulider 界面的信息

<!-- 主界面菜单同时移动 -->
        <!-- 侧滑导航根容器 -->
        <div class="mui-off-canvas-wrap mui-draggable">
         <!-- 主页面容器 -->
         <div class="mui-inner-wrap">
          <!-- 主页面标题 -->
         <header class="mui-bar mui-bar-nav">
         <h1 class="mui-title">异常信息展示</h1>
         </header>
                <!-- 主页面内容容器 -->
        <div id="refreshContainer" class="mui-content mui-scroll-wrapper">         

        <!--外层最大DIV-->
            <div class="mui-scroll" >
                
                <!--以下为绑定反馈信息-->
              <ul class="mui-table-view" id="assessPro">   
               
              </ul>
            
        </div>
    </div>
    
</div>
</div>

红色为重要部分就是一个简单的 自带mui的窗体 写入一个 ul 控件用来展示信息

接下来实现方法！

    <script src="js/mui.min.js"></script>
        <script type="text/javascript" charset="utf-8">
            
            
            mui.init({  

               //这里的下拉刷新也特别简单 只要把我们需要刷新的容器的id和下面执行刷新方法的容器id一致就可以了
                pullRefresh : {
                container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
                down : {
                  style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
                  color:'#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
                  height:'50px',//可选,默认50px.下拉刷新控件的高度,
                  range:'100px', //可选 默认100px,控件可下拉拖拽的范围
                  offset:'0px', //可选 默认0px,下拉刷新控件的起始位置 
                  auto: true,//可选,默认false.首次加载自动上拉刷新一次   //因为首次进入手机界面不会去下拉所以我们设置默认自动下拉一次
                  callback :pullfreshfunctions //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
                }
              },
             });
     
     function pullfreshfunctions(){   //红色的是一个js的调用方法实现非常简单
         mui.ajax('http://192.168.14.59:65271/api/FeedBackView/GetAllUser',{
                         data:{ 
                         },
                         dataType:'json',//服务器返回json格式数据
                         type:'get',//HTTP请求类型
                         timeout:10000,//超时时间设置为10秒；
                         success:function(data){
                             var listr = "";   //定义一个类型用来接受接下来拼接的数据！
                             var data = data;   //拿到我们刚才Get方法的值

                             for (i in data) {   //循环数据即可
                                 listr += "<li class='mui-table-view-cell mui-collapse'> "+
                                         "<a class='mui-navigate-right' href='#'><font id='StatusNumber"+data[i].StatusNumber+"'>"+data[i].Createtime+" "+data[i].AssPeople+" "+data[i].StatusZT+"</font></a>"+
                                         "<div class='mui-collapse-content'>"+
                                         "<p>异常问题:"+data[i].ProbleMdes+"</p>"+
                                         "<p>异常提交人员:"+data[i].Finds+"</p>"+
                                         "<p>请求协助人员:"+data[i].AssPeop+"</p>"+
                                         "<p>异常状态:"+data[i].StatusZTwo+"</p>"+
                                         "<p>最新更新时间:"+data[i].LookPeople+" "+data[i].LookTime+"</p>"+
                                         "<p>处理意见:"+data[i].CLYJ+"</p>"+
                                         "</div>"+
                                     "</li>"
                                     }  
                                     
                                    document.getElementById('assessPro').innerHTML=listr;  //将查询到的数据追加到li 里面               
                                    mui('#refreshContainer').pullRefresh().endPulldown();  //这里必须加上这个不然你的数据会一直刷新
                                    mui.toast("刷新成功"); //关闭刷新后友好提示
                        },
                         error:function(){
                             alert("查询失败");  
                         }
                     });
                } 
 </script>

到这里我们的前后台算是写完了！手机界面展示为

每次刷新将会从新从服务器读取数据出来并进行绑定实现了动态数据信息刷新！