4.0


Hi all

Some days back I was working with update panels and I created a simple application with multiple update panels on my page. Update panels were fetching data from a third part content management system, so sending a request, fetching and displaying the data was not a tricky part of the application but that used to take around 30 to 40 seconds per request.

Initially It was good but later when we customized our application to allow user to add multiple update panels on 1 page, we got stuck with performance issues, when user tried to load a page it used to take 1 or 2 minutes to complete page output.

I searched a lot to find out the way to improve the page performance, I got the idea of lazy loading but that worked well if there was only 1 update panel on the page. After spending lot of time, finally I figured out the lazy loading implementation with unlimited number of update panels, so in ideal situation a web page loads immediately without any third party call and after page load is completed it execute update panel refresh calls from JavaScript and shows a progress bar when update panel is loading the data. So if you have n number of update panels placed on your web page, the update panel placed at first position will start loading and after that 2nd panel load will start then 3rd and so on.

So for the clear understanding of this concept I am creating a user control and that user controls has 1 update panel and some other content controls, I will drop the user control on my page 4 times, so there will be 4 update panels rendered.

Here is the sample script for user control

<asp:UpdatePanel
ID=”upUpdatePanel” runat=”server” UpdateMode=”Conditional” OnPreRender=”upUpdatePanel_PreRender”>

<ContentTemplate><asp:LinkButtonID=”LinkButton1″ runat=”server” Enabled=”false” ForeColor=”Black”Font-Bold=”true” Font-Size=”Large” onclick=”LinkButton1_Click”>LinkButton disabled so far</asp:LinkButton>

<br /><br />

<asp:LabelID=”Label2″ runat=”server” Text=”Label”></asp:Label><asp:HiddenFieldID=”HiddenField1″ runat=”server”/>

<asp:GridView
ID=”GridView1″ runat=”server” PageSize=”3″ AllowPaging=”True” OnPageIndexChanging=”GridView1_PageIndexChanging”>

</asp:GridView>

</ContentTemplate>

</asp:UpdatePanel>

<asp:UpdateProgress
ID=”updProgressTab” runat=”server” AssociatedUpdatePanelID=”upUpdatePanel”>

<ProgressTemplate><divstyle=”position: relative; top: 50%; text-align: center;”>

<asp:ImageID=”imgLoading1″ runat=”server” ImageUrl=”simple.gif” Width=”34px” Height=”30px”/>Refreshing…

</div>

</ProgressTemplate>

</asp:UpdateProgress>

Note : update panel’s update mode is “conditional” and I have registered on_PreRender event of the update panel.

For on_preRender I have implemented this logic :

protected
void upUpdatePanel_PreRender(object sender, EventArgs e)

{


string eventTarget = Request.Params[“__EVENTTARGET”] as
string;


if (string.IsNullOrEmpty(eventTarget) == false)

{


if (eventTarget.StartsWith(this.ID))

{

System.Threading.Thread.Sleep(2000);

LinkButton1.Enabled = true;

LinkButton1.Text = “Enabled Now”;


this.Label2.Text = DateTime.Now.ToString();

BindGrid1();

}

}

}

So I guess nothing special in the code logic, I am just trying to load a grid with hard coded values and with 2 second time interval.

So here is the tricky and most important part of the topic

StringBuilder sb = new
StringBuilder();

sb.Append(“var loopCounter = -1;”);

sb.Append(“function pageLoad(sender, e) {“);

sb.Append(“if (!e.get_isPartialLoad()) {“);

sb.Append(“var refreshPanels = $(\”[id*=\” + \”upUpdatePanel\” + \”]\”);”);

sb.Append(“Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);”);

sb.Append(“var panel = refreshPanels[++loopCounter];”);

sb.Append(“__doPostBack(panel.id, ‘1’);”);

sb.Append(“}function EndRequestHandler() {“);

sb.Append(“var panel = refreshPanels[++loopCounter];”);

sb.Append(“if (panel==null) {“);

sb.Append(“Sys.WebForms.PageRequestManager.getInstance().remove_endRequest(EndRequestHandler);”);

sb.Append(“}”);

sb.Append(“else {“);

sb.Append(“__doPostBack(panel.id, ‘2’);}}”);

sb.Append(“}”);

Page.ClientScript.RegisterClientScriptBlock(typeof(Page), “MYScript”, sb.ToString(), true);

Let me explain in detail.

  • First thing you need to know is that this will be rendered from controls load event
  • I am calling some script after page load event.
  • $(\”[id*=\” + \”upUpdatePanel\” + \”]\”);”)” this part is basically a JQuery selector that selects all divs having id “upUpdatePanel”, which is id of my update panel.
  • After that I am registering an end request event handler, that will be raised when update panel load request is completed.
  • I am looping through all panels and calling __doPostBack of each update panel. __doPostBack will call “upUpdatePanel_PreRender” event.
  • In EndRequestHsndler I am checking if there is another update panel remaining then call its __doPostBack otherwise simple remove end request event handler.

In my page I have dropped 4 user controls

<table
border=”0″ cellpadding=”0″ cellspacing=”0″ width=”100%”>

<tr><td

style=”width: 50%”>

<uc1:WebUserControl1ID=”WebUserControl11″ runat=”server”/>

</td>

<tdstyle=”width: 50%”>

