#differences #between #asp.net #mvc and ASP.net #web #api

Difference between document.ready and window.onload or pageLoad

We think pageLoad() and jQuery’s $(document).ready() events do the same. Both methods seem too similar in simple demo example. But $(document).ready() and pageLoad() methods are very much differ in functioning.In this article, I will explain the major differences between $(document).ready() and pageLoad() methods.

Introducing $(document).ready()

JQuery’s document.ready() method gets called as soon as DOM is ready (means browser has parsed the HTML and built the DOM tree). It is cross browser compatible means behave equally on all browsers. If your web page has large images, it will not wait for loading of images completely. Hence it may called before pageLoad() method. We can have multiple document.ready() methods on a web page that will be called in coming sequence.

 <script type="text/javascript">
$(document).ready(function(){ 
 // Gets called as soon as DOM is ready
 //code here
 }); 
 </script> 

Introducing pageLoad()

pageLoad() method gets called when images and all associated resources of the page have been fully loaded. Suppose your web page has large size images then until all the images are not fully loaded on the page, pageLoad() method will not called. pageLoad() method is not browser compatible. We can have only one pageLoad() method on a web page.

 <script type="text/javascript">
function pageLoad() 
 {
 // gets called when page have been fully loaded
 //code here 
}
 </script> 

Introducing Update Panel Partial PostBack with pageLoad() and $(document).ready()

Since we know, in asp.net update panel gets partially postback to the server. Hence If you are using $(document).ready() and pageLoad() methods on the page, it is mandatory to know the difference between both the methods.

pageLoad() methods is called each and every partial postback of update panel but $(document).ready() is not called each and every partial postback of update panel. $(document).ready() is called only one time (during first time of page loading). Hence code written in $(document).ready() method will not be initialized each and every partial postback.

 <script type="text/javascript">
 function pageLoad() 
{ 
// code for initialization in each and every partial postback
 } 
$(document).ready(function(){ 
 // code for one time initialization
}); 
</script> 
<asp:ScriptManager ID="ScriptManger1" runat="server" /> 
<asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
<ContentTemplate> 
<!-- Asp.net Controls Here --> 
</ContentTemplate> 
 </asp:UpdatePanel> 

An ASP.NET AJAX alternative to $(document).ready()

If you are using AJAX on your asp.net web page then you can use Application.add_init() method in place of $(document).ready() for one time initialization.

 <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
 <script type="text/javascript"> 
 Sys.Application.add_init(function() { 
 // Initialization code here, meant to run once.
 }); 
 </script> 

Note that to call Application.add_init, we need to place it after the ScriptManager. This is required because the ScriptManager injects its reference to MicrosoftAjax.js at that location. Attempting to reference the Sys object before Script Maanager will throw a javascript error "sys is undefined"

Note

1. $(document).ready()

   1. Best for onetime initialization.
   2. Called as soon as DOM is ready; may called slightly before than pageLoad().
   3. Cross browser compatible.
   4. Unable to re-attach the functionality to elements/controls of the page affected by partial postbacks.

2. pageLoad()

   1. Not best for onetime initialization if used with UpdatePanel.
   2. Not Cross browser compatible.
   3. Best to re-attach the functionality to elements/controls of the page affected by partial postbacks with UpdatePanel.

3. Application.Init()

   1. Useful for one time initialization if only ASP.NET AJAX is available.
   2. More work required to wire the event up.
   3. "sys is undefined" javascript error may occurs if you are not careful.

Summary

In this article I try to expose document.ready() and window.onload/pageLoad(). I hope after reading this article you will be able to understand the use of both these methods. I would like to have feedback from my blog readers. Please post your feedback, question, or comments about this article.

ASP.NET Asynchronous file upload using jquery

In ASP.NET Ajax, we have AsyncFileUpload control for uploading files asynchronously. If you are using JQuery within your Asp.net application, then using Microsoft Ajax AsyncFileUpload control is not a good practice to upload files asynchronously. Form Last couples of days I was trying to upload and delete files asynchronously using JQuery in Asp.Net and finally I was able to upload and delete files asynchronously. Here I am sharing my asynchronous file upload code. For getting file size before upload refer the article Get file size before upload using jquery.

In order to get the things going well, you’ll need the following :-

1. JQuery 1.4 or above. You can download it form here
2. JQuery File Upload plugin You can download it form here

Simple File Upload Control

When you will run this code, you will find the below screen for uploading the files. This is a simple file upload control with browse button.

Change style of browse button

To achieve this, I am using css to change the default style of file upload control. Basically I put the file upload control in a wrapper and this wrapper will be shown to the user in-place of file upload control as shown below:

Now you can upload file to the server on single click after browsing the file. For uploded file you can also provide the description. By default it is showing the file name. You can change this description as you wish.

Every time when you will come on this page a new folder will be created and yours uploaded files will be saved in this newly created folder.

Check file extension to be upload

