读书人

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

发布时间: 2013-07-08 14:13:00 作者: rapoo

怎么用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);
}
})

读书人网 >asp.net

热点推荐