<uc1:WebUserControl1ID=”WebUserControl12″ runat=”server”/>

</td>

</tr>

<tr>

<tdstyle=”width: 50%”>

<uc1:WebUserControl1ID=”WebUserControl13″ runat=”server”/>

</td>

<tdstyle=”width: 50%”><uc1:WebUserControl1ID=”WebUserControl14″ runat=”server”

/>

</td>

</tr>

</table>

This shows page output like


In above screen you can see first panel is being refreshed.


Now first panel has been loaded and now second panel is being refreshed. Same for 3rd and fourth



http://www.4shared.com/folder/Ryz_jgeH/Lazy_Loading.html

you can download code form above link and off course leave a comment if you did like my effort 🙂 

Hi all
today i was trying to deploy my asp.net application on windows 7, 1st step completed successfully but after making some updates in my web.config file i got some deployment errors, after goggling i found there have a lot of modification in new IIS 7+ which a developer must know before deploying the application, i have listed them for your assistance.

Migration errors

These errors occur due to changes in how some ASP.NET configuration is applied in Integrated mode.  IIS will automatically detect this configuration and issue an error asking you to migrate your application, or move it to classic mode if migration is not acceptable (See breaking change #3 below).

 

1) ASP.NET applications require migration when specifying configuration in <httpModules> or <httpHandlers>.

You will receive a 500 – Internal Server Error.  This can include HTTP Error 500.22, and HTTP Error 500.23: An ASP.NET setting has been detected that does not apply in Integrated managed pipeline mode.

It occurs because ASP.NET modules and handlers should be specified in the IIS <handlers> and <modules> configuration sections in Integrated mode.

Workaround:

1) You must migrate the application configuration to work properly in Integrated mode.  You can migrate the application configuration with AppCmd:

> %windir%\system32\inetsrv\Appcmd migrate config “<ApplicationPath>”

2) You can migrate manually by moving the custom entries in in the <system.web>/<httpModules> and <system.web>/<httpHandlers> configuration manually to the <system.webServer>/<handlers> and <system.webServer>/<modules> configuration sections, and either removing the <httpHandlers> and <httpModules> configuration OR adding the following to your application’s web.config:

<system.webServer>

<validation validateIntegratedModeConfiguration=”false” />

</system.webServer>

 

2) ASP.NET applications produce a warning when the application enables request impersonation by specifying <identity impersonate=”true”> in configuration

You will receive a 500 – Internal Server Error. This is HTTP Error 500.24: An ASP.NET setting has been detected that does not apply in Integrated managed pipeline mode.

It occurs because ASP.NET Integrated mode is unable to impersonate the request identity in the BeginRequest and AuthenticateRequest pipeline stages.


Workaround
:

1) If your application does not rely on impersonating the requesting user in the BeginRequest and AuthenticateRequest stages (the only stages where impersonation is not possible in Integrated mode), ignore this error by adding the following to your application’s web.config:
<system.webServer>

<validation validateIntegratedModeConfiguration=”false” />

</system.webServer>

2) If your application does rely on impersonation in BeginRequest and AuthenticateRequest, or you are not sure, move to classic mode.

 

3) You receive a configuration error when your application configuration includes an encrypted <identity> section.

You will receive a 500 – Internal Server Error.  This is HTTP Error 500.19: The requested page cannot be accessed because the related configuration data for the page is invalid.
The detailed error information indicates that “Configuration section encryption is not supported”.

It occurs because IIS attempts to validate the <identity> section and fails to read section-level encryption.


Workaround:

1) If your application does not have the problem with request impersonation per breaking change #2, migrate your application configuration by using AppCmd as described in breaking change #1:

> %windir%\system32\inetsrv\Appcmd migrate config “<ApplicationPath>”

This will insure that the rest of application configuration is migrated, and automatically add the following to your application’s web.config to ignore the <identity> section:

<system.webServer>

<validation validateIntegratedModeConfiguration=”false” />

</system.webServer>

2) If your application does have the problem with request impersonation, move to classic mode.

 

Authentication, Authorization, and Impersonation

In Integrated mode, both IIS and ASP.NET authentication stages have been unified.  Because of this, the results of IIS authentication are not available until the PostAuthenticateRequest stage, when both ASP.NET and IIS authentication methods have completed.  This causes the following changes:

 

 

4) Applications cannot simultaneously use FormsAuthentication and WindowsAuthentication

Unlike Classic mode, it is not possible to use Forms Authentication in ASP.NET and still require users to authenticate with an IIS authentication method including Windows Authentication, Basic Authentication, etc.  If Forms Authentication is enabled, all other IIS authentication methods except for Anonymous Authentication should be disabled.
In addition, when using Forms Authentication, the following changes are in effect:

–       The LOGON_USER server variable will be set to the name of the Forms Authentication user.

–       It will not be possible to impersonate the authenticated client.  To impersonate the authenticated client, you must use an authentication method that produces a Windows user instead of Forms Authentication.

Workaround:

1) Change your application to use the pattern explained in Implementing a two level authentication scheme using Forms Authentication and another IIS authentication method in IIS 7.0.

 

 

5) Windows Authentication is performed in the kernel by default.  This may cause HTTP clients that send credentials on the initial request to fail.