In this demo, I am also checking the file extension to be upload. You can define your own extension of file to be upload. If you try to upload the file that is not present in extensions list it will show the below error message.

View/Download file from Server

You can view or download the uploaded file from the server. When you will click the view link then you will see the below option in IE for save and open file from the server.

Delete file from Server

When you will click on the delete link , it will ask for confirmation. If you click ok, then it will delete the file. Screen shots for the file deleting process are shown as -

Summary

In this article I try to explain the file upload in asp.net using jquery with example. I hope you will refer this article and code to solve your problem of file upload. I would like to have feedback from my blog readers. Please post your feedback, question, or comments about this article. You can download demo project from below link.

Understanding Detailed Architecture of ASP.NET 4.5

ASP.NET has extended into multiple code frameworks, including Web Forms, MVC, Web Page, Web API and SignalR. Initially, all these grew up separately but now they are coming together. Now, you can develop your web site or web application by using Web Forms or MVC or Web Page and services by using Web API or SignalR.

Components of Asp.NET 4.5 Architecture

1. .NET Framework

   .Net framework is an integrated component of windows operating system that supports development and execution of next generation applications, Windows store apps and services.

2. ASP.NET Framework

   ASP.Net Framework is used to create dynamic website, web application and web services. It is built on the top of .NET Framework.
   Asp.NET Framework provides you various capabilities like Hosting Model, Site/Service Management, Protocol Abstraction, Security, Caching capability, Routing and Model Binding etc.
   Mainly, Asp.Net can be divides into two parts - Asp.Net Sites and Asp.Net Services.
   

3. Asp.NET Site

   There are following flavours of Asp.NET Site -

   1. Web Forms

      This is the traditional event driven development model. It has drag and drop server controls, server events and state management techniques. This best for rapid application development (RAD) with powerful data access.

   2. MVC

      This is a lightweight and MVC (Model, View, Controller) pattern based development model. It provides full control over mark-up and support many features that allow fast & agile development. This best for developing lightweight, interactive and device oriented (i.e. compatible to smart phones, iPhone, tablet, laptop etc.) web application with latest web standards.

   3. Web Pages

      This is also a lightweight and Razor syntax based development model. It has built-in template and helpers also provide full control over mark-up. It is best for developing beautiful web application with latest web standards. You can also use WebMatrix which is a free tool and has built-in template; for developing Asp.Net Web Page.

   4. SPA

      SPA stands for Single Page Application which helps you to build web applications that include significant client-side interactions using HTML5, CSS3 and JavaScript. It is best to make highly interactive single page dashboard web applications.

4. Asp.NET Services

   There are two ways to make Asp.Net Services as given below –

   1. Web API

      Asp.Net Web API is a framework for building HTTP services that can be consume by a broad range of clients including browsers, mobiles, iphone and tablets.

   2. SignalR

      ASP.NET SignalR is a library that simplifies the process of adding real-time web functionality to applications. Real-time web functionality is the ability to have server code push content to connected clients instantly as it becomes available, rather than having the server wait for a client to request new data.

5. Visual Studio 2012

   The Visual Studio IDE offers a set of tools that help you to write and modify the code for your programs, and also detect and correct errors in your programs. Using Visual Studio 2012 you can build Windows Store apps, desktop apps, mobile apps, ASP.NET web apps, and web services.

What do you think?

I hope you have got ASP.NET 4.5 Architecture and how it works. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.

Difference Between GridView and DataGrid and ListView

GridView, DataGrid and ListView Data-bound controls are used to display and modify data in your Asp.Net web application. These controls also contains others Asp.Net controls like as Label, TextBox, DropdownList etc. into a single layout. In this article, I am going to expose the difference among these three.

Difference between GridView and DataGrid

GridView

DataGrid

It was introduced with Asp.Net 2.0.

It was introduced with Asp.Net 1.0.

Built-in supports for Paging and Sorting.

For sorting you need to handle SortCommand event and rebind grid required and for paging you need to handle the PageIndexChanged event and rebind grid required.

Built-in supports for Update and Delete operations.

Need to write code for implementing Update and Delete operations.

Supports auto format or style features.

This features is not supported.

Performance is slow as compared to DataGrid

Performance is fast as compared to GridView.

Difference between ListView and GridView

ListView

GridView

It was introduced with Asp.Net 3.5.

It was introduced with Asp.Net 2.0.

Template driven.

Rendered as Table.

Built-in supports for Data grouping.

Need to write custom code.

Built-in supports for Insert operation.

Need to write custom code.

Provides flexible layout to your data.

Need to write custom code.

Performance is fast is compared to GridView.

Performance is slow as compared to ListView.

What do you think?

I hope you will enjoy the tips while programming with Asp.Net. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.

Difference Between Repeater and DataList and GridView

Repeater and DataList and GridView are Data-bound controls that bound to a data source control like SqlDataSource, LinqDataSource to display and modify data in your Asp.Net web application. Data-bound controls are composite controls that contains others Asp.Net controls like as Label, TextBox, DropdownList etc. into a single layout. In this article, I am going to expose the difference among these three.

