ASP.NET Page_Load與AJAX頁面刷新代碼重用/冗餘？

Question

下面是代碼的工作示例，但是我經常發現自己編寫Page_Load內容只是爲了找到自己重寫相同類型的代碼，在通過ajax加載（避免回發）之後在頁面上做同樣的事情。 ..

我不禁想到，必須有一種更好的（可能是面向對象的）方式來操作和創建我們需要在初始.NET頁面加載後維護而不刷新整個頁面的動態HTML方法。

在下面的代碼示例中，您可以假設AjaxEnginePage是適當分析查詢字符串的現有.NET頁面，並且GetRealTimeFavoritesList（）返回具有需要在C＃或JavaScript中解析的所有信息的適當對象列表，從那時起，我們獲得了代碼重用性，但是我們如何在C＃/ JS中獲得它？

OnlineMemberList.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="OnlineMemberList.ascx.cs"  Inherits="OnlineMemberList" %> 
<script src="../AJAJSON/Favorites/Favorites.js"></script> 
<script src="../AJAJSON/Jquery/jquery-1.9.1.js"></script> 
<script src="../AJAJSON/Jquery/jquery-ui-1.10.2.custom.js"></script> 
<script src="../AJAJSON/Jquery/jquery.mousewheel.js"></script> 
<script src="../AJAJSON/Jquery/jquery.jscrollpane.js"></script> 
<script type="text/javascript"> 
     $(document).ready(function() { 
     var settings = { 
          autoReinitialise: true 
         }; 

     $('.scroll-pane').jScrollPane(settings); 

     setInterval(function() { 
     UpdateFavoritesList(); 
     }, 10000); 
    }); 
</script> 

<div id="FavoritesList"> 
    <h3>Favorites</h3> 
    <div id="BottomBorderFavorites"></div> 
    <div id="Favorites" class="scroll-pane"> 
     <br /> 
     <p style="text-align: center;">--- Online ---</p> 
     <div id="OnlineFavoritesUserNames" class="OnlineFavoritesUserNames" runat="server"></div> 
     <div id="FavoritesChatIcon" class="FavoritesChatIcon" runat="server"></div> 
     <div style="clear: both;"></div> 
     <br /> 
     <p style="text-align: center;">--- Offline ---</p> 
    <div id="OfflineFavoritesUserNames" class="OfflineFavoritesUserNames" runat="server"></div> 
</div> 

OnlineMemberList.ascx.cs

protected void Page_Load(object sender, EventArgs e) 
    { 
     if (!IsPostBack) 
     { 
      List<FavoriteSummary> summaries = favoritesBLL.GetRealTimeFavoritesList(); 
      foreach (FavoriteSummary summary in summaries) 
      { 

       if (summary.isOnline) 
       { 
        OnlineFavoritesUserNames.InnerHtml += "<p>" + summary.you.UserName + "</p>"; 
        if (summary.isAvailableForIM) 
         FavoritesChatIcon.InnerHtml += "<p><img src='../Images/FavoritesList/send-message.png' onclick=\"NewIMWindow('" + summary.you.UserName + "')\"; style='width: 15px; height: 13px;'></img></p>"; 
        else 
         FavoritesChatIcon.InnerHtml += "<p></p>"; 
       } 
       else 
       { 
        OfflineFavoritesUserNames.InnerHtml += "<p>" + summary.you.UserName + "</p>"; 
       } 
      } 
     } 
    } 

Favorites.js

function UpdateFavoritesList() { 

var url = AjaxEnginePage + Category + "&Action=GetRealTimeFavoritesList"; 
$.getJSON(url, null, function (results) { 
    UpdateFavoritesListDisplay(results) 
}); 


function UpdateFavoritesListDisplay(favoritesArray) { 
$(".OnlineFavoritesUserNames")[0].innerHTML = ""; 
$(".FavoritesChatIcon")[0].innerHTML = ""; 
$(".OfflineFavoritesUserNames")[0].innerHTML = ""; 

if (favoritesArray["FavoriteSummary"].length !== 0) { 
    for (var i = 0; i < favoritesArray["FavoriteSummary"].length; ++i) { 
     if (favoritesArray["FavoriteSummary"][i].isOnline == "True") { 
      $(".OnlineFavoritesUserNames")[0].innerHTML += "<p>" + favoritesArray["FavoriteSummary"][i].yourUserName + "</p>"; 
      if (favoritesArray["FavoriteSummary"][i].isAvailableForIM == "True") { 
       $(".FavoritesChatIcon")[0].innerHTML += "<p><img src='../Images/FavoritesList/send-message.png' class='FavoritesChatIcon' onclick=\"NewIMWindow('" + favoritesArray["FavoriteSummary"][i].yourUserName + "')\" /></a></p>"; 
      } 
      else { 
       $(".FavoritesChatIcon")[0].innerHTML += "<p></p>"; 
      } 
     } 
     else { 
      $(".OfflineFavoritesUserNames")[0].innerHTML += "<p>" + favoritesArray["FavoriteSummary"][i].yourUserName + "</p>"; 
     } 
    } 
} 
else { 
    $(".OnlineFavoritesUserNames")[0].innerHTML += "<p>No Favorites</p>"; 
} 
} 
}  

Answer 1

根本不需要在服務器端生成此標記。 你已經有一個工作的Ajax調用，將獲取數據並在JavaScript中生成標記。所以你應該在頁面加載時以及每10秒鐘調用一次。即：

UpdateFavoritesList(); 
setInterval(function() { 
    UpdateFavoritesList(); 
    }, 10000); 

這樣在頁面加載時，你立即運行Ajax調用並填充您的標記，你可以從Page_Load方法刪除所有重複的代碼。