自動刷新ASP.NET，而不會閃爍頁面

Question

首先讓我告訴你我的流程

我想建立座位預定應用程序（實時）。 我使用c＃，ajax，jquery以及用於數據庫的sql-server。 我有3頁index.html（用戶界面）、. js（用於jQuery，打印座椅，座椅位置也是html和aspx的橋梁）和aspx（操縱數據庫）

當您運行Index.html時，會看到座位，您可以單擊它並輸入結束時間，然后您的座位將變為紅色。 如果當前時間與您的結束時間相等，則您的座位顏色從紅色變回綠色。

預訂時座位會變成紅色。 您的空位和endTime將插入數據庫。 當您的結束時間=當前時間-DB上的字段狀態為0和1。0表示可用，而1表示預訂狀態變為0。

完成所有操作，但顏色不會變回綠色。 而狀態已更改為0。

這是我在aspx中的代碼。 這樣，.html和.js都無法獲得席位，並且還可以從仍預訂了席位的數據庫中獲取數據。

[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秒刷新一次。

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中，如果nasat等於我從.aspx發送的數據，但是如果我手動重新加載Index.html，則僅更改為紅色。 座位變成綠色。 它可以工作，但不能自動運行。 我曾經用html refres meta標簽，然后在page_load上重新加載，但是它使頁面閃爍。 我希望它刷新而不閃爍。

Answer 1

為什么不只在客戶端控制此更改，而不是每次都將數據發送回服務器？

這樣，您每2秒避免了很多服務器請求。

但是，如果您仍然想遵循自己的方法，建議您僅在更改座位（而不是頁面中的所有座位）時執行ajax。 當您單擊一個座位並設置結束時間值時，您可以調用ajax告訴數據庫此時已預訂了特定座位。

我建議您使用的另一種方法是：每次在ajax調用中獲得結果時，都可以將頁面中的所有席位設置為“可用”

(jQuery('your-common-seat-class').removeClass('seat-booked').addClass('seat-availiable');

並且針對您響應數據中的每個席位，將其設置為已預訂。

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');
}