Difference between DataList and Repeater

DataList

Repeater

Rendered as Table.

Template driven.

Automatically generates columns from the data source.

This features is not supported.

Selection of row is supported.

Selection of row is not supported.

Editing of contents is supported.

Editing of contents is not supported.

You can arrange data items horizontally or vertically in DataList by using property RepeatDirection.

This features is not supported.

Performance is slow as compared to Repeater

This is very light weight and fast data control among all the data control.

Difference between GridView and Repeater

GridView

Repeater

It was introduced with Asp.Net 2.0.

It was introduced with Asp.Net 1.0.

Rendered as Table.

Template driven.

Automatically generates columns from the data source.

This features is not supported.

Selection of row is supported.

Selection of row is not supported.

Editing of contents is supported.

Editing of contents is not supported.

Built-in Paging and Sorting is provided.

You need to write custom code.

Supports auto format or style features.

This has no this features.

Performance is very slow as compared to Repeater.

This is very light weight and fast data control among all the data control.

Difference between GridView and DataList

GridView

DataList

It was introduced with Asp.Net 2.0.

It was introduced with Asp.Net 1.0.

Built-in Paging and Sorting is provided.

You need to write custom code.

Built-in supports for Update and Delete operations.

Need to write code for implementing Update and Delete operations.

Supports auto format or style features.

This features is not supported.

RepeatDirection property is not supported.

You can arrange data items horizontally or vertically in DataList by using property RepeatDirection.

Doesn’t support customizable row separator.

Supports customizable row separator by using SeparatorTemplate.

Performance is slow as compared to DataList.

Performance is fast is compared to GridView.

What do you think?

I hope you will enjoy the tips while programming with Asp.Net. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.

Understanding Basic Controls of ASP.NET AJAX

ASP.NET AJAX is developed by Microsoft to make dynamic, client-centric, user-friendly, and interactive web applications. ASP.NET AJAX has its own AJAX Library and AJAX controls to develop rich UI Web applications. In this article, I am going to expose some basic controls of Asp.Net AJAX.

Basic Controls of ASP.NET AJAX

1. ScriptManager

   The ScriptManager manages all ASP.NET AJAX resources on a web page. It renders the AJAX library to the browser and supports partial page rendering. It also manages partial page uploads and provide access to web service method. Without script manager we can't use AJAX controls on the web page.

2. ScriplManagerProxy

   A page can have only one ScriptManager control. If your application has a Master-Content page scenario and the MasterPage has a ScriptManager control, then you can use the ScriptManagerProxy control to add different scripts to the content pages.
   Sometimes, there may be the case when you are not required to use AJAX on each and every web page by using the ScriptManagerProxy control then you can add AJAX functionalities to specific web pages. Since, ScriptManager on the Master Page will load the AJAX library on each page that derives from the MasterPage, even if they are not needed, which would lead to a waste of resources.
   

3. Timer

   Timer Control is used to perform postbacks at defined time intervals. You can also use the Timer control with an UpdatePanel control to enable partial-page updates at a defined interval. You can also use the Timer control to post the entire page.

   
   <asp:ScriptManager runat="server" ID="ScriptManager1" />
    <asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Conditional">
    <ContentTemplate>
    <asp:Timer ID="Timer1" runat="server" Interval="120000" OnTick="Timer1_Tick"></asp:Timer>
    </ContentTemplate>
   </asp:UpdatePanel>
   
   

4. UpdatePanel

   The UpdatePanel control specifies a part of a Web page which can be updated or refreshed partially based on the update condition. Refreshing a specific part of a Web page is referred as partial-page update. You can also add one or more UpdatePanel control in the Web page. The UpdatePanel control uses the AJAX library to support the partial-page rendering.

5. UpdateProgress

   This is used to display the progress of partial-page updates. You can use one UpdateProgress control to represent the progress of partial-page updates for the entire page. Also, you can include an UpdateProgress control for every UpdatePanel control. You can customize the default layout and content of the UpdateProgress control to make it more attractive.

Basic Validation Controls of ASP.NET AJAX

1. FilteredTextBoxExtender

   This allows you to filter input data to a text box.

2. MaskedEditExtender and MaskedEditValidator

   This restricts a user to enter only a specific pattern of characters within a TextBox by applying a mask to the input.

3. ValidatorCalloutExtender

   This is attached to the ASP.NET validators to show the error messages as a balloon-style ToolTip.

4. NoBot

   This prevents the spam/bot from filling the input forms automatically by any or tool code. This uses the Completely Automated Public Turing Test to ensure that the response is not generated by the any tool.

5. PasswordStrengthExtender

   This measures the strength of the password text entered within the text box by validating with the different strength specified parameters.

What do you think?

I hope you will enjoy the tips while programming with Asp.Net AJAX. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.