如何将ajax返回的数据绑定到repeater

dwa4821 2016-06-13 12:08:30

要求是用ajax增删改sql数据库。

我不会jquery，你们有别的办法也可以说。

谢谢

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

<!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 id="Head1" runat="server">
<title></title>
<script>
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXOject('Microsoft.XMLHTTP');
}
//赋值下拉框
window.onload = function () {
var inputId = document.getElementById('id');
var inputName = document.getElementById('name');
var inputPhone = document.getElementById('phone');
var inputYears = document.getElementById('years');
var select1 = document.getElementById("select1");
xmlhttp.open("GET", "Handler1.ashx?leiXing=onLoad", true);
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var result1 = eval("(" + xmlhttp.responseText + ")");
for (i = 0; i < result1.length; i++) {

}
}
}
xmlhttp.send();
}
//查询
function chaXunFun() {
var inputId = document.getElementById('id');
var inputName = document.getElementById('name');
var inputPhone = document.getElementById('phone');
var inputYears = document.getElementById('years');
var select1 = document.getElementById("select1");
xmlhttp.open("GET", "Handler1.ashx?name=" + select1.value + "&leiXing=chaXun", true);
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var result1 = eval("(" + xmlhttp.responseText + ")");
inputId.value = result1.id;
inputName.value = result1.name;
inputPhone.value = result1.phone;
inputYears.value = result1.years;
}
}
xmlhttp.send();
}
//添加
function addFun() {
var id = document.getElementById("id");
var name = document.getElementById('addName');
var phone = document.getElementById('addPhone');
var years = document.getElementById('addYears');
xmlhttp.open("GET", "Handler1.ashx?name=" + name.value + "&phone=" + phone.value + "&years=" + years.value + "&id=" + id + "&leiXing=add", true);
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
alert("添加成功")
}
}
xmlhttp.send();
}
//删除
function deleteFuc() {
var id = document.getElementById('id');
xmlhttp.open("GET", "Handler1.ashx?id=" + id.value + "&leiXing=delete", true);
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
alert("删除成功")
}
}
xmlhttp.send();

}
//修改
function changeFuc() {
var id = document.getElementById('id');
var name = document.getElementById('name');
var phone = document.getElementById('phone');
var years = document.getElementById('years');
xmlhttp.open("GET", "Handler1.ashx?name=" + name.value + "&phone=" + phone.value + "&years=" + years.value + "&id=" + id.value + "&leiXing=change", true);
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
alert("修改成功")
}
}
xmlhttp.send();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Repeater>
<HeaderTemplate>
<table border="1">
<tr>
<td>id</td>
<td>name</td>
<td>phone</td>
<td>years</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><%#("id")%></td>
<td><%#("name")%></td>
<td><%#("id")%></td>
<td><%#("id")%></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>

<select id='select1'></select>
<input id='chaXun' type=button value='查询' onclick="chaXunFun()" />
<br />
<font>id</font>
<input id='id' type=text readonly="true" />
<font>name</font>
<input id='name' type=text />
<font>phone</font>
<input id='phone' type=text />
<font>years</font>
<input id='years' type=text />
<br />
name<input id="addName" type=text />phone<input id="addPhone" type=text />years<input id="addYears" type=text /><input id='add' type=button value='添加' onclick="addFun()" />
<br />
<input id='deleteFun' type=button value='删除' onclick="deleteFuc()" />先查询在删除
<br />
<input id='change' type=button value='修改' onclick="changeFuc()" />先查询在修改
</div>
</form>
</body>
</html>

下面是一般处理程序
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.SqlClient;
using System.Data;
using System.Text;

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

