Lazy Loading

Introduction

Lazy loading is a design pattern commonly used in computer programming to defer initialization of an object until the point at which it is needed. It can contribute to efficiency in the program’s operation if properly and appropriately used. The opposite of lazy loading is Eager Loading.

Article – 1: jQuery Tabs and Lazy Loading by Malcolm Sheridan

In this article I will connect to the Northwind database using LINQ to SQL, and display customer and product information in separate tabs. I’ll also show you one way of lazy loading these tabs so the data is retrieved only once, not each time a tab is selected.

Read more

Article – 2: Lazy Loading jQuery Tabs with ASP.NET by Mikesdotnetting

This article looks at efficient use of jQuery tabs when displaying data. Specifically, it covers how to lazy-load data, so that it is only accessed and displayed if the tab is clicked.

Lazy Loading is a well-known design pattern that is intended to prevent redundant processing within your application. In the case of tabbed data, there seems little point retrieving and binding data that appears in a tabbed area that no one looks at. So, this examples covers how to defer data access and display until the user wants it – which is defined by them clicking the relevant tab.

Read more

Article – 3: Eager Loading and Lazy Loading in ADO.NET Data Services by Gil Fink

The default behavior of a data service’s .NET client is not to load the entities’ associated objects. When we request an entity we will get it from the service but its associated objects will not load up at all.

Lets say that I have two entities in my program

• a course
• a department

The associations between the entities are that a department can have a lot of courses and a course belongs to one department.

When I load a department it’s list of courses will be empty. trying to iterate the list of courses will give nothing because the courses will not load until we tell them to be loaded explicitly.

This is done by the LoadProperty method of the data service context.

Read more

 

I have a great learning experience thru this.

Now its your turn to have it.

Color Picker

There are lots of way show color picker on web site. Today I was search for such color picker which I want to use it in one of my website.

I have searched a lot of color picker that can be useful, so here I m writing about it.

ColorPicker AJAX Extender

ColorPicker is an ASP.NET AJAX extender that can be attached to any ASP.NET TextBox control. It provides client-side color-picking functionality with UI in a popup control. You can interact with the ColorPicker by clicking on a colored area to set a color. It requires a binary reference to the ASP.NET AJAX Control Toolkit.

ColorPicker extender is multi-browser compatible: it works with IE 6/7/8, Firefox, Safari and Goggle Chrome. ColorPicker is built on top of ASP.NET AJAX Control Toolkit and internally utilizes a Popup extender. ColorPicker is compatible with the UpdatePanel: can be placed inside the UpdatePanel.

ColorPicker is included in Ajax Control Toolkit since Release 30512. For those who use previous release of Ajax Control Toolkit this ColorPicker project will continue to evolve and stay in sync with the Ajax Control Toolkit.

Read more…

Color Picker using javascript

This widget is used to select a color, in hexadecimal #RRGGBB form. It uses a color "swatch" to display the standard 216-color web-safe palette. The user can then click on a color to select it.

This script is very simple to implement, and can add a lot of style to your page that requires color values!

Because of the size of the table, this color picker may be slow on lower-end machines. Consider your target users when deciding whether or not it operates fast enough.

Read more…

ASTreeView – A Powerful ASP.Net TreeView Control

ASTreeView is a powerful treeview with drag drop, ajax loading, context menu, xml import/export, checkbox, selection, add/editing/deleting nodes with ajax.

ASTreeView is developed on .NET framework 2.0. Demo project is a Visual Studio 2005 project.

ASTreeView is FREE! That means you can use it anywhere!

for more detail : click here

Calling Web Service Methods Using ASP.NET AJAX

The Microsoft ASP.NET AJAX asynchronous communication layer enables a browser to call Web service methods on the server by using ECMAScript (JavaScript). It exposes APIs that JavaScript functions can use in any browser to call Web service methods on the server.

The page can call server-based methods without a postback and without refreshing the whole page, because only data is transferred between the browser and the Web server.

This following code example shows how to expose a Web service method in an ASP.NET Web page.