IIS 7.0 Kernel-mode authentication is enabled by default in IIS 7.0.  This improves the performance of Windows Authentication, and simplifies the deployment of Kerberos authentication protocol.  However, it may cause some clients that send the windows credentials on the initial request to fail due to a design limitation in kernel-mode authentication.  Normal browser clients are not affected because they always send the initial request anonymously.

NOTE: This breaking change applies to both Classic and Integrated modes.


Workaround:

1) Disable kernel-mode authentication by setting the userKernelMode to “false” in the system.webServer/security/authentication/windowsAuthentication section.  You can also do it by AppCmd as follows:

> %windir%\system32\inetsrv\appcmd set config /section:windowsAuthentication /useKernelMode:false

 

6) Passport authentication is not supported.

You will receive an ASP.NET 500 – Server Error: The PassportManager object could not be initialized. Please ensure that Microsoft Passport is correctly installed on the server.

Passport authentication is no longer supported on Windows Vista and Windows Server 2008.  NOTE: This breaking change applies to both Classic and Integrated modes.

 

 

7) HttpRequest.LogonUserIdentity throws an InvalidOperationException when accessed in a module before PostAuthenticateRequest

You will receive an ASP.NET 500 – Server Error: This method can only be called after the authentication event.

HttpRequest.LogonUserIdentity throws an InvalidOperationException when accessed before PostAuthenticateRequest, because the value of this property is unknown until after the client has been authenticated.


Workaround:

1) Change the code to not access HttpRequest.LogonUserIdentity until at least PostAuthenticateRequest

 

 

8) Client impersonation is not applied in a module in the BeginRequest and AuthenticateRequest stages.

The authenticated user is not known until the PostAuthenticateRequest stage.  Therefore, ASP.NET does not impersonate the authenticated user for ASP.NET modules that run in BeginRequest and AuthenticateRequest stages.  This can affect your application if you have custom modules that rely on the impersonating the client for validating access to or accessing resources in these stages.

Workaround:

1) Change your application to not require client impersonation in BeginRequest and AuthenticateRequest stages.

 

9) Defining an DefaultAuthentication_OnAuthenticate method in global.asax throws PlatformNotSupportedException

You will receive an ASP.NET 500 – Server Error: The DefaultAuthentication.Authenticate method is not supported by IIS integrated pipeline mode.

In Integrated mode, the DefaultAuthenticationModule.Authenticate event in not implemented and hence no longer raises. In Classic mode, this event is raised when no authentication has occurred.


Workaround:

1) Change application to not rely on the DefaultAuthentication_OnAuthenticate event.  Instead, write an IHttpModule that inspects whether HttpContext.User is null to determine whether an authenticated user is present.

 

 

10) Applications that implement WindowsAuthentication_OnAuthenticate in global.asax will not be notified when the request is anonymous[M2]

If you define the WindowsAuthentication_OnAuthenticate method in global.asax, it will not be invoked for anonymous requests.  This is because anonymous authentication occurs after the WindowsAuthentication module can raise the OnAuthenticate event.

 

Workaround:

1) Change your application to not use the WindowsAuthentication_OnAuthenticate method.  Instead, implement an IHttpModule that runs in PostAuthenticateRequest, and inspects HttpContext.User.

 

Request limits and URL processing

The following changes result due to additional restrictions on how IIS processes incoming requests and their URLs.

 

11) Request URLs containing unencoded “+” characters in the path (not querystring) is rejected by default

You will receive HTTP Error 404.11 – Not Found: The request filtering module is configured to deny a request that contains a double escape sequence.

This error occurs because IIS is by default configured to reject attempts to doubly-encode a URL, which commonly represent an attempt to execute a canonicalization attack.
Workaround:

1) Applications that require the use of the “+” character in the URL path can disable this validation by setting the allowDoubleEscaping attribute in the system.webServer/security/requestFiltering configuration section in the application’s web.config.  However, this may make your application more vulnerable to malicious URLs:

<system.webServer>

<security>

<requestFiltering allowDoubleEscaping=”true” />

</security>

</system.webServer>

 

12) Requests with querystrings larger then 2048 bytes will be rejected by default

You will receive an HTTP Error 404.15 – Not Found: The request filtering module is configured to deny a request where the query string is too long.

IIS by default is configured to reject querystrings longer than 2048 bytes.  This may affect your application if it uses large querystrings or uses cookieless ASP.NET features like Forms Authentication and others that cumulatively exceed the configured limit on the querystring size.

NOTE: This breaking change applies to both Classic and Integrated modes.


Workaround
:

1) Increase the maximum querystring size by setting the maxQueryString attribute on the requestLimits element in the system.webServer/security/requestFiltering configuration section in your application’s web.config:

<system.webServer>

<security>

<requestFiltering>

<requestLimits maxQueryString=”NEW_VALUE_IN_BYTES” />

</requestFiltering>

</security>

</system.webServer>

Changes in response header processing

These changes affect how response headers are generated by the application.

 

13) IIS always rejects new lines in response headers (even if ASP.NET enableHeaderChecking is set to false)

If your application writes headers with line breaks (any combination of \r, or \n), you will receive an ASP.NET 500 – Server Error: Value does not fall within the expected range.

IIS will always reject any attempt to produce response headers with line breaks, even if ASP.NET’s enableHeaderChecking behavior is disabled.  This is done to prevent header splitting attacks.

NOTE: This breaking change applies to both Classic and Integrated modes.

 

