javascript - 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 方法中删除所有重复代码。