Using UpdatePanel and others like it
Everyone who is engaged in web programming, sooner or later is faced with the task of implementing asynchronous requests to the server and processing the returned result.
If you look from Asp.net, the guys from Microsoft have done a great job in order to make life easier for all of us. However, there is some kind of manic idea in my head, forbidding to use that, the principles of which I do not understand. Thus, the curve track led me into the study of the operation of the UpdatePanel object and its ilk. Having reviewed many forums, I found dozens of statements that “UpdatePanel - SUCKS”, supported by various disparate explanations. But none of them has ever made me completely dissuade from the negative effect of its use. In this regard, taking on faith that everything said by various Anonymus on the forums is true, I began to dig.
And so it came to that.
')
When the page loads in the browser, only the button is present on it. When you press the button, the Label is filled with time.
Before the button was pressed, the page code looks like this:
When you click on the button, the page code will change as follows:
As we can see, the whole page remains the same. The viewstate and content have changed slightly.
Conclusion - not comme il faut.
Add to the page the elements that Visual Studio offers us, and which are necessary for the implementation of the task: ScriptManager and UpdatePanel.
The page code will change as follows:
Naturally, when you press a button, a query occurs.
We use a sniffer to examine more closely what is sent to the server, with such a request. And what is taken from it.
ScriptManager1 = UpdatePanel1% 7CButton1 & __ EVENTTARGET = & __ EVENTARGUMENT = &
__VIEWSTATE =% 2FwEPDwULLTEyNTU5OTE4NDBkZBeGYz2ykWCdLe% 2FOqUGKO6XyNu
fetXoAHtWu% 2B6HogbQM & __ EVENTVALIDATION =% 2FwEWAgLfxMyuBgKM54rGBm5yI89
MSG1Ab3% 2FionirqDlYwJw90SrasAVtECg7kMKg & __ ASYNCPOST = true & Button1 = Button
1 | # || 4 | 172 | updatePanel | UpdatePanel1 |
If we look at the answer closer, we will see in it something resembling the contents of our UpdatePanel and the new ViewState. And all this in size is much smaller than the whole page. In principle, we achieved this. Plus nothing blinks. And if you think a bit and pull out the button that calls the request from the guts of UpdatePanel, it turns out to be even less, but what kind of ViewState it is. After all, it is formed on the basis of all controls on the page, not only those that are updated asynchronously. It turns out that when using UpdatePanel, a page goes through its entire cycle, regardless of how the request goes: synchronously or asynchronously.
This fact of course could be the last nail in the coffin of UpdatePanel. But the guys from Microsoft, would not be guys from Microsoft, if they had left it all just like that.
All this is corrected quite simply by adding the following condition in the program code:
This condition must be added to the page creation handlers.
Everything that is inside this condition will not be executed at each asynchronous loading, and everything else will be.
Everything seems to be fine now. Everyone is happy, but, in my opinion, some sediment remains, and how it works is not understood.
Someone seemed to be talking about Web Services somewhere ...
Here let us go about them and continue.
Add a new WebService to our site and uncomment the attribute [System.Web.Script.Services.ScriptService]
In Visual Studio 2010, the function is automatically generated in it:
We will not change anything in it.
Next we have to do the following:
1) explain the page where web services are located
2) create a javascript function that accesses the web service
3) create a trigger for this function
And our page will change to this form:
If you look at the answer that the server gave us, it will be like this:
{"D": "Hello World"}
Conclusion: Everything turned out cool.
If you plunge deeper into this topic, then all of the above works through a simple xmlHttpRequest object. But that's another story.
So, as I always had problems with the formulation of the resulting conclusions, I, with the official permission of the habrauzer Shedal, write his words:
I would say that UpdatePanel really makes it easier to develop, and, of course, when you exchange data with the server, you get less traffic than with a full page reload. However, the amount of data transferred is often still greater than the minimum required. In most cases, this is absolutely not critical, but sometimes, with active data exchange with the server, it is better to use web services as a replacement for asynchronous postbacks.
In general, web services have a much wider range of applications and there can be many reasons to choose them. For example, the versatility of a software interface for exchanging data with a server in order to create several user interfaces (eg, mobile, desktop and web). And even in this case, it is quite normal when web services are used only as a layer between business logic and the interface, and the interface still operates with standard ASP.NET tools, including UpdatePanel using web services for data exchange only.
At the same time, UpdatePanel has many advantages, because, unlike web services, they were developed specifically for asynchronous changes to the HTML code of a page. Hence, convenient triggers, nesting of panels, automatic rendering (which you would otherwise have to implement manually on JS), and much more.
and further:
Image can not be loaded asynchronously! Only emulate asynchronous loading.
All success!)
If you look from Asp.net, the guys from Microsoft have done a great job in order to make life easier for all of us. However, there is some kind of manic idea in my head, forbidding to use that, the principles of which I do not understand. Thus, the curve track led me into the study of the operation of the UpdatePanel object and its ilk. Having reviewed many forums, I found dozens of statements that “UpdatePanel - SUCKS”, supported by various disparate explanations. But none of them has ever made me completely dissuade from the negative effect of its use. In this regard, taking on faith that everything said by various Anonymus on the forums is true, I began to dig.
And so it came to that.
1. Build a page without AJAX. Definition for what we need AJAX.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %>
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head runat ="server" >
< title > </ title >
</ head >
< body >
< form id ="form1" runat ="server" >
< div >
< asp:Label ID ="Label1" runat ="server" ></ asp:Label >
< br />
< br />
< asp:Button ID ="Button1" runat ="server" Text ="Button" onclick ="Button1_Click" />
</ div >
</ form >
</ body >
</ html >
* This source code was highlighted with Source Code Highlighter .protected void Button1_Click( object sender, EventArgs e)
{
Label1.Text = DateTime .Now.ToString();
}
* This source code was highlighted with Source Code Highlighter .
protected void Button1_Click( object sender, EventArgs e)
{
Label1.Text = DateTime .Now.ToString();
}
* This source code was highlighted with Source Code Highlighter .
protected void Button1_Click( object sender, EventArgs e)
{
Label1.Text = DateTime .Now.ToString();
}
* This source code was highlighted with Source Code Highlighter .
')
When the page loads in the browser, only the button is present on it. When you press the button, the Label is filled with time.
Before the button was pressed, the page code looks like this:
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >< title >
</ title ></ head >
< body >
< form method ="post" action ="Test.aspx" id ="form1" >
< div class ="aspNetHidden" >
< input type ="hidden" name ="__VIEWSTATE" id ="__VIEWSTATE" value ="/wEPDwUKLTE2MjY5MTY1NWRko6bmPqIZK4XzwlJ+QT95KATKkAm7XgkyNT8uG1kyAYY=" />
</ div >
< div class ="aspNetHidden" >
< input type ="hidden" name ="__EVENTVALIDATION" id ="__EVENTVALIDATION" value ="/wEWAgKd+pPDBwKM54rGBoC4gybAW7W7f/8WUBQh0YQDD1jlQXYgaQH1TnNEFqnS" />
</ div >
< div >
< span id ="Label1" > Label </ span >
< br />
< br />
< input type ="submit" name ="Button1" value ="Button" id ="Button1" />
</ div >
</ form >
</ body >
</ html >
* This source code was highlighted with Source Code Highlighter .When you click on the button, the page code will change as follows:
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >< title >
</ title ></ head >
< body >
< form method ="post" action ="Test.aspx" id ="form1" >
< div class ="aspNetHidden" >
< input type ="hidden" name ="__VIEWSTATE" id ="__VIEWSTATE" value ="/wEPDwUKLTE2MjY5MTY1NQ9kFgICAw9kFgICAQ8PFgIeBFRleHQFEzA2LjA0LjIwMTEgMjI6MzM6MzBkZGSqilrbUiK+hZQi417owBVMMBY0PhVIsFIco8gKMAgDzg==" />
</ div >
< div class ="aspNetHidden" >
< input type ="hidden" name ="__EVENTVALIDATION" id ="__EVENTVALIDATION" value ="/wEWAgLasIQ/AoznisYG8Y0mtUQQkyTrw6eGx7daZxUnrJZkgkJYAwlkImZYyNg=" />
</ div >
< div >
< i >< b >< span id ="Label1" > 06.04.2011 22:33:30 </ span ></ b ></ i >
< br />
< br />
< input type ="submit" name ="Button1" value ="Button" id ="Button1" />
</ div >
</ form >
</ body >
</ html >
* This source code was highlighted with Source Code Highlighter .As we can see, the whole page remains the same. The viewstate and content have changed slightly.
< span id ="Label1" ></ span >
* This source code was highlighted with Source Code Highlighter .Conclusion - not comme il faut.
Building a page with AJAX
Add to the page the elements that Visual Studio offers us, and which are necessary for the implementation of the task: ScriptManager and UpdatePanel.
The page code will change as follows:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %>
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head runat ="server" >
< title > </ title >
</ head >
< body >
< form id ="form1" runat ="server" >
< div >
< asp:ScriptManager ID ="ScriptManager1" runat ="server" >
</ asp:ScriptManager >
< asp:UpdatePanel ID ="UpdatePanel1" runat ="server" >
< ContentTemplate >
< asp:Label ID ="Label1" runat ="server" Text ="Label" ></ asp:Label >
< br />
< br />
< asp:Button ID ="Button1" runat ="server" Text ="Button" onclick ="Button1_Click" />
</ ContentTemplate >
</ asp:UpdatePanel >
</ div >
</ form >
</ body >
</ html >
* This source code was highlighted with Source Code Highlighter .Naturally, when you press a button, a query occurs.
We use a sniffer to examine more closely what is sent to the server, with such a request. And what is taken from it.
Request
ScriptManager1 = UpdatePanel1% 7CButton1 & __ EVENTTARGET = & __ EVENTARGUMENT = &
__VIEWSTATE =% 2FwEPDwULLTEyNTU5OTE4NDBkZBeGYz2ykWCdLe% 2FOqUGKO6XyNu
fetXoAHtWu% 2B6HogbQM & __ EVENTVALIDATION =% 2FwEWAgLfxMyuBgKM54rGBm5yI89
MSG1Ab3% 2FionirqDlYwJw90SrasAVtECg7kMKg & __ ASYNCPOST = true & Button1 = Button
Response
1 | # || 4 | 172 | updatePanel | UpdatePanel1 |
< span id ="Label1" > 06.04.2011 22:45:32 </ span >
< br />
< br />
< input type ="submit" name ="Button1" value ="Button" id ="Button1" />
|144|hiddenField|__VIEWSTATE|/wEPDwULLTEyNTU5OTE4NDAPZBYCAgMPZBYCAgMPZBY
CZg9kFgICAQ8PFgIeBFRleHQFEzA2LjA0LjIwMTEgMjI6NDU6MzJkZGSsSgFqm7m2vsFaoPo+4cjv
hIKZqpewoFXAcOyEREOqHw==|64|hiddenField|__EVENTVALIDATION|/wEWAgKhlZm1BwKM5
4rGBneyIIjYM0XM0O/oSExJWXVpXaQHZzYDddopSIBcDVj+|0|asyncPostBackControlIDs|||0|
postBackControlIDs|||26|updatePanelIDs||tUpdatePanel1,UpdatePanel1|0|
childUpdatePanelIDs|||25|panelsToRefreshIDs||UpdatePanel1,UpdatePanel1|2|
asyncPostBackTimeout||90|9|formAction||Test.aspx|18|pageTitle|| |
If we look at the answer closer, we will see in it something resembling the contents of our UpdatePanel and the new ViewState. And all this in size is much smaller than the whole page. In principle, we achieved this. Plus nothing blinks. And if you think a bit and pull out the button that calls the request from the guts of UpdatePanel, it turns out to be even less, but what kind of ViewState it is. After all, it is formed on the basis of all controls on the page, not only those that are updated asynchronously. It turns out that when using UpdatePanel, a page goes through its entire cycle, regardless of how the request goes: synchronously or asynchronously.
This fact of course could be the last nail in the coffin of UpdatePanel. But the guys from Microsoft, would not be guys from Microsoft, if they had left it all just like that.
All this is corrected quite simply by adding the following condition in the program code:
if (!ScriptManager1.IsInAsyncPostBack)
{
Label1.Text = " ";
}
* This source code was highlighted with Source Code Highlighter .This condition must be added to the page creation handlers.
Everything that is inside this condition will not be executed at each asynchronous loading, and everything else will be.
Refuse to use UpdatePanel
Everything seems to be fine now. Everyone is happy, but, in my opinion, some sediment remains, and how it works is not understood.
Someone seemed to be talking about Web Services somewhere ...
Here let us go about them and continue.
Add a new WebService to our site and uncomment the attribute [System.Web.Script.Services.ScriptService]
In Visual Studio 2010, the function is automatically generated in it:
[WebMethod]
public string HelloWorld() {
return "Hello World" ;
}
* This source code was highlighted with Source Code Highlighter .We will not change anything in it.
Next we have to do the following:
1) explain the page where web services are located
2) create a javascript function that accesses the web service
3) create a trigger for this function
And our page will change to this form:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %>
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head runat ="server" >
< title > , UpdatePanel </ title >
</ head >
< body >
< form id ="form1" runat ="server" >
< div >
< script >
function GetResult() {
WebService.HelloWorld( function (result) {
$get( 'Label1' ).innerHTML = result;
});
}
</ script >
< asp:ScriptManager ID ="ScriptManager1" runat ="server" >
< Services >
< asp:ServiceReference Path ="~/WebService.asmx" />
</ Services >
</ asp:ScriptManager >
< asp:Label ID ="Label1" runat ="server" Text ="Label" ClientIDMode ="Static" ></ asp:Label >
< br />
< br />
< input type ="button" onclick ="GetResult()" value ="Button" />
</ div >
</ form >
</ body >
</ html >
* This source code was highlighted with Source Code Highlighter .If you look at the answer that the server gave us, it will be like this:
{"D": "Hello World"}
Conclusion: Everything turned out cool.
xmlHttpRequest object
If you plunge deeper into this topic, then all of the above works through a simple xmlHttpRequest object. But that's another story.
So, as I always had problems with the formulation of the resulting conclusions, I, with the official permission of the habrauzer Shedal, write his words:
I would say that UpdatePanel really makes it easier to develop, and, of course, when you exchange data with the server, you get less traffic than with a full page reload. However, the amount of data transferred is often still greater than the minimum required. In most cases, this is absolutely not critical, but sometimes, with active data exchange with the server, it is better to use web services as a replacement for asynchronous postbacks.
In general, web services have a much wider range of applications and there can be many reasons to choose them. For example, the versatility of a software interface for exchanging data with a server in order to create several user interfaces (eg, mobile, desktop and web). And even in this case, it is quite normal when web services are used only as a layer between business logic and the interface, and the interface still operates with standard ASP.NET tools, including UpdatePanel using web services for data exchange only.
At the same time, UpdatePanel has many advantages, because, unlike web services, they were developed specifically for asynchronous changes to the HTML code of a page. Hence, convenient triggers, nesting of panels, automatic rendering (which you would otherwise have to implement manually on JS), and much more.
and further:
Image can not be loaded asynchronously! Only emulate asynchronous loading.
All success!)
Source: https://habr.com/ru/post/116994/
All Articles