14) When the response is empty, the Content-Type header is not suppressed

If the application sets a Content-Type header, it will remain present even if the response is cleared.  Requests to ASP.NET content types will typically have the “Content-Type: text/html” present on responses unless overridden by the application.
Workaround:
1) While this should not typically have a breaking effect, you can remove the Content-Type header by explicitly setting the HttpResponse.ContentType property to null when clearing the response.

 

15) When the response headers are cleared with HttpResponse.ClearHeaders, default ASP.NET headers are not generated.  This may result in the lack of Cache-Control: private header that prevents the caching of the response on the client

HttpResponse.ClearHeaders does not re-generate default ASP.NET response headers, including “Content-Type: text/html” and “Cache-Control: private”, as it does in Classic mode.  This is because ASP.NET modules may call this API for requests to any resource type, and therefore generating ASP.NET-specific headers is not appropriate.  The lack of the “Cache-Control” header may cause some downstream network devices to cache the response.
Workaround:
1) Change application to manually generate the Cache-Control: private header when clearing the response, if it is desired to prevent caching in downstream network devices.

 

Changes in application and module event processing

These changes affect how the application and module event processing takes place.

 

16) It is not possible to access the request through the HttpContext.Current property in Application_Start in global.asax

If your application accesses the current request context in the Application_Start method in global.asax as part of application initialization, you will receive an ASP.NET 500 – Server Error: Request is not available in this context.

This error occurs because ASP.NET application initialization has been decoupled from the request that triggers it.  In Classic mode, it was possible to indirectly access the request context by accessing the HttpContext.Current property.  In Integrated mode, this context no longer represents the actual request and therefore attempts to access the Request and Response objects will generate an exception.


Workaround:

1) See Request is not available in this context exception in Application_Start for a detailed description of this problem and available workarounds.

 

17) The order in which module event handlers execute may be different then in Classic mode

The following differences exist:

–       For each event, event handlers for each module are executed in the order in which modules are configured in the <modules> configuration section.  Global.asax event handlers are executed last.

–       Modules that register for the PreSendRequestHeaders and PreSendRequestContent events are notified in the reverse of the order in which they appear in the <modules> configuration section

–       For each event, synchronous event handlers for each module are executed before asynchronous handlers.  Otherwise, event handlers are executed in the order in which they are registered.

Applications that have multiple modules configured to run in either of these events may be affected by these change if they share a dependency on event ordering.  This is not likely for most applications.  The order in which modules execute can be obtained from a Failed Request Tracing log.
Workaround:
1) Change the order of the modules experiencing an ordering problem in the system.webServer/modules configuration section.

 

18) ASP.NET modules in early request processing stages will see requests that previously may have been rejected by IIS prior to entering ASP.NET.  This includes modules running in BeginRequest seeing anonymous requests for resources that require authentication.

ASP.NET modules can run in any pipeline stages that are available to native IIS modules.  Because of this, requests that previously may have been rejected in the authentication stage (such as anonymous requests for resources that require authentication) or other stages prior to entering ASP.NET may run ASP.NET modules.

This behavior is by design in order to enable ASP.NET modules to extend IIS in all request processing stages.

 

Workaround:

1) Change application code to avoid any application-specific problems that arise from seeing requests that may be rejected later on during request processing.  This may involve changing modules to subscribe to pipeline events that are raised later during request processing.

 

 

Other application changes

Other changes in the behavior of ASP.NET applications and APIs.

 

 

19) DefaultHttpHandler is not supported.  Applications relying on sub-classes of DefaultHttpHandler will not be able to serve requests.[M3]

If your application uses DefaultHttpHandler or handlers that derive from DefaultHttpHandler, it will not function correctly.  In Integrated mode, handlers derived from DefaultHttpHandler will not be able to pass the request back to IIS for processing, and instead serve the requested resource as a static file.  Integrated mode allows ASP.NET modules to run for all requests without requiring the use of DefaultHttpHandler.

 

Workaround:

1) Change your application to use modules to perform request processing for all requests, instead of using wildcard mapping to map ASP.NET to all requests and then using DefaultHttpHandler derived handlers to pass the request back to IIS.

 

 

20) It is possible to write to the response after an exception has occurred.

In Integrated mode, it is possible to write to and display an additional response written after an exception has occurred, typically in modules that subscribe to the LogRequest and EndRequest events. This does not occur in Classic mode. If an error occurs during the request, and the application writes to the response in EndRequest after the exception has occurred, the response information written in EndRequest will be shown. This only affects requests that include unhandled exceptions. To avoid writing to the response after an exception, an application should check HttpContext.Error or HttpResponse.StatusCode before writing to the response.

 

 

21) It is not possible to use the ClearError API to prevent an exception from being written to the response if the exception has occurred in a prior pipeline stage

Calling Server.ClearError during the EndRequest event does not clear the exception if it occurred during an earlier event within the pipeline.  This is because the exception is formatted to the response at the end of each event that raises an exception.

Workaround:

1) Change your application to call Server.ClearError from the Application_OnError event handler, which is raised whenever an exception is thrown.

 

 

22) HttpResponse.AppendToLog does not automatically prepend the querystring to the URL.[M4]