Step 1: Create ASP.NET Ajax Enabled Web site

Step 2: Now Add New Item – Select Web Service from the List of Items and Name it WebService.asmx.

Step 3: Replace the WebService.cs with the following code:

Listing – 1

using System;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Web.Script.Services;

/// <summary>
/// Summary description for WebService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class WebService : System.Web.Services.WebService
{
    [WebMethod]
    public string HelloWorld()
    {
     return "This is Message From Server - Hello World - " + DateTime.Now.ToString();
    }
}

Note: We have added [ScriptService] tag and Replaced HelloWorld().

Step 4: Now come back on default.aspx page and and Update the ScriptManager with the following:

Listing – 2

    <asp:ScriptManager runat="server" ID="scriptManager">
         <Services>
            <asp:ServiceReference Path="WebService.asmx" />
         </Services>
    </asp:ScriptManager>

Here given the ServiceReference to WebService that we have just created.

Step 5: Add button control on page which will be used to call the webservice.

Listing – 3

    <div>
      <p>Calling a service that returns the current server time.</p>
       <input id="Button1" type="button" value="Call Web Service" onclick="HelloWorld()"/>
    </div>

Step 6: Add Javascript on the page with HelloWorld() function with will call the WebService & Return the Result.

Listing – 4

    <script type="text/javascript">
            function HelloWorld()
            {
                WebService.HelloWorld(OnSucceeded);
            }
            function OnSucceeded(result)
            {
                var myResult = document.getElementById("rst");
                myResult.innerHTML = result;
            }
        </script>

Step 7: finally put <spam> tag on page on which we will display our result.

Listing – 5

    <hr />
       <div>
           <span id="rst"></span>
       </div>

Reference:

http://www.asp.net/AJAX/Documentation/Live/overview/AsynchronousLayerOverview.aspx

Related Post:

http://ramanisandeep.wordpress.com/2009/09/03/using-jquery-to-directly-call-asp-net-ajax-page-methods/

Hope this will Help you !!!

Jay Ganesh

Basics of ASP.NET AJAX Version 1.0

Partial-Page Rendering

Partial-page rendering makes it unnecessary for the whole ASP.NET page to be refreshed as the result of a postback. Instead, only the region of the page that has to be refreshed is updated. As a result, users do not see the whole page reload with every postback, which makes user interaction with the Web page more seamless.

UpdatePanel Control

UpdatePanel controls work by specifying regions of a page that can be updated without refreshing the whole page. This process is coordinated by the ScriptManager server control and the client PageRequestManager class. When partial-page updates are enabled, controls can asynchronously post to the server. An asynchronous postback behaves like a regular postback in that the resulting server page executes the complete page and control life cycle. However, with an asynchronous postback, page updates are limited to regions of the page that are enclosed in UpdatePanel controls and that are marked to be updated. The server sends HTML markup for only the affected elements to the browser. In the browser, the client PageRequestManager class performs Document Object Model (DOM) manipulation to replace existing HTML with updated markup.

UpdateProgress Control

Provides visual feedback in the browser when the content of UpdatePanel controls is updated. The UpdateProgress control renders a <div> element that is displayed or hidden depending on whether an associated UpdatePanel control has caused an asynchronous postback. For initial page rendering and for synchronous postbacks, the UpdateProgress control is not displayed.

PageRequestManager Class

The PageRequestManager class exposes properties, methods, and events that enable you to customize partial-page updates with client script. The PageRequestManager class exposes a client page event model that you can use in a way similar to how you use the server page event model.

During partial-page updates initiated by asynchronous postbacks, the PageRequestManager class coordinates how the page content is incrementally updated in the browser. The UpdatePanel server control and PageRequestManager client class abstract much of the complexity of partial-page updates. When you use client script and members of the PageRequestManager class, you can customize the partial-page update behavior in the browser.

To use the PageRequestManager class in client script, you must put a ScriptManager server control on the Web page. The EnablePartialRendering property of the ScriptManager control must be set to true (which is the default). When EnablePartialRendering is set to true, the client-script library that contains the PageRequestManager class is available in the page.

