首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > asp.net >

如何用JQueryAjax绑定数据到页面呢

2013-07-08 
怎么用JQueryAjax绑定数据到页面呢?在asp.netMVC开发中怎么使用JqueryAjax把SQLserver的数据绑定到页面呢?

怎么用JQueryAjax绑定数据到页面呢?
在asp.netMVC开发中怎么使用JqueryAjax把SQLserver的数据绑定到页面呢?求给个实力,小弟在JqueryAjax这方面不是很熟练,求各位大侠给个简单的实例或说明下思路,小弟在此万分感谢,100分,全给你们了!如何用JQueryAjax绑定数据到页面呢 JQueryAjax SQL?Server
[解决办法]
http://www.cnblogs.com/celery94/archive/2011/01/17/1937494.html
[解决办法]
给你个局部刷新的。主分页面参考,Controller返回的是DataTable

Controller:

        public ActionResult RepairWork()
        {
            return View();
        }

        public PartialViewResult RepairWorkList()
        {
            string sn = "";
            if (!string.IsNullOrEmpty(Request[SN]))
            {
                sn = Request[SN].ToString().Trim().ToUpper().Replace('-', '+');
            }

            DataTable dt = _repairWork.SelectRepairBySNandUser(sn, "R", Session[SESSION_LOGIN_ID].ToString());

            return PartialView(dt);
        }


主页面放一个按钮,一个空DIV:
                    <div id="AjaxMain" style="width: 100%; text-align: center">
                    </div>

点击按钮加载数据到DIV:
       function checkSubmit() {
            $("#AjaxMain").html("<br/><img src='../../Content/images/loading.gif' /><br/>数据加载中,请等待...")



            var data = "ProjectID=" + $("#projectID").val() + "&FactoryID=" + $("#ddlFactory").val() + "&StartTime=" + $("#StartTime").val() + "&EndTime=" + $("#EndTime").val();

            $.post("/RepairCNT/RepairCNTList/", data,
            function (data) {
                $("#AjaxMain").html(data);
            }, "text"
             );
        }



局部视图:
@model System.Data.DataTable
<table id="listTable" width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="b5d6e6"
    onmouseover="changeto()" onmouseout="changeback()">
    <tr class="tbg">
        <td nowrap="nowrap" colspan="">
            姓名
        </td>
        <td nowrap="nowrap">
            工号
        </td>
        <td nowrap="nowrap">
            待维修(pcs)
        </td>
        <td nowrap="nowrap">
            维修成功(pcs)
        </td>
        <td nowrap="nowrap">
            维修升级(pcs)
        </td>
        <td nowrap="nowrap">
            等级品(pcs)
        </td>
        <td nowrap="nowrap">
            返外协(pcs)
        </td>
        <td nowrap="nowrap">


            维修报废(pcs)
        </td>
        <th nowrap="nowrap">
            合计(pcs)
        </th>
        <td nowrap="nowrap">
            维修完成待入库(pcs)
        </td>
    </tr>
    @if (Model.Rows.Count > 0)
    {
        foreach (System.Data.DataRow dr in Model.Rows)
        {  
        <tr class="lbg">
            <td class="tc">
                @dr["user_name"]
            </td>
            <td class="tc">
                @dr["user_id"]
            </td>
            <td align="right" style="padding-right: 5px" nowrap="nowrap">
                @dr["repairing_cnt"]
            </td>
            <td align="right" style="padding-right: 5px" nowrap="nowrap">
                @dr["repair_cnt"]
            </td>
            <td align="right" style="padding-right: 5px" nowrap="nowrap">
                @dr["repair_update_cnt"]
            </td>
            <td align="right" style="padding-right: 5px" nowrap="nowrap">
                @dr["GRADE_PRODUCT_CNT"]


            </td>
            <td align="right" style="padding-right: 5px" nowrap="nowrap">
                @dr["reback_factory_cnt"]
            </td>
            <td align="right" style="padding-right: 5px" nowrap="nowrap">
                @dr["apply_cnt"]
            </td>
            <td align="right" style="padding-right: 5px" nowrap="nowrap">
                @dr["wait_inbound_cnt"]
            </td>
        </tr> 
        }
    }
    else
    {
        <tr class="lbg">
            <td colspan="9" align="center" class="tc">
                暂无数据
            </td>
        </tr>
    }
</table>


[解决办法]

 //WebService里面的方法
 [WebMethod(EnableSession = true)]
        public string GetAllDebt()
        {
            StringBuilder sb = new StringBuilder();
            List<Models.Debt> list = new List<Models.Debt>();
            list = new Controllers.DebtController().GetAllDebt(((Models.UserInfo)Session["UserInfo"]).UserId);
            if (list.Count <= 0)
            {
                sb.Append("没有您要查询的数据");


            }
            else
            {
                sb.Append("<ul>");
                sb.Append("<li style='background-color:#eaeaea;'>负债编号</li>");
                sb.Append("<li style='background-color:#eaeaea;'>年利息</li>");
                sb.Append("<li style='background-color:#eaeaea;'>负债金额</li>");
                sb.Append("<li style='background-color:#eaeaea;'>负债时间</li>");
                sb.Append("<li style='background-color:#eaeaea;'>负债对象</li>");
                sb.Append("<li style='background-color:#eaeaea;'>操作</li>");
                foreach (Models.Debt item in list)
                {
                    sb.Append("<li>"+item.deId+"</li>");
                    sb.Append("<li>" + item.deAccrual + "</li>");
                    sb.Append("<li>" + item.deManey + "</li>");
                    sb.Append("<li>" + item.detime + "</li>");
                    sb.Append("<li>" + item.deObject + "</li>");
                    sb.Append("<li><a href='#' style='color:blue'>还债</a>  <a href='#' style='color:blue;' onclick=way(" + item.deId + ")>删除</a>  <a href='#' style='color:blue;' onclick=fun(" + item.deId + ")>负债原因</a></li>");


                    
                }
                sb.Append("</ul>");
            }
            return sb.ToString();
        }




//JQ调用就好了 把传过来的值放到<div id="DebtFind"></div>
 $.ajax({
                type: "post",
                contentType: "application/json",
                url: "../../WebServices/DebtWebService.asmx/GetAllDebt",
                data: "{}",
                dataType: "json",
                success: function (result) {
                    $("#DebtFind").html(result.d);
                }
            })

热点排行