When using HttpResponse.AppendToLog to append a custom string to the URL logged in the request log file, you will manually need to prepend the querystring to the string you pass to this API.  This may result in existing code losing the querystring from the logged URL when this API is used.
Workaround:

1) Change your application to manually prepend HttpResponse.QueryString.ToString() to the string passed to HttpResponse.AppendToLog.

 

Other changes

Other changes.

 

23) ASP.NET threading settings are not used to control the request concurrency in Integrated mode

The minFreeThreads, minLocalRequestFreeThreads settings in the system.web/httpRuntime configuration section and the maxWorkerThreads setting in the processModel configuration section no longer control the threading mechanism used by ASP.NET.  Instead, ASP.NET relies on the IIS thread pool and allows you to control the maximum number of concurrently executing requests by setting the MaxConcurrentRequestsPerCPU DWORD value (default is 12) located in the HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\ASP.NET\2.0.50727.0 key.  This setting is global and cannot be changed for individual application pools or applications.

 

Workaround:

1) To control the concurrency of your application, set the MaxConcurrentRequestsPerCPU setting.

 

24) ASP.NET application queues are not used in Integrated mode.  Therefore, the “ASP.NET Applications\Requests in Application Queue” performance counter will always have a value of 0

ASP.NET does not use application queues in Integrated mode.

 

25) IIS 7.0 always restarts ASP.NET applications when changes are made to the application’s root web.config file.  Because of this, waitChangeNotification and maxWaitChangeNotification attributes have no effect.

IIS 7.0 monitors changes to the web.config files as well, and cause the ASP.NET application corresponding to this file to be restarted without regard to the ASP.NET change notification settings including the waitChangeNotification and maxWaitChangeNotification attributes in the system.web/httpRuntime configuration sections.

 

 

26) ASP.NET deadlock detection is not supported in Integrated mode.

ASP.NET 2.0 Classic mode supports a deadlock detection mechanism which monitors ASP.NET responses and considers the process deadlocked if no responses have been received in more then the amount of time specified in the <processModel responseDeadlockInterval> setting, and there are more than a certain number of requests outstanding.  In this case, the process is marked unhealthy and a new process is eventually started.  In Integrated mode, this feature is not supported.  If your application is prone to deadlocks, it may lead to deadlock conditions being undetected, however it should have no effect on healthy applications that do not exhibit deadlocks.

 

I have excerpted a good article on page methods technique, hope fully you will take advantage of it.

This article shows you how to use ASP.NET AJAX PageMethods to perform Create, Read, Update and Delete (CRUD) operations with an HTML table. Here HTML table acts as a light-weight DataGrid.

Inorder to make PageMethods work, following things need to be done:

  1. ScriptManager should be added to your ASPX page.
  2. EnablePageMethods property of the ScriptManager should be set to true.
  3. System.Web.Services namespace should be added as reference on your codebehind class.
  4. Page Methods on your code-behind should be decorated with [WebMethod] attribute.

First let us start with Read.

As mentioned above, add a ScriptManager and set its ‘EnablePageMethods’ property to true. Add an HTML button and an onclick handler to it, and then add an HTML table with thead, tbody and tfoot. Since the HTML table will be referenced from javascript, add id to the table and its body. Here, only HTML tags/controls are used because, server side controls cannot be referenced in PageMethods.


Your ASPX page should look something like this.

<body>

<form id=”form1″ runat=”server”>

<asp:ScriptManager ID=”ScriptManager1″ runat=”server” EnablePageMethods =”true” ></asp:ScriptManager>

<%–This click event handles loading data from the database–%>

<input id=”btn_load” type=”button” value=”Load” onclick = “LoadData()” />

<br /><br />

<div>

<table style=” height: 100%; border: solid 1px #000″ cellpadding=”0″ cellspacing=”1″ id=”tbl_grid” border = “1”>

<thead style = “background-color: #666; color: #fff”>

<tr>

<td style=”width: 100px;”>

Column1

</td>

<td style=”width: 500px;”>

Column2

</td>

<td style=”width: 150px;”>

Edit

</td>

</tr>

</thead>

<tbody id=”tbody_grid”>

</tbody>

<tfoot>

<tr>

<td style=”width: 100px;”>

<input id=”txt_addcol1″ style =”width: 30px” type=”text” />

</td>

<td style=”width: 500px;”>

<input id=”txt_addcol2″ type=”text”  style =”width: 300px” />

</td>

<td style=”width: 150px;”>

<%–This click event handles adding data to the database–%>

<input id=”btn_add” type=”button” onclick = “Add()” value=”Add” />

</td>

</tr>

</tfoot>

</table>

</div>

</form>

</body>

Now add your JavaScript function to load data from the database using PageMethods. PageMethod call should always have a success handler (this will be executed if the page method is executed successfully) and an exception handler (this will be executed if an exception is thrown). Say suppose we added ‘GetData()’ as the page method on the code behind, our javascript will be PageMethods.GetData(SuccessHandler, ExceptionHandler). Just for understanding, I have named the success and exception handler appropriately, you can name them as you wish. In case, the page methods takes parameters, you can add like PageMethods.GetData(param1, param2, SuccessHandler, ExceptionHandler).

Page methods should be decorated with [WebMethod] attribute and should be declared as static. Its signature shoul look something like this:

[WebMethod]

public static string GetData()



Page method to return data to javascript.

public partial class AJAXGrid : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