ScriptManager Control

The ScriptManager control manages client script for Microsoft ASP.NET AJAX pages. By default, the ScriptManager control registers the script for the Microsoft AJAX Library with the page. This enables client script to use the type system extensions and to support features such as partial-page rendering and Web-service calls.

You must use a ScriptManager control on a page to enable the following features of ASP.NET AJAX:

• Client-script functionality of the Microsoft AJAX Library, and any custom script that you want to send to the browser.
• Partial-page rendering
• JavaScript proxy classes for Web services, which enable you to use client script to access Web services by exposing Web services as strongly typed objects.
• JavaScript classes to access ASP.NET authentication and profile application services.

Timer Control

The Timer control performs postbacks at defined intervals. If you use the Timer control with an UpdatePanel control, you can enable partial-page updates at a defined interval. You can also use the Timer control to post the whole page.

The Timer control is a server control that embeds a JavaScript component into the Web page. The JavaScript component initiates the postback from the browser when the interval that is defined in the Interval property has elapsed. You set the properties for the Timer control in code that runs on the server and those properties are passed to the JavaScript component.

An instance of the ScriptManager class must be included in the Web page when you use the Timer control.

When a postback was initiated by the Timer control, the Timer control raises the Tick event on the server. You can create an event handler for the Tick event to perform actions when the page is posted to the server.

Set the Interval property to specify how often postbacks will occur, and set the Enabled property to turn the Timer on or off. The Interval property is defined in milliseconds and has a default value of 60,000 milliseconds, or 60 seconds.

Reference

I have Read the information & Compiled it to produce the following article from ASP.NET AJAX Documentation, so if you want to go deep in each topics please visit –> ASP.NET AJAX

Hope this will Help you !!!

If At First You Don’t Succeed – Retrying Mail Operations in .NET

Mail sent from your application didn’t go through? Don’t give up so easily! The majority of mail server interruptions are very temporary in nature, lasting only a few seconds. Instead of failing right away, why not give your SMTP client another shot?

As I’m sure you’re very aware, sending email from applications is an extremely common task. For example, just about every web site has a “Contact Us’ page of some sort. Yours are probably much prettier that the screenshot below, but the idea is the same.

If you only need to send mail from this one place, you might stick the required code directly in the code-behind of your contact page. However, most applications need to send mail for all kinds of reasons – to confirm new member signups, subscription requests, password changes and resets, and various other notifications based on your business rules. Therefore, it’s much more convenient to encapsulate the mail-sending logic and just call it from wherever you need to, as below.

Read more…

What is Maximum Request size for asp.net application?

The default max request size is 4MB (4096).

You can change a setting in your web.config to allow larger requests.

Here is the example:

   1: <configuration>

   2:        <system.web>

   3:            <httpRuntime  maxRequestLength="4096"/>

   4:        </system.web>

   5: </configuration>

This is default setting, we have to change this to the size that you want to allow user to request like 5MB, 6MB…

Hope this will Help !!!

Show "Loading" image until grid is populated?

Hi Readers,

Today I have faced one problem in which i have to display Loading image with progress bar when i update content of Datalist / Gridview. So i have done some googling on this topic so that i can resolve this problem fast.

I always believe that if some of our friends have already solved such issues so why not i use their solutions.

During my googling i found very useful articles written by Matt Berseth, so here i am sharing it with you people so that you can also get benefit from that.

• Using an UpdatePanelAnimationExtender to place an animated gif over a GridView 
• YUI Style AJAX Progress Indicator
• Google Analytics like AJAX Progress Indicator
• Rendering a Gmail-like ‘Loading’ Indicator over a Specific ASP.NET Control

These articles has every thing that developer need to display different style of loading UI.

UI special effect are really add special attraction in web application & these kind of small small effect make it more user friendly & effective.

Hope this helps to you also !!!

Jai Ganesh

Using jQuery to directly call ASP.NET AJAX page methods

Here I am looking to explain how to call page methods using jQuery.

Step 1: Define your Page Methods in code behind:

[WebMethod]
    public static int MyMethod1()
    {
        return 13;
    }
    [WebMethod()]
    public static string MyMethod2(string a, int b)
    {
        return a + " –> " + b.ToString();
    }

Step 2: Include the jQuery Library on Default.aspx page:

<script src="Js/jquery.min.js" type="text/javascript"></script>

If you do not have jQuery file in Js folder then use following:

<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js">

Step 3: Now Write the code to Call Page method:

<script type="text/javascript">
        function PageMethod(fn, paramArray, successFn, errorFn)
        {
            var pagePath = window.location.pathname;
            //Create list of parameters in the form : {"paramName1":"paramValue1","paramName2":"paramValue2"}
            var paramList = ”;
            if (paramArray.length > 0)
            {
                for (var i=0; i<paramArray.length; i+=2)
                {
                    if (paramList.length > 0)
                        paramList += ‘,’;
                    paramList += ‘"’ + paramArray[i] + ‘":"’ + paramArray[i+1] + ‘"’;
                }
            }
            paramList = ‘{‘ + paramList + ‘}’;
            //Call the page method
            $.ajax({
                type: "POST",
                url: pagePath + "/" + fn,
                contentType: "application/json; charset=utf-8",
                data: paramList,
                dataType: "json",
                success: successFn,
                error: errorFn
            });
        }
        function AjaxSucceeded (result)
        {
            alert(result.d);
            $("#Result").text("Result : " + result.d);
        }
        function AjaxFailed (result)
        {
            alert("Error on Page");
        }
        function CallPageMethod1()
        {
            PageMethod("MyMethod1", [], AjaxSucceeded, AjaxFailed);
            return false;
        }
         function CallPageMethod2()
        {
            PageMethod("MyMethod2",["a", "value", "b", 2], AjaxSucceeded, AjaxFailed);
            return false;
        }
    </script>

Step 4: To Test your code use following html on default.aspx:

<form id="form1" runat="server">
        <h1>
            Using jQuery To Call ASP.NET Page Methods and Web Services</h1>
        <div>
<asp:Button ID="Button1" runat="server" Text="With No Parameter" OnClientClick="return CallPageMethod1();" />
   <asp:Button ID="Button2" runat="server" Text="With Parameter" OnClientClick="return CallPageMethod2();" />
        </div>
        <div id="Result">
        </div>
    </form>

jQuery makes an AJAX call to the MyMethod1 & MyMethod2 page method and replaces the div’s text with its result.

Very Simple!!!

Hope You will also get benefit from this.

Jai Ganesh

Related Post:

http://ramanisandeep.wordpress.com/2009/09/22/calling-web-service-methods-using-asp-net-ajax/

jQuery Tutorials ( Learn – Practice – Expert )

Article 1: Using jQuery With ASP.NET

This article has everything that is needed by programmer who want to start learning jQuery.

It includes the following topics:

• Using jQuery in ASP.NET Page
• jQuery Selectors
• jQuery Chainability
• jQuery Object Accessors
• jQuery Events
• Ajax using jQuery and ASP.NET
• jQuery Ajax with JSON data
• Effects with jQuery

Read Full Article: click here…

Article 2: Using jQuery to consume ASP.NET web services

First, It’ll cover the two requirements necessary when calling an ASMX web service that’s being JSON serialized by the ASP.NET AJAX extensions.
Then, It’ll show you how to do this with jQuery.
Finally, I’ll update the deferred content loading example accordingly.

Read Full Article: click here

Article 3: ON Hijacking and How ASP.NET AJAX 1.0 Avoids these Attacks

Recently some reports have been issued by security researchers describing ways hackers can use the JSON wire format used by most popular AJAX frameworks to try and exploit cross domain scripts within browsers.  Specifically, these attacks use HTTP GET requests invoked via an HTML <script src=""> include element to circumvent the "same origin policy" enforced by browsers (which limits JavaScript objects like XmlHttpRequest to only calling URLs on the same domain that the page was loaded from), and then look for ways to exploit the JSON payload content.

Read Full article: click here