public void ProcessRequest(HttpContext context)
{
string leiXing=context.Request.QueryString["leiXing"];
string name = context.Request.QueryString["name"];
string id=context.Request.QueryString["id"];
string phone=context.Request.QueryString["phone"];
string years=context.Request.QueryString["years"];
//链接数据库
SqlConnection sqlcon = new SqlConnection("Password=123456;Persist Security Info=True;User ID=sa;Initial Catalog=zengShanGai;Data Source=.");
sqlcon.Open();
SqlCommand sqlcmd = new SqlCommand();
sqlcmd.Connection = sqlcon;
sqlcmd.CommandType = CommandType.Text;

//赋值下拉框
if(leiXing=="onLoad")
{
string strcmd="select * from info";

SqlDataAdapter sqldat = new SqlDataAdapter(strcmd,sqlcon);
DataSet sqldas = new DataSet();
sqldat.Fill(sqldas);
StringBuilder sb = new StringBuilder();
sb.Append("[");
for (int i = 0; i < sqldas.Tables.Count; i++)
{
sb.Append("{'id':" + sqldas.Tables[0].Rows[i]["id"] + ",'name':'" + sqldas.Tables[0].Rows[i]["name"] + "','phone':'" + sqldas.Tables[0].Rows[i]["phone"]+"','years':"+sqldas.Tables[0].Rows[i]["years"]+"},");

}
sb.Append("]");
context.Response.Write(sb);
}
//if (leiXing == "onLoad")
//{
// sqlcmd.CommandText = "select name from info";
// SqlDataReader sqldrd = sqlcmd.ExecuteReader();
// StringBuilder sb = new StringBuilder();
// sb.Append("[");
// while (sqldrd.Read())
// {
// sb.Append("{'name':'" + sqldrd[0] + "'},");

// }
// sb.Append("]");
// context.Response.Write(sb);
//}
//查询
if (leiXing == "chaXun")
{
string result = "";
sqlcmd.CommandText = "select * from info where name='"+name+"'";
SqlDataReader sqldrd=sqlcmd.ExecuteReader();
while (sqldrd.Read())
{
result = "{'id':'" + sqldrd["id"] + "','name': '" + sqldrd["name"] + "','phone': '" +sqldrd["phone"] + "','years': '" + sqldrd["years"] + "'}";
}

context.Response.Write(result);
}
//添加
if (leiXing == "add")
{
sqlcmd.CommandText = "insert into info(name,phone,years) values('"+name+"','"+phone+"',"+int.Parse(years)+")";
sqlcmd.ExecuteNonQuery();
}
//删除
if (leiXing == "delete")
{
sqlcmd.CommandText = "delete from info where id="+int.Parse(id);
sqlcmd.ExecuteNonQuery();
}
//改变
if (leiXing == "change")
{
sqlcmd.CommandText = "update info set name='"+name+"',phone='"+phone+"',years="+int.Parse(years)+"where id="+int.Parse(id);
sqlcmd.ExecuteNonQuery();
}

sqlcon.Close();

}

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

...全文

179 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

正怒月神版主 2016-06-14

打赏
举报

既然使用 ajax，那么绑定服务器控件repeater就不太合适了。应该考虑使用easyui的datagrid控件。通过ajax访问webapi，返回json数据，直接绑定到easyui

以专业开发人员为伍 2016-06-13

打赏
举报

完全没有考虑到 json 转移规则 --> 完全没有考虑到 json 转义规则不论是前端还是服务器端，拼字符串都是一种低级的最原始的编程方式，应该杜绝。

以专业开发人员为伍 2016-06-13

打赏
举报

在你的 onreadystatechange 函数执行时其内部，如果你学习了上面的 mvvm 编程模式你就知道了，只需要将 xmlhttp 所获取的数据（javascript对象数组）循环地 push 到前端 javascript 对象数组（例如上面例子中的 planets数组、gifts数组、lines数组，那么界面 UI 就自动改变了。你用不着写一堆什么“拼接上去”式的编程，因此通过 mvvm 而具有对界面模板应变的能力，花十分之一的精力来开发 js 程序。另外，你贴的 c# 代码中拼接 json 字符串是一种很不好的毛病。应该使用正规的 json 序列化或者是 JArray 对象化编程方法。比如说，如果 sqldrd["name"] 中有单引号怎么办？你的代码完全没有考虑到 json 转移规则，是个根本不懂 json 的垃圾代码。要知道，一些人喜欢写底层代码，而瞧不起那些已经封装好的框架。但是他写出来的底层代码根本就连基本的正确性都不能保证。

以专业开发人员为伍 2016-06-13

打赏
举报

不会前端那点编程技术，“不会 jQuery”，这样的 asp.net 不太好混了。你可以不会asp.net，但是不能不会前端。实际上前端要学的东西，只有 asp.net webform 的几十分之一，关键是看你能不能抽出3、4天精力来认真研究一下。我经常举这个例子： http://knockoutjs.com/examples/animatedTransitions.html http://knockoutjs.com/examples/gridEditor.html http://knockoutjs.com/examples/cartEditor.html 你要看懂的不是什么空洞的 javascript（或者 jQuery之类的），你要看懂的是设计模式。