[WebMethod]

public static IEnumerable<MyEntity> GetData()

{

try

{

Data fetch part should go here

// used List, as collections are serializable. See below for MyEntity class

List<MyEntity> MyEntities = new List<MyEntity>();

MyEntities.Add(“1”, “abc”);

MyEntities.Add(“2”, “xyz”);

MyEntities.Add(“3”, “pqr”);

MyEntities.Add(“4”, “mno”);

return MyEntities;

}

catch(Exception ex)

{

throw ex;

}

}
}

MyEntity class

public class MyEntity

{

private string _Column1;

public string Column1

{

get { return _Column1; }

set { _Column1 = value; }

}

private string _Column2;

public string Column2

{

get { return _Column2; }

set { _Column2 = value; }

}

public MyEntity(string sCol1, string sCol2)

{

_Column1 = sCol1;

_Column2 = sCol2;

}

}

Javascript function that calls page method and populates the HTML table

<script type =”text/javascript” language = “javascript “>

//Loading Data

// Handles btn_load click event

function LoadData() {

// If data was fetched successfully, SuccessHandler will be called; else, ExceptionHandler

PageMethods.GetData(SuccessHandler, ExceptionHandler);

// Incase parameters need to be passed to PageMethods, you can do like this PageMethods.GetData(param1, param2, SuccessHandler, ExceptionHandler)

}

// After fetching the data successfully

function SuccessHandler(result) {

var tbody = $get(“tbody_grid”);

// clear the table

for (var j = tbody.rows.length; j > 0; j–) {

tbody.deleteRow(j – 1);

}

// populate the table

for (var i = 0; i < result.length; i++) {

//two columns fetched from database are sent as parameters

AddRow(result[i].Column1, result[i].Column2);

}

return true;

}

// Edit and Delete buttons are added to the rows

function AddRow(col1, col2) {

var tbody = $get(“tbody_grid”);

var row = document.createElement(“tr”)

var td1 = document.createElement(“td”)

td1.innerText = col1;

var td2 = document.createElement(“td”);

td2.innerText = col2;

var td3 = document.createElement(“td”);

// add buttons

var btnEdit = document.createElement(‘input’);

btnEdit.setAttribute(‘type’, ‘button’);

btnEdit.setAttribute(‘name’, ‘Edit’);

btnEdit.setAttribute(‘value’, ‘Edit’);

// first parentNode represents <td> and the second represents <tr>

btnEdit.onclick = function() { Edit(this.parentNode.parentNode); };

var btnDelete = document.createElement(‘input’);

btnDelete.setAttribute(‘type’, ‘button’);

btnDelete.setAttribute(‘name’, ‘Delete’);

btnDelete.setAttribute(‘value’, ‘Delete’);

btnDelete.onclick = function() { DeleteRow(this.parentNode.parentNode); };

td3.appendChild(btnEdit);

td3.appendChild(btnDelete);

row.appendChild(td1);

row.appendChild(td2);

row.appendChild(td3);

tbody.appendChild(row);

}

// Handles exception

function ExceptionHandler(result) {

}

After populating the HTML table



Javascript functions to handle Edit, Update, Delete and Insert:


Editing Data

//  this function handles edit button click

function Edit(row) {

var col1 = row.childNodes[0].innerText;

var col2 = row.childNodes[1].innerText;

// populates values in textboxes and displays Update and Cancel buttons

var editableRow = document.createElement(“tr”)

var td1 = document.createElement(“td”)

var txtBox1 = document.createElement(‘input’);

txtBox1.setAttribute(‘type’, ‘text’);

txtBox1.setAttribute(‘name’, ‘col1’);

txtBox1.setAttribute(‘value’, col1);

txtBox1.setAttribute(‘width’, 30);

td1.appendChild(txtBox1);

var td2 = document.createElement(“td”);

var txtBox2 = document.createElement(‘input’);

txtBox2.setAttribute(‘width’, 300);

txtBox2.setAttribute(‘type’, ‘text’);

txtBox2.setAttribute(‘name’, ‘col1’);

txtBox2.setAttribute(‘value’, col2);

td2.appendChild(txtBox2);

var td3 = document.createElement(“td”);

var btnUpdate = document.createElement(‘input’);

btnUpdate.setAttribute(‘type’, ‘button’);

btnUpdate.setAttribute(‘name’, ‘Update’);

btnUpdate.setAttribute(‘value’, ‘Update’);

btnUpdate.onclick = function() { Update(this.parentNode.parentNode); };

var btnCancel = document.createElement(‘input’);

btnCancel.setAttribute(‘type’, ‘button’);

btnCancel.setAttribute(‘name’, ‘Cancel’);

btnCancel.setAttribute(‘value’, ‘Cancel’);

btnCancel.onclick = function() { Cancel(this.parentNode.parentNode); };

td3.appendChild(btnUpdate);

td3.appendChild(btnCancel);

editableRow.appendChild(td1);

editableRow.appendChild(td2);

editableRow.appendChild(td3);

row.parentNode.replaceChild(editableRow, row);

}

After edit button click

Updating Data

//  this function handles update button click

function Update(row) {

// fetches values entered in the textboxes

// first childNode represent <td> inside <tr> and second childNode represents textbox

var col1 = row.childNodes[0].childNodes[0].value;

var col2 = row.childNodes[1].childNodes[0].value;

// values sent to server

PageMethods.UpdateData(col1, col2, UpdateSuccess(row), ExceptionHandler);

}

