ASP.NET Page_Load против повторного использования кода обновления страницы AJAX/резервирования?

Question

Ниже приведен рабочий пример кода, однако я часто нахожу, что я пишу только контент Page_Load, чтобы найти себе переписывание того же типа кода, делающего то же самое на странице после загрузки через ajax (чтобы избежать обратной передачи) .. ..

Я не могу не думать, что должен быть какой-то лучший (возможно, объектно-ориентированный) способ манипулировать и создавать динамические методы HTML, которые мы должны поддерживать после начальной загрузки страницы .NET, не обновляя всю страницу ,

В приведенном ниже примере кода вы можете предположить, что 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.