自动刷新ASP.NET而不闪烁页面 [英] Auto Refresh ASP.NET without blinking page
问题描述
首先让我告诉你我的流程
我想建立座位预订申请（实时）。我使用c＃，ajax，jquery和sql-server作为数据库。我有3页index.html（用户界面），。js（用于jQuery，打印座位，座位位置也是html和aspx的桥梁），aspx（操纵数据库）
当你运行Index.html时，你会看到座位，你可以点击它并输入你的结束时间然后你的座位会将颜色变为红色。如果当前时间与您的结束时间相等，那么您的座位颜色将从红色变回绿色。
座位将在您预订时变为红色。并且您的无座位和endTime将插入到DB中。当你的结束时间=当前时间-on DB的字段状态为0和1. 0表示可用，1表示已预订状态更改为0.
这一切都已完成，但是颜色不会回绿。而状态已变为0.
这是我在aspx中的代码。从.html和.js也没有座位，也从座位仍在预订的数据库中获取数据。
first let me tell you my flow
I want to build seat reservation application(real time). I use c#, ajax, jquery also sql-server for database. I have 3 pages index.html(User Interface), .js(for jQuery , print seat, seat position also bridge for html and aspx), and aspx(which manipulate database)
when you run Index.html you'll see seats, you can click it and input your end time then your seat will change color to red. if current time is equal with your end time then your seat color from red back to green.
seat will change into red when you book it. and your no seat and endTime will insert into DB. when your endtime = current time -on DB has field status 0 and 1. 0 mean available and 1 mean booked- status change to 0.
it's all done but the color wouldn't back to green. whereas status has change to 0.
this my code in aspx. that get no seat also endtime from .html and .js and also get data from database which seat is still booked.
[WebMethod]
[ScriptMethod(UseHttpGet = true)]
public static string GetSeat()
{
string sql = "";
SqlConnection conn = DBConnection.getConnection();
conn.Open();
sql = "UPDATE booking SET statusBooked = 0 WHERE CONVERT(char(5),[end], 108) = '" + DateTime.Now.ToString("hh:mm") + "'";
SqlCommand _cdm = new SqlCommand(sql, conn);
_cdm.ExecuteNonQuery();
conn.Close();
List<booking> bookList = new List<booking>();
conn.Open();
sql = "Select noSeat from booking WHERE statusBooked = 1";
SqlCommand cmd = new SqlCommand(sql, conn);
SqlDataReader dr = cmd.ExecuteReader();
while (dr.Read())
{
booking book = new booking();
book.noSeat = dr[0].ToString();
book.end =(DateTime) dr[1];
bookList.Add(book);
}
conn.Close();
JavaScriptSerializer serializer = new JavaScriptSerializer();
return serializer.Serialize(bookList).ToString();
}
这是我在.js上的ajax，它接收哪个座位号被预订并变成红色我把setInterval放在文件准备好了因此它将每2秒刷新一次。
this is my ajax on .js that receive which seat number is booked and change into red I put setInterval on document ready. so it will be refresh every 2 second.
setInterval('_ajax()', 2000);
function _ajax(){
$.ajax({
url: "Url.aspx/GetSeat",
type: "GET",
contentType: "application/json; charset=utf-8",
success: function (response) {
var arr = JSON.parse(response.d);
console.log(arr);
objData = new Array();
objData = arr;
for (i = 0; i < objData.length; i++) {
//console.log(objData[i].noSeat);
jQuery('#' + objData[i].noSeat).addClass('seat-booked');
jQuery('#class-' + objData[i].noSeat).attr('value', 'seat-booked');
jQuery('#' + objData[i].noSeat).removeClass('seat-availiable');
jQuery('#' + objData[i].noSeat).removeClass('selected');
}
},
error: function () {
alert("sorry, there was a problem!");
console.log("error");
},
complete: function () {
console.log("complete");
}
});
}
它应该自动为绿色，因为我只发送从aspx和.js预订的座位数量我只如果noseat等于我从.aspx发送的数据，则更改为红色，但如果我手动重新加载Index.html。座位变为绿色。它有效，但不是自动的。我曾经使用html refres元标记，并在page_load上重新加载，但它使页面闪烁。我希望刷新而不闪烁
it should be green automatically, because i only send number of seat booked from aspx and in .js I only change to red if noseat is equal of data I send from .aspx but if I reload Index.html manually. the seat is change to green. it works but not automatically. I used to html refres meta tag, and reload on page_load, but it make the page blinking. I want it refresh without blinking
推荐答案
.ajax（{
url： Url.aspx / GetSeat，
类型： 获取，
contentType： application / json; charset = utf-8，
成功： function （响应）{
var arr = JSON .parse（response.d）;
console .log（arr） ;
objData = new 数组（）;
objData = arr;
for （i = 0 ; i< objData.length; i ++）{
// console.log（objData [i] .noSeat）;
jQuery（' ＃' + objData [i] .noSeat）.addClass（' 座位预订）;
jQuery（' #class - ' + objData [i] .noSeat）.attr（ ' value'，' 座位预订的）;
jQuery（' ＃' + objData [i] .noSeat）.removeClass（' seat-availiable'）;
jQuery（' ＃' + objData [i] .noSeat）.removeClass（' selected'）;
}
}，
错误：功能（）{
alert（ 抱歉，有问题！）;
console .log（ error< /跨度>）;
}，
complete： function （）{
console 。 log（ complete）;
}
}）;
}
.ajax({ url: "Url.aspx/GetSeat", type: "GET", contentType: "application/json; charset=utf-8", success: function (response) { var arr = JSON.parse(response.d); console.log(arr); objData = new Array(); objData = arr; for (i = 0; i < objData.length; i++) { //console.log(objData[i].noSeat); jQuery('#' + objData[i].noSeat).addClass('seat-booked'); jQuery('#class-' + objData[i].noSeat).attr('value', 'seat-booked'); jQuery('#' + objData[i].noSeat).removeClass('seat-availiable'); jQuery('#' + objData[i].noSeat).removeClass('selected'); } }, error: function () { alert("sorry, there was a problem!"); console.log("error"); }, complete: function () { console.log("complete"); } }); }
它应该自动为绿色，因为我只发送从aspx和.js预订的座位数量我只如果noseat等于我从.aspx发送的数据，则更改为红色，但如果我手动重新加载Index.html。座位变为绿色。它有效，但不是自动的。我曾经使用html refres元标记，并在page_load上重新加载，但它使页面闪烁。我希望刷新而不闪烁
it should be green automatically, because i only send number of seat booked from aspx and in .js I only change to red if noseat is equal of data I send from .aspx but if I reload Index.html manually. the seat is change to green. it works but not automatically. I used to html refres meta tag, and reload on page_load, but it make the page blinking. I want it refresh without blinking
这一行不正确setInterval（'_ ajax（）'，2000）;
它应该是setInterval（'_ ajax'，2000）;
不要在调用setInterval时包含（）。如果这样做，将立即调用该函数。
This line is incorrect setInterval('_ajax()', 2000);
It should be setInterval('_ajax', 2000);
Don't include the () in the call to setInterval. If you do, the function will be called immediately.
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
//page will be refereshed at a interval of 10 sec
Response.AddHeader("Refresh", "10");
}
}
这篇关于自动刷新ASP.NET而不闪烁页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