// After updating the values successfully

function UpdateSuccess(row) {

var col1 = row.childNodes[0].childNodes[0].value;

var col2 = row.childNodes[1].childNodes[0].value;

var editableRow = document.createElement(“tr”)

var td1 = document.createElement(“td”)

td1.innerText = col1;

var td2 = document.createElement(“td”);

td2.innerText = col2;

var td3 = document.createElement(“td”);

var btnEdit = document.createElement(‘input’);

btnEdit.setAttribute(‘type’, ‘button’);

btnEdit.setAttribute(‘name’, ‘Edit’);

btnEdit.setAttribute(‘value’, ‘Edit’);

btnEdit.onclick = function() { Edit(this.parentNode.parentNode); };

var btnDelete = document.createElement(‘input’);

btnDelete.setAttribute(‘type’, ‘button’);

btnDelete.setAttribute(‘name’, ‘Delete’);

btnDelete.setAttribute(‘value’, ‘Delete’);

btnDelete.onclick = function() { DeleteRow(this.parentNode.parentNode); };

td3.appendChild(btnEdit);

td3.appendChild(btnDelete);

editableRow.appendChild(td1);

editableRow.appendChild(td2);

editableRow.appendChild(td3);

row.parentNode.replaceChild(editableRow, row);

}

// this function handles cancel button click

function Cancel(row) {

// values are again populated in labels instead of textboxes

var col1 = row.childNodes[0].childNodes[0].value;

var col2 = row.childNodes[1].childNodes[0].value;

var editableRow = document.createElement(“tr”)

var td1 = document.createElement(“td”)

td1.innerText = col1;

var td2 = document.createElement(“td”);

td2.innerText = col2;

var td3 = document.createElement(“td”);

var btnEdit = document.createElement(‘input’);

btnEdit.setAttribute(‘type’, ‘button’);

btnEdit.setAttribute(‘name’, ‘Edit’);

btnEdit.setAttribute(‘value’, ‘Edit’);

btnEdit.onclick = function() { Edit(this.parentNode.parentNode); };

var btnDelete = document.createElement(‘input’);

btnDelete.setAttribute(‘type’, ‘button’);

btnDelete.setAttribute(‘name’, ‘Delete’);

btnDelete.setAttribute(‘value’, ‘Delete’);

btnDelete.onclick = function() { DeleteRow(this.parentNode.parentNode); };

td3.appendChild(btnEdit);

td3.appendChild(btnDelete);

editableRow.appendChild(td1);

editableRow.appendChild(td2);

editableRow.appendChild(td3);

row.parentNode.replaceChild(editableRow, row);

}

//  this function handles ‘add’ button click

function Add() {

var col1 = $get(“txt_addcol1”).value;

var col2 = $get(“txt_addcol2”).value;

// data sent to the database

PageMethods.InsertData(col1, col2, AddSuccess(col1, col2), ExceptionHandler);

}

// After adding the data successfully

function AddSuccess(col1, col2) {

// add the values to the table

AddRow(col1, col2);

// clear the textboxes in the footer

$get(“txt_addcol1”).value = “”;

$get(“txt_addcol2”).value = “”;

}

Deleting Data

// this function handles delete button click

function DeleteRow(row) {

var col1 = row.childNodes[0].innerText;

// delete from the database

PageMethods.DeleteData(col1, DeleteSuccess(row), ExceptionHandler);

}

function DeleteSuccess(row) {

// delete the row from the table

var tbody = $get(“tbody_grid”);

tbody.removeChild(row);

}

</script>

Page methods to handle Edit, Update, Delete and Insert:

[WebMethod]

public static void UpdateData(string sCol1, string sCol2)

{

try

{

Data update part should go here

}

catch(Exception ex)

{

throw ex;

}

}

[WebMethod]

public static void InsertData(string sCol1, string sCol2)

{

try

{

Data insert part should go here

}

catch(Exception ex)

{

throw ex;

}

}

[WebMethod]

public static void DeleteData(string sCol1)

{

try

{

Data delete part should go here

}

catch (Exception ex)

{

throw ex;

}

}

}

We can add paging and sorting too.


This code has been tested in IE7+, Firefox, Chrome and Safari.

Some of the limitations in using ASP.NET AJAX PageMethods:

1.       We can’t access asp.net server controls (like TextBox control) in the WebMethod directly as we normally access in the server side methods.

2.       We can’t access any variable declared in the code behind.

Advantage: PageMethods is a simple lightweight way to submit/fetch data to the server using ASP.NET AJAX. This doesn’t submit whole page data to the server and also as opposed to the ASP.NET AJAX call back this doesn’t even fire the Page_Load and other Page events of the code behind page

Upto Visual Studio 2008, one can set the Title of the page declaratively or through program using Page.Title.  However, as more and more web traffic is happening through search engines, Page’s Title, Keyword and description become more important.  Although the Keyword feature was exploited and hence many search engines today ignore it, Page Description is something still major search engines such as Google, Bing use for identifying and indexing pages based on content.

The new feature in ASP.NET 4.0 allows users to programmatically set the Page Description and Keywords as follows:-

