为什么asp.net webform页面中的asyncpostback太重了

时间:2016-01-03 07:50:43

标签: c# asp.net ajax webforms updatepanel

我有一个webform asp.net页面,上面有近40个控件和50个服务器验证器 我正在使用带有asyncpostback触发器的updatepanel,如下所示:

 <asp:UpdatePanel ID="pnlMain" runat="server" UpdateMode="Conditional">
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="rdblHeiatElmi" EventName="SelectedIndexChanged" />
        <asp:AsyncPostBackTrigger ControlID="txtCodeMeli" EventName="TextChanged" />
        <asp:AsyncPostBackTrigger ControlID="chbkDaneshkade" EventName="SelectedIndexChanged" />
        <asp:AsyncPostBackTrigger ControlID="drpProvince1" EventName="SelectedIndexChanged" />
        <asp:AsyncPostBackTrigger ControlID="drpProvince2" EventName="SelectedIndexChanged" />
    </Triggers>
    <ContentTemplate> 

我的问题是:为什么我的异步回发数据太重了? 我检查发送回服务器的数据,并且在每个异步后备中都接近1200KB。

2 个答案:

答案 0 :(得分:3)

当大多数ASP.NET开发人员根本没有为AJAX做好准备时,

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="WebApplication1.Grades1" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <div> <asp:GridView ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" DataKeyNames="Code" DataSourceID="SqlDataSource1" Width="921px" CellPadding="4" ForeColor="#333333" GridLines="None"> <AlternatingRowStyle BackColor="White" /> <Columns> <asp:CommandField ShowSelectButton="True" /> <asp:BoundField DataField="Code" HeaderText="Code" ReadOnly="True" SortExpression="Code" /> <asp:BoundField DataField="GradeName" HeaderText="GradeName" SortExpression="GradeName" /> <asp:BoundField DataField="GradeGroupName" HeaderText="GradeGroupName" SortExpression="GradeGroupName" /> <asp:BoundField DataField="GradeCons" HeaderText="GradeCons" SortExpression="GradeCons" /> <asp:BoundField DataField="GradeNameCons" HeaderText="GradeNameCons" SortExpression="GradeNameCons" /> </Columns> <EditRowStyle BackColor="#2461BF" /> <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" /> <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" /> <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" /> <RowStyle BackColor="#EFF3FB" /> <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" /> <SortedAscendingCellStyle BackColor="#F5F7FB" /> <SortedAscendingHeaderStyle BackColor="#6D95E1" /> <SortedDescendingCellStyle BackColor="#E9EBEF" /> <SortedDescendingHeaderStyle BackColor="#4870BE" /> </asp:GridView> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:Dev201601ConnectionString %>" SelectCommand="SELECT Grades.Grade AS Code, Grades.GradeName, GradeGroups.GradeGroupName, Grades.GradeCons, Grades.GradeNameCons FROM Grades LEFT OUTER JOIN GradeGroups ON GradeGroups.GradeGroup = Grades.GradeGroup ORDER BY Code"></asp:SqlDataSource> <br /> <asp:FormView ID="FormView1" runat="server" DataKeyNames="Grade" DataSourceID="SqlDataSource2" CellPadding="4" ForeColor="#333333" Width="926px"> <EditItemTemplate> Grade: <asp:Label ID="GradeLabel1" runat="server" Text='<%# Eval("Grade") %>' /> <br /> GradeName: <asp:TextBox ID="GradeNameTextBox" runat="server" Text='<%# Bind("GradeName") %>' /> <br /> GradeGroupName: <asp:TextBox ID="GradeGroupNameTextBox" runat="server" Text='<%# Bind("GradeGroupName") %>' /> <br /> GradeStepAmount: <asp:TextBox ID="GradeStepAmountTextBox" runat="server" Text='<%# Bind("GradeStepAmount") %>' /> <br /> GradeOrder: <asp:TextBox ID="GradeOrderTextBox" runat="server" Text='<%# Bind("GradeOrder") %>' /> <br /> GradeCons: <asp:TextBox ID="GradeConsTextBox" runat="server" Text='<%# Bind("GradeCons") %>' /> <br /> GradeNameCons: <asp:TextBox ID="GradeNameConsTextBox" runat="server" Text='<%# Bind("GradeNameCons") %>' /> <br /> GradeFromDate: <asp:TextBox ID="GradeFromDateTextBox" runat="server" Text='<%# Bind("GradeFromDate") %>' /> <br /> GradeToDate: <asp:TextBox ID="GradeToDateTextBox" runat="server" Text='<%# Bind("GradeToDate") %>' /> <br /> <asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" CommandName="Update" Text="Update" /> &nbsp;<asp:LinkButton ID="UpdateCancelButton" runat="server" CausesValidation="False" CommandName="Cancel" Text="Cancel" /> </EditItemTemplate> <EditRowStyle BackColor="#2461BF" /> <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" /> <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" /> <InsertItemTemplate> Grade: <asp:TextBox ID="GradeTextBox" runat="server" Text='<%# Bind("Grade") %>' /> <br /> GradeName: <asp:TextBox ID="GradeNameTextBox" runat="server" Text='<%# Bind("GradeName") %>' /> <br /> GradeGroupName: <asp:TextBox ID="GradeGroupNameTextBox" runat="server" Text='<%# Bind("GradeGroupName") %>' /> <br /> GradeStepAmount: <asp:TextBox ID="GradeStepAmountTextBox" runat="server" Text='<%# Bind("GradeStepAmount") %>' /> <br /> GradeOrder: <asp:TextBox ID="GradeOrderTextBox" runat="server" Text='<%# Bind("GradeOrder") %>' /> <br /> GradeCons: <asp:TextBox ID="GradeConsTextBox" runat="server" Text='<%# Bind("GradeCons") %>' /> <br /> GradeNameCons: <asp:TextBox ID="GradeNameConsTextBox" runat="server" Text='<%# Bind("GradeNameCons") %>' /> <br /> GradeFromDate: <asp:TextBox ID="GradeFromDateTextBox" runat="server" Text='<%# Bind("GradeFromDate") %>' /> <br /> GradeToDate: <asp:TextBox ID="GradeToDateTextBox" runat="server" Text='<%# Bind("GradeToDate") %>' /> <br /> <asp:LinkButton ID="InsertButton" runat="server" CausesValidation="True" CommandName="Insert" Text="Insert" /> &nbsp;<asp:LinkButton ID="InsertCancelButton" runat="server" CausesValidation="False" CommandName="Cancel" Text="Cancel" /> </InsertItemTemplate> <ItemTemplate> Grade: <asp:Label ID="GradeLabel" runat="server" Text='<%# Eval("Grade") %>' /> <br /> GradeName: <asp:Label ID="GradeNameLabel" runat="server" Text='<%# Bind("GradeName") %>' /> <br /> GradeGroupName: <asp:Label ID="GradeGroupNameLabel" runat="server" Text='<%# Bind("GradeGroupName") %>' /> <br /> GradeStepAmount: <asp:Label ID="GradeStepAmountLabel" runat="server" Text='<%# Bind("GradeStepAmount") %>' /> <br /> GradeOrder: <asp:Label ID="GradeOrderLabel" runat="server" Text='<%# Bind("GradeOrder") %>' /> <br /> GradeCons: <asp:Label ID="GradeConsLabel" runat="server" Text='<%# Bind("GradeCons") %>' /> <br /> GradeNameCons: <asp:Label ID="GradeNameConsLabel" runat="server" Text='<%# Bind("GradeNameCons") %>' /> <br /> GradeFromDate: <asp:Label ID="GradeFromDateLabel" runat="server" Text='<%# Bind("GradeFromDate") %>' /> <br /> GradeToDate: <asp:Label ID="GradeToDateLabel" runat="server" Text='<%# Bind("GradeToDate") %>' /> <br /> <asp:LinkButton ID="DeleteButton" runat="server" CausesValidation="False" CommandName="Delete" Text="Delete" /> <asp:LinkButton ID="InsertButton" runat="server" CausesValidation="False" CommandName="Insert" Text="Insert" /> <asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="False" CommandName="Update" Text="Update" /> </ItemTemplate> <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" /> <RowStyle BackColor="#EFF3FB" /> </asp:FormView> <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:Dev201601ConnectionString %>" SelectCommand="SELECT Grades.Grade, Grades.GradeName, GradeGroups.GradeGroupName, Grades.GradeStepAmount, Grades.GradeOrder, Grades.GradeCons, Grades.GradeNameCons, Grades.GradeFromDate, Grades.GradeToDate FROM Grades LEFT OUTER JOIN GradeGroups ON GradeGroups.GradeGroup = Grades.GradeGroup" DeleteCommand="DELETE FROM Grades WHERE (Grade = @Grade)" InsertCommand="INSERT INTO Grades(Grade, GradeName, GradeGroup, GradeStepAmount, GradeNameCons, GradeFromDate, GradeToDate, GradeOrder, GradeCons) VALUES (@Grade, @GradeName, @GradeGroup, @GradeStepAmount, @GradeNameCons, @GradeFromDate, @GradeToDate, @GradeOrder, @GradeCons)" UpdateCommand="UPDATE Grades SET Grade = @GradeNValue, GradeName = @GradeNameNValue, GradeGroup = @GradeGroupNValue, GradeStepAmount = @GradeStepAmountNValue, GradeOrder = @GradeOrderNValue, GradeCons = @GradeConsNValue, GradeNameCons = @GradeNameConsNValue, GradeFromDate = @GradeFromDateNValue, GradeToDate = @GradeToDateNValue FROM Grades INNER JOIN GradeGroups ON Grades.GradeGroup = GradeGroups.GradeGroup WHERE (Grades.Grade = @Grade) AND (Grades.GradeName = @GradeName) AND (Grades.GradeGroup = @GradeGroup) AND (Grades.GradeStepAmount = @GradeStepAmount) AND (Grades.GradeOrder = @GradOrder) AND (Grades.GradeCons = @GraderCons) AND (Grades.GradeNameCons = @GradeNameCons) AND (Grades.GradeFromDate = @GradeFromDate) AND (Grades.GradeToDate = @GradeToDate)"> <DeleteParameters> <asp:Parameter Name="Grade" /> </DeleteParameters> <SelectParameters> <asp:ControlParameter ControlID="GridView1" Name="Grade" PropertyName="SelectedValue" Type="double" /> </SelectParameters> <InsertParameters> <asp:Parameter Name="Grade" /> <asp:Parameter Name="GradeName" /> <asp:Parameter Name="GradeGroup" /> <asp:Parameter Name="GradeStepAmount" /> <asp:Parameter Name="GradeNameCons" /> <asp:Parameter Name="GradeFromDate" /> <asp:Parameter Name="GradeToDate" /> <asp:Parameter Name="GradeOrder" /> <asp:Parameter Name="GradeCons" /> </InsertParameters> <UpdateParameters> <asp:Parameter Name="GradeNValue" /> <asp:Parameter Name="GradeNameNValue" /> <asp:Parameter Name="GradeGroupNValue" /> <asp:Parameter Name="GradeStepAmountNValue" /> <asp:Parameter Name="GradeOrderNValue" /> <asp:Parameter Name="GradeConsNValue" /> <asp:Parameter Name="GradeNameConsNValue" /> <asp:Parameter Name="GradeFromDateNValue" /> <asp:Parameter Name="GradeToDateNValue" /> <asp:Parameter Name="Grade" /> <asp:Parameter Name="GradeName" /> <asp:Parameter Name="GradeGroup" /> <asp:Parameter Name="GradeStepAmount" /> <asp:Parameter Name="GradOrder" /> <asp:Parameter Name="GraderCons" /> <asp:Parameter Name="GradeNameCons" /> <asp:Parameter Name="GradeFromDate" /> <asp:Parameter Name="GradeToDate" /> </UpdateParameters> </asp:SqlDataSource> </div> </form> </body> </html> 对AJAX来说是一种简单但重要的方法。

它不是在服务器端交换JSON / XML数据,而是在UpdatePanel占位符中受到某些操作HTML的影响。它还会调出ContentTemplate

因为我们在2016年会说你应该开始考虑学习普通的AJAX或使用像jQuery这样的第三方框架(至少)来执行AJAX调用,这些调用可以处理数据以利用良好的分离关注优化客户端 - 服务器通信。

MSDN article州:

  

ASP.NET UpdatePanel控件使您能够构建以客户端为中心的丰富内容   Web应用程序。通过使用UpdatePanel控件,您可以刷新   页面的选定部分而不是用a刷新整个页面   回发。这被称为执行部分页面更新。一个   包含ScriptManager控件的ASP.NET网页和一个或多个   UpdatePanel控件可以自动参与部分页面   更新,没有自定义客户端脚本

答案 1 :(得分:0)

谢谢你们试着回答我的问题。 但我的第二个问题是我需要学习纯粹的ajax, 我的第一个问题是为什么我的asyncpostbacks如此沉重,我把我的所有页面都包括在一个更新面板中的部分字段,答案是我需要将多个更新面板中的每个部分更新分开。