protected void Page_Load(object sender, EventArgs e)
{

this.Page.Title = “My ASP.NET Blog”;

this.Page.MetaKeywords = “ASP.NET, Web Development, Blog, ASP.NET Blog”;

this.Page.MetaDescription = “This Blog contains posts related to ASP.NET and Web Development”;

}

The above code appends the following markup

<meta content=”ASP.NET, Web Development, Blog, ASP.NET Blog” />

<meta content=”This Blog contains posts related to ASP.NET and Web Development” />

And the way it works is that, if the meta tags are already present in the HTML markup, whatever is set in the code behind  will fill up the “content” part alone if the “name” tag is matching.

Although this looks simple, it is very useful in cases where you want to set these dynamically based on a condition / criteria.  So far, these were set statically in the HTML.  Now with Page Class level access, these can be set dynamically.

ASP.NET 4.0 has many improvements for different set of scenarios such as Webforms, Dynamic Data & AJAX based web development.  There are also a lot of enhancements to the core runtime that powers ASP.NET such as Caching, Session & Request/Response objects.

For this post, we will examine some of the web form enhancements.  There are sure a lot of them and we will examine some of them in the future posts.

Controlling View State using the ViewStateMode Property – Performance Enhancement

One of the most complained thing in ASP.NET Webform is the growing viewstate which becomes a concern for performance.  While earlier you can set the EnableViewState property to true or false, post that, all the controls, by default inherit and even if you set it to enabled at control level, the behaviour was inconsistent.

With ASP.NET 4.0, the ViewStateMode property helps to determine for every control, whether the ViewState should be enabled, disabled or inherited accordingly.  Ex.-

<asp:Panel ID=”pnlViewState” runat=”server” ViewStateMode=”Disabled”>
Disabled: <asp:Label runat=”server”  Text=”Value set in markup” ViewStateMode=”Inherit” /><br />
Enabled: <asp:Label  runat=”server” Text=”Value set in markup” ViewStateMode=”Enabled” />
<hr />
<asp:button ID=”Button1″ runat=”server”  Text=”Postback” />
</asp:Panel>

In the code-behind

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
label1.Text = “Value set in code behind”;
label2.Text = “Value set in code behind”;
}
}

When you run the above page, you can find that the intial value for both the labels is set to “Value set in code behind” whereas after clicking on the button (postback), the value of label1 changes to “Value set in markup” whereas the value of label2 remains unchanged.  As you can see, the Panel which holds both these lables has ViewStateMode set to Disabled and label1 is inherting the mode (this is the default if not specified) and label2 has it enabled.  That is the reason label2 maintains viewstate while label1 loses it.

While it is arguably possible using the simple EnableViewState property earlier, it was never consistent.  Considering the fact that in most of our performance sessions, we talk about disabling viewstate and then enabling it at control level while it doesnt work, this ViewStateMode is a welcome architectural change to improve performance.

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" Title="Untitled Page" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        StringBuilder str = new StringBuilder();
        str.Append("function test() { alert('Close!');}\n");
        str.Append("window.onunload=test;");
        string str2 = Convert.ToString(str);
        Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "clientscript", str2, true);
    }
</script>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">Test Page.
</asp:Content>

.

if it is helpful, plese dont forget to leave a comment.

New for the Web

  • Dynamic IntelliSense for JavaScript with vastly superior performance and completeness relative to VS08
  • A new editor for web developers with code-focused productivity through HTML/ASP.Net snippets
  • Seamless packaging and publishing of web applications to hosted and enterprise IIS servers
  • Config transformations for packaging and deployment scenarios
  • Standards based CSS 2.1 rendering in Design View
  • Silverlight 3 support with interactive XAML designer
  • Multi-targeting support to build applications for ASP.NET 2.0, 3.5 and 4.0

Dynamic IntelliSense for JavaScript

This is one of the coolest features in Visual Studio 2010.  IntelliSense for dynamic languages like JavaScript has always be problematic.  Types and even functions can be added to classes dynamically at runtime.  Now in Visual Studio you’ll have IntelliSense on these dynamically created types.  Shown below is an example where jQuery was dynamically extended with a new detonate effect and the IntelliSense that follows.

pic1

Snippets for HTML and JavaScript

HTML, ASPX and JavaScript files now have full support for Visual Studio’s snippets.  No more having to type runat=”server” on every control.  There are hundreds of new snippets included in Visual Studio 2010.

For example field validation can now be added in just a few key strokes.  After the snippet is inserted you’ll only need to fill-in the unique pieces of information highlighted below.

pic2

Packaging and Deployment

Visual Studio 2010 now has the ability to completely package and deploy a web application including all it’s IIS settings, Databases and Application logic.

There is a new 1-click publishing experience that simplifies publishing and updating your sites.

In addition to 1-click publishing there are extensive packaging options to control what specific IIS settings you want included with your package.

You can even include custom database scripts to run when your package is installed.

As part of the packaging process you can also run custom transforms on web.config that allow you update any section of web.config with custom settings unique to the deployment.

For example you can replace database connection strings and web service end points.

pic3

CSS 2.1 Layout Rendering in Design View

The HTLM and ASPX designer has been updated with support for CSS 2.1 layout rendering including attribute selectors.  The designer will now faithfully render your CSS 2.1 standards compliant markup.

if it is helpful, plese dont forget to leave a comment.

Next Page »