C#

crud operations in asp.net gridview using jquery

June 17, 2019 by admin Leave a Comment

crud operations in asp.net gridview using jquery

<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”CS.aspx.cs” Inherits=”_Default” %>

Name:

Country:

&lt;script type="text/javascript"&gt;
    $(function () {
        $.ajax({
            type: "POST",
            url: "CS.aspx/GetCustomers",
            data: '{}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnSuccess
        });
    });

    function OnSuccess(response) {
        var xmlDoc = $.parseXML(response.d);
        var xml = $(xmlDoc);
        var customers = xml.find("Table");
        var row = $("[id*=gvCustomers] tr:last-child").clone(true);
        $("[id*=gvCustomers] tr").not($("[id*=gvCustomers] tr:first-child")).remove();
        $.each(customers, function () {
            var customer = $(this);
            AppendRow(row, $(this).find("CustomerId").text(), $(this).find("Name").text(), $(this).find("Country").text())
            row = $("[id*=gvCustomers] tr:last-child").clone(true);
        });
    }

    function AppendRow(row, customerId, name, country) {
        //Bind CustomerId.
        $(".CustomerId", row).find("span").html(customerId);

        //Bind Name.
        $(".Name", row).find("span").html(name);
        $(".Name", row).find("input").val(name);

        //Bind Country.
        $(".Country", row).find("span").html(country);
        $(".Country", row).find("input").val(country);
        $("[id*=gvCustomers]").append(row);
    }

    //Add event handler.
    $("body").on("click", "[id*=btnAdd]", function () {
        var txtName = $("[id*=txtName]");
        var txtCountry = $("[id*=txtCountry]");
        $.ajax({
            type: "POST",
            url: "CS.aspx/InsertCustomer",
            data: '{name: "' + txtName.val() + '", country: "' + txtCountry.val() + '" }',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                var row = $("[id*=gvCustomers] tr:last-child").clone(true);
                AppendRow(row, response.d, txtName.val(), txtCountry.val());
                txtName.val("");
                txtCountry.val("");
            }
        });
        return false;
    });

    //Edit event handler.
    $("body").on("click", "[id*=gvCustomers] .Edit", function () {
        var row = $(this).closest("tr");
        $("td", row).each(function () {
            if ($(this).find("input").length &gt; 0) {
                $(this).find("input").show();
                $(this).find("span").hide();
            }
        });
        row.find(".Update").show();
        row.find(".Cancel").show();
        row.find(".Delete").hide();
        $(this).hide();
        return false;
    });

    //Update event handler.
    $("body").on("click", "[id*=gvCustomers] .Update", function () {
        var row = $(this).closest("tr");
        $("td", row).each(function () {
            if ($(this).find("input").length &gt; 0) {
                var span = $(this).find("span");
                var input = $(this).find("input");
                span.html(input.val());
                span.show();
                input.hide();
            }
        });
        row.find(".Edit").show();
        row.find(".Delete").show();
        row.find(".Cancel").hide();
        $(this).hide();

        var customerId = row.find(".CustomerId").find("span").html();
        var name = row.find(".Name").find("span").html();
        var country = row.find(".Country").find("span").html();
        $.ajax({
            type: "POST",
            url: "CS.aspx/UpdateCustomer",
            data: '{customerId: ' + customerId + ', name: "' + name + '", country: "' + country + '" }',
            contentType: "application/json; charset=utf-8",
            dataType: "json"
        });

        return false;
    });

    //Cancel event handler.
    $("body").on("click", "[id*=gvCustomers] .Cancel", function () {
        var row = $(this).closest("tr");
        $("td", row).each(function () {
            if ($(this).find("input").length &gt; 0) {
                var span = $(this).find("span");
                var input = $(this).find("input");
                input.val(span.html());
                span.show();
                input.hide();
            }
        });
        row.find(".Edit").show();
        row.find(".Delete").show();
        row.find(".Update").hide();
        $(this).hide();
        return false;
    });

    //Delete event handler.
    $("body").on("click", "[id*=gvCustomers] .Delete", function () {
        if (confirm("Do you want to delete this row?")) {
            var row = $(this).closest("tr");
            var customerId = row.find("span").html();
            $.ajax({
                type: "POST",
                url: "CS.aspx/DeleteCustomer",
                data: '{customerId: ' + customerId + '}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    row.remove();
                }
            });
        }

        return false;
    });
&lt;/script&gt;
&lt;/form&gt;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

$(function () {

$.ajax({

type: "POST",

url: "CS.aspx/GetCustomers",

data: '{}',

contentType: "application/json; charset=utf-8",

dataType: "json",

success: OnSuccess

});

function OnSuccess(response) {

var xmlDoc = $.parseXML(response.d);

var xml = $(xmlDoc);

var customers = xml.find("Table");

var row = $("[id*=gvCustomers] tr:last-child").clone(true);

$("[id*=gvCustomers] tr").not($("[id*=gvCustomers] tr:first-child")).remove();

$.each(customers, function () {

var customer = $(this);

AppendRow(row, $(this).find("CustomerId").text(), $(this).find("Name").text(), $(this).find("Country").text())

row = $("[id*=gvCustomers] tr:last-child").clone(true);

});

}

function AppendRow(row, customerId, name, country) {

//Bind CustomerId.

$(".CustomerId", row).find("span").html(customerId);

//Bind Name.

$(".Name", row).find("span").html(name);

$(".Name", row).find("input").val(name);

//Bind Country.

$(".Country", row).find("span").html(country);

$(".Country", row).find("input").val(country);

$("[id*=gvCustomers]").append(row);

}

//Add event handler.

$("body").on("click", "[id*=btnAdd]", function () {

var txtName = $("[id*=txtName]");

var txtCountry = $("[id*=txtCountry]");

$.ajax({

type: "POST",

url: "CS.aspx/InsertCustomer",

data: '{name: "' + txtName.val() + '", country: "' + txtCountry.val() + '" }',

contentType: "application/json; charset=utf-8",

dataType: "json",

success: function (response) {

var row = $("[id*=gvCustomers] tr:last-child").clone(true);

AppendRow(row, response.d, txtName.val(), txtCountry.val());

txtName.val("");

txtCountry.val("");

}

});

return false;

});

//Edit event handler.

$("body").on("click", "[id*=gvCustomers] .Edit", function () {

var row = $(this).closest("tr");

$("td", row).each(function () {

if ($(this).find("input").length > 0) {

$(this).find("input").show();

$(this).find("span").hide();

}

});

row.find(".Update").show();

row.find(".Cancel").show();

row.find(".Delete").hide();

$(this).hide();

return false;

});

//Update event handler.

$("body").on("click", "[id*=gvCustomers] .Update", function () {

var row = $(this).closest("tr");

$("td", row).each(function () {

if ($(this).find("input").length > 0) {

var span = $(this).find("span");

var input = $(this).find("input");

span.html(input.val());

span.show();

input.hide();

}

});

row.find(".Edit").show();

row.find(".Delete").show();

row.find(".Cancel").hide();

$(this).hide();

var customerId = row.find(".CustomerId").find("span").html();

var name = row.find(".Name").find("span").html();

var country = row.find(".Country").find("span").html();

$.ajax({

type: "POST",

url: "CS.aspx/UpdateCustomer",

data: '{customerId: ' + customerId + ', name: "' + name + '", country: "' + country + '" }',

contentType: "application/json; charset=utf-8",

dataType: "json"

});

return false;

});

//Cancel event handler.

$("body").on("click", "[id*=gvCustomers] .Cancel", function () {

var row = $(this).closest("tr");

$("td", row).each(function () {

if ($(this).find("input").length > 0) {

var span = $(this).find("span");

var input = $(this).find("input");

input.val(span.html());

span.show();

input.hide();

}

});

row.find(".Edit").show();

row.find(".Delete").show();

row.find(".Update").hide();

$(this).hide();

return false;

});

//Delete event handler.

$("body").on("click", "[id*=gvCustomers] .Delete", function () {

if (confirm("Do you want to delete this row?")) {

var row = $(this).closest("tr");

var customerId = row.find("span").html();

$.ajax({

type: "POST",

url: "CS.aspx/DeleteCustomer",

data: '{customerId: ' + customerId + '}',

contentType: "application/json; charset=utf-8",

dataType: "json",

success: function (response) {

row.remove();

}

});

}

return false;

});

</script>

</form>

What is ASP.NET DataList Control

lists the different template in formveiw control asp.net

December 26, 2018 by admin

For the FormView control to display content, you need to create templates for the different parts of the control.

Most templates are optional; however, you must create a template for the mode in which the control is configured.

For example, a FormView control that supports inserting records must have an insert item template defined.

The following table lists the different templates that you can create.

EditItemTemplate

Defines the content for the data row when the FormView control is in edit mode.

This template usually contains input controls and command buttons with which the user can edit an existing record.

EmptyDataTemplate

Defines the content for the empty data row displayed when the formveiw control asp.net is bound to a data source that does not contain any records.

This template usually contains content to alert the user that the data source does not contain any records.

FooterTemplate

Defines the content for the footer row.

This template usually contains any additional content you would like to display in the footer row.

Note:- As an alternative, you can simply specify text to display in the footer row by setting the FooterText property.

HeaderTemplate

Defines the content for the header row.

This template usually contains any additional content you would like to display in the header row.

Note:- As an alternative, you can simply specify text to display in the header row by setting the HeaderText property.

ItemTemplate

Defines the content for the data row when the FormView control is in read-only mode.

This template usually contains content to display the values of an existing record.

InsertItemTemplate

Defines the content for the data row when the FormView control is in insert mode.

This template usually contains input controls and command buttons with which the user can add a new record.

PagerTemplate

Defines the content for the pager row displayed when the paging feature is enabled (when the AllowPaging property is set to true).

This template usually contains controls with which the user can navigate to another record.

Note:- The FormView control has a built-in pager row user interface (UI). You need to create a pager template only if you want to create your own custom pager row.

FormView Control in aap.net with example

December 25, 2018 by admin Leave a Comment

ForThe FormView control is used to displays the values of a single record from a data source using user-defined templates.
The FormView control allows you to edit, delete, and insert records.

The FormView control is used to display a single record from a data source in a table. When using the FormView control, you specify templates to display and edit bound values.

The templates contain formatting, controls, and binding expressions to create the form. The FormView control is often used in combination with a GridView control for master/detail scenarios where the selected record of the master control determines the record to display in the FormView control.

FormView is a new data-bound control that is nothing but a templated version of DetailsView control. The major difference between DetailsView and FormView is, here user need to define the rendering template for each item.

The FormView control gives you the ability to work with a single record from a data source, similar to the DetailsView control. The difference between the FormView and the DetailsView controls is that the DetailsView control uses a tabular layout where each field of the record is displayed as a row of its own.

The FormView control provides the user interface (UI) for navigating between records. To enable paging behavior, set the AllowPaging property to true and specify a PagerTemplate value.

The FormView control can automatically page over the data in its associated data source one record at a time, provided that the data is represented by an object implementing the ICollection interface, or that the underlying data source supports paging.

The FormView control is used to display a single record from a data source. It is similar to the DetailsView control, except it displays user-defined templates instead of row fields.
Creating your own templates gives you greater flexibility in controlling how the data is displayed. The FormView control supports the following features: Binding to data source controls, such as SqlDataSource and ObjectDataSource. Built-in inserting capabilities. Built-in updating and deleting capabilities. Built-in paging capabilities. Programmatic access to the FormView object model to dynamically set properties, handle events, and so on. Customizable appearance through user-defined templates, themes, and styles.

jagged array

November 5, 2018 by admin Leave a Comment

Jagged array is an array of arrays.

If we want to hold different column values in different rows then we should prefer jagged array.

jagged array also store the data in the form of row and column like, two dimensional array, but two dimensional array. all the row will be having equal number of column where as jagged array the column size different form row to row.

Jagged array also known as array of array because here different single dimensional array between different signs combined together to form a new array.

Syntax

<type>[ ] [ ]<name>= new <type>[ rows] [];

Int [ ] [ ] arr = new int [3][ ];

Int[ ] [ ] arr = { list of values ];

NOTE

While declaring a jagged array in that initial declaration we can only specified no of row the new no of row to the array and then are need to specified the column to each row individual.

datalist control in asp .net

October 16, 2018 by admin

Introduction:
DataList control in asp.net has RepeatDirection, RepeatColumns and RepeatLayout properties, which are unique for DataList control. These properties are useful when you need to create presentation with more than one record per row, like Image Gallery, Product Catalogue etc. For example, let say you are creating an image gallery and want to show 5 images per row. Repeater would require checking of record position and manipulating HTML. With DataList, just use RepeatDirection=”Horizontal” and RepeatColumns=”5″. RepeatLayout could be Table or Flow, depending of do you need HTML table structure in layout. These features are not possible using any other data controls.

The DataList control like the Repeater control is a template driven, light weight control, and acts as a container of repeated data items. The templates in this control are used to define the data that it will contain. It is flexible in the sense that you can easily customize the display of one or more records that are displayed in the control.

The DataList Web server control displays data in a format that you can define using templates and styles. The DataList control is useful for data in any repeating structure, such as a table. The DataList control can display rows in different layouts, such as ordering them in columns or rows.

This comes in handy, especially in situations where you have too many columns in your database table or columns with larger widths of data. As an example, imagine what would happen if there is a field called Address in our Employee table having data of large size and you are displaying the data using a Repeater, a DataGrid, or a GridView control. You will not be able to display columns of such large data sizes with any of these controls as the display would look awkward. This is where the DataList control fits in.

When the web page is in execution with the data bound to it using the Page_Load event, the data in the DataList control is rendered as DataListItem objects, that is, each item displayed is actually a DataListItem. Similar to the Repeater control, the DataList control supports Editing and Deleting features whereas Repeater does not support. The DataList control does not have Paging and Sorting functionalities built into it similar to Repeater control.

Properties:-

CssClass: It enables us to associate a CSS class with the DataList.

HeaderStyle: It enables us to format the header row of the DataList.

FooterStyle: It enables us to format the footer row of the DataList.

ItemStyle: It enables us to format each row displayed by the DataList.

AlternatingItemStyle: It enables us to format every other row of the DataList.

EditItemStyle: It enables us to format the DataList row selected for editing.

SelectedItemStyle: It enables us to format the selected row in the DataList.

SeparatorStyle: It enables us to format the row separator displayed by the DataList.
When formatting the DataList, we also need to work with the following properties:

GridLines: It enables us to add rules around the cells in the DataList. Possible values are None, Horizontal, Vertical, and Both.

ShowFooter: It enables us to show or hide the footer row.

ShowHeader: It enables us to show or hide the header row.

UseAccessibleHeader: It enables us to render HTML <th> tags instead of <td> tags for the cells in the header row.

ADO tutorial

September 20, 2018 by admin Leave a Comment

ADO Introduction

Pretty much every application deals with data in some manner, whether that data comes from memory, databases, XML files, text files, or something else. The location where we store the data can be called as a Data Source or Data Store where a Data Source can be a file, database, or indexing server etc.

Programming Languages cannot communicate with Data Sources directly because each Data Source adopts a different Protocol (set of rules) for communication, so to overcome this problem long back Microsoft has introduced intermediate technologies like JET, Odbc and Oledb which works like bridge between the Applications and Data Sources to communicate with each other.

The Microsoft Jet Database Engine is a database engine on which several Microsoft products have been built. A database engine is the underlying component of a database, a collection of information stored on a computer in a systematic way. The first version of Jet was developed in 1992, consisting of three modules which could be used to manipulate a database. JET stands for Joint Engine Technology, sometimes being referred to as Microsoft JET Engine or simply Jet. Microsoft Access and Excel uses Jet as their underlying database engine. Over the years, Jet has become almost synonymous with Microsoft Access, to the extent where many people refer to a Jet database as an “Access database”. MS developed Jet database system, a C-based interface allowing applications to access that data, and a selection of driver DLLs that allowed the same C interface to redirect input and output to databases. However, Jet did not use SQL; the interface was in C and consisted of data structures and function calls.

ODBC (Open Database Connectivity)

ODBC (Open Database Connectivity) is a standard C programming language middle ware API for accessing database management systems (DBMS). ODBC accomplishes DBMS independence by using an ODBC driver as a translation layer between the application and the DBMS. The application uses ODBC functions through an ODBC driver manager with which it is linked, and the driver passes the query to the DBMS. An ODBC driver will be providing a standard set of functions for the application to use, and implementing DBMS-specific functionality. An application that can use ODBC is referred to as “ODBC-compliant”. Any ODBC-compliant application can access any DBMS for which a driver is installed. Drivers exist for all major DBMSs as well as for many other data sources like Microsoft Excel, and even for text or CSV files. ODBC was originally developed by Microsoft during the early 1990s.

OLE DB (Object Linking and Embedding, Database)

OLE DB (Object Linking and Embedding, Database, sometimes written as OLEDB or OLE-DB), an API designed by Microsoft, allows accessing data from a variety of sources in a uniform manner. The API provides a set of interfaces implemented using the Component Object Model (COM). Microsoft originally intended OLE DB as a higher-level replacement for, and successor to, ODBC, extending its feature set to support a wider variety of non-relational databases, such as object databases and spreadsheets that do not necessarily implement SQL. OLE DB is conceptually divided into consumers and providers. The consumers are the applications that need access to the data, and the providers are the software components that implement the interface and thereby provide the data to the consumer. An OLE DB provider is a software component enabling an OLE DB consumer to interact with a data source. OLE DB providers are alike to ODBC drivers or JDBC drivers for Java. OLE DB providers can be created to access such simple data stores as a text file and spreadsheet, through to such complex databases as Oracle, Microsoft SQL Server, and many others. It can also provide access to hierarchical data stores.

.net framework tutorial

March 25, 2018 by admin Leave a Comment

.NET FRAMEWORK is the software that is required for execution of the dot net applications on any machine. This software asks the functionalities of an operating system and makes the code do execute on its control providing the benefits. Like:

Platform independency
Security
Automatic memory management

The code which is runs on the under the control of the framework is referred as managed code and the code which runs on the operating system (machine code) is referred as un-managed code.

click here – .net framework latest version download

DEVELOPMENT OF .NET FRAMEWORK:

The development of the dot net framework has been started in the late 90s. Originally under the name NGSW (next generation windows services).

The framework has been developed following a set up specification referred as CLI specification:

CLI specifications are open specifications that are standardizes an ISO and ECMA (European Computer Manufacturer Association).giving a chance to third party to develop the third party.

CLI Specification takes 4 major things:

CLS (Common Language Specification)

CTS (Common Type System)

BCL (Base Class Library)

VES (Virtual execution System)

ASP.NET DataList Control

March 18, 2018 by admin

ASP.NET DataList Control Introduction:

The DataList control is, like the Repeater control, used to display a repeated list of items that are bound to the control. However, the DataList control adds a table around the data items by default. The DataList control may be bound to a database table, an XML file, or another list of items.

The DataList control like the Repeater control is a template driven, light weight control, and acts as a container of repeated data items. The templates in this control are used to define the data that it will contain. It is flexible in the sense that you can easily customize the display of one or more records that are displayed in the control.

Also, DataList has RepeatDirection, RepeatColumns and RepeatLayout properties, which are unique for DataList control. These properties are useful when you need to create presentation with more than one record per row, like Image Gallery, Product Catalogue etc. For example, let say you are creating an image gallery and want to show 5 images per row. Repeater would require checking of record position and manipulating HTML. With DataList, just use RepeatDirection=”Horizontal” and RepeatColumns=”5″. RepeatLayout could be Table or Flow, depending of do you need HTML table structure in layout. These features are not possible using any other data controls.

The DataList Control includes a rich set of properties that we can use to format the HTML rendered by the control whereas Repeater Controls doesn’t not support this feature. If we want to associate Cascading Style Sheet rules with various elements of the DataList, then we can take advantage of any of the following properties:

CssClass: It enables us to associate a CSS class with the DataList.

HeaderStyle: It enables us to format the header row of the DataList.

FooterStyle: It enables us to format the footer row of the DataList.

ItemStyle: It enables us to format each row displayed by the DataList.

AlternatingItemStyle: It enables us to format every other row of the DataList.

EditItemStyle: It enables us to format the DataList row selected for editing.

SelectedItemStyle: It enables us to format the selected row in the DataList.

SeparatorStyle: It enables us to format the row separator displayed by the DataList.

When formatting the DataList, we also need to work with the following properties:

GridLines: It enables us to add rules around the cells in the DataList. Possible values are None, Horizontal, Vertical, and Both.

ShowFooter: It enables us to show or hide the footer row.

ShowHeader: It enables us to show or hide the header row.

UseAccessibleHeader: It enables us to render HTML <th> tags instead of <td> tags for the cells in the header row.

Using the DataList Control:

To use this control, drag and drop the control in the design view of the web form onto a web form from the toolbox and corresponding markup will be generated automatically in the source view of a web form as following:

<asp:DataList ID=”DataList1″ runat=”server”></asp:DataList>

The Templates are as follows:

HeaderTemplate – HeaderStyle

FooterTemplate – FooterStyle

ItemTemplate – ItemStyle

AlternatingItemTemplate – AlternatingItemStyle

EditItemTemplate – EditItemStyle

SelectedItemTemplate – SelectedItemStyle

SeparatorTemplate – SeperatorStyle

Events of DataList Controls:

ItemCreated: Occurs on the server when an item in the System.Web.UI.WebControls.DataList control is created.

ItemCommand: Occurs when any button is clicked in the System.Web.UI.WebControls.DataList control.

ItemDataBound: Occurs when an item is data bound to the System.Web.UI.WebControls.DataList control.

EditCommand: Occurs when the Edit button is clicked for an item in the System.Web.UI.WebControls.DataList control.

UpdateCommand: Occurs when the Update button is clicked for an item in the System.Web.UI.WebControls.DataList control.

DeleteCommand: Occurs when the Delete button is clicked for an item in the System.Web.UI.WebControls.DataList control.

CancelCommand: Occurs when the Cancel button is clicked for an item in the System.Web.UI.WebControls.DataList control.

SelectedIndexChanged: Occurs when a different item is selected in a data listing control between posts to the server.

ajax tutorial

March 5, 2018 by admin Leave a Comment

Introduction: Ajax is shorthand for “Asynchronous JavaScript and XML”. It is a web development technique for creating interactive web application. Ajax is a latest boom in the web development world (Either we develop web application using classic ASP, or PHP, or Servlet / JSP, or ASP.NET). Ajax can be used in these all web technologies to create interactive web applications. Ajax meant to increase the web pages interactivity, speed, and usability. Ajax can be used for creating rich web based applications that look and works like a desktop applications (Standalone application). Ajax is a group of interrelated web development techniques used on the client side to create asynchronous web applications. Ajax is of the most important technology for the development of highly interactive web application and due to its features it has become extremely popular in web development world. Ajax is not a new technology but a new way to use existing standards it is basically a web development technique which uses existing technologies like JavaScript and XML. In traditional ASP.NET web application, when user submits a form (web form), they have to wait around for the page to reload before seeing the results. With AJAX our application can dynamically populate a page (For ex. Retrieve data from a database) without having to reload the whole page. With AJAX web application can send data to and retrieve data from a server asynchronously (In the background) without interfering with the display and behavior of the existing page. Data can be retrieved using XmlHttpRequest object. AJAX uses a group of technologies such as JavaScript, XML as well as HTML, CSS, XHTML also. JavaScript is mainly used to dynamically display and to allow the user to interact with the information presented (JavaScript and XmlHttpRequest object provide a method for exchanging data asynchronously between browser and server to avoid full page reloads) AJAX can be used to make RIA (Rich Internet Application) technologies. AJAX is a web browser technology independent of web server software. AJAX Is Based On Open Standards: Browser based presentation using HTML and CSS. Data stored in XML format and fetched from the server. Data fetches using XmlHttpRequest objects in the browser. JavaScript to make everything happen (Populating dynamically data) Prerequisites Of AJAX: HTML / CSS XHTML JavaScript / DOM How AJAX Works: When HTML page event occurred, it is served by a proxy component. In the most recent AJAX solutions, the proxy component is based on XMLHttpRequest object. The XMLHttpRequest object sends a regular HTTP request and waits for it to be fully served. When the response data is ready, the proxy invokes a user defined JavaScript call back function to refresh any portion of the page that needs updating. The AJAX Core Engine: The AJAX is not a particular technology it refers to a number of client features and related development techniques that make web applications look like desktop applications. AJAX does not require any plug-in. Virtually any browser released in the past five to six years can serve as great host for AJAX based applications because these all browsers have support for XMLHttpRequest object. When user makes an initial request and in response the page with the AJAX engine is loaded, there after the user sends all requests to the AJAX engine through JavaScript call back function, while the AJAX engine forwards request to the server, parses the response, and displays the HTML in the browser. XMLHttpRequest Object: The XMLHttpRequest object originally introduced with Internet Explorer with 5.0. It is an internal object that the browser publishes to its scripting engine. This object allows script code to send HTTTRequest and handle their response. The XMLHttpRequest object created by Microsoft and adopted soon thereafter by Mozilla. (This object is supported by majority of web browser today in the real world) AJAX Browser Support: All the available browsers cannot support AJAX. These are the following major browsers with support AJAX: Mozilla Firefox 1.0 and above Netscape version 7.1 and above Apple Safari 1.2 and above Microsoft Internet Explorer 5.0 and above Opera 7.6 and above. Note: When we are saying that browser does not support AJAX, it means the browser does not support creation of JavaScript object that is “XMLHttpRequest Object”. AJAX can run in on type of common browsers but there is a conflict in older (Such as IE5, IE6) and newer browsers (Such as Mozilla, Netscape, IE7+, Chrome, Safari, Opera etc). So in order to avoid this problem, we must create an object of XMLHttpRequest based on different browsers. For new browsers: var xmlhttp; xmlhttp=new XMLHttpRequest(); For older browsers: var xmlhttp; xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”); The XMLHttpRequest Object Provides Following Properties And Methods: Properties: ready State: This property returns values that indicate a current state of the object. These values from 0 to 4 during a request cycle: 0: The request is not initialised. 1: The request has been setup. (Connection established) 2: The request has been sent. (Request received) 3: The request is in process. (Request processing) 4: The request is completed. (Finished and response is ready) status: This property provides status code of the response from the server. 200: Ok 404: Page not found statusText: This property returns status message as a string. (e.g. “Page not found” or “Ok”) onreadystatechange: This property required event handler that fires when the state of the request object change. (Callback method assigned via this attribute) responseText: It holds the response data as a string of characters from the server. responseXML: It holds the response data as XML data from the server. Methods: open(mode, url, boolean): mode: Type of request either using GET or POST. url: The location of the file. Boolean: true (asynchronous), or false (synchronous). Send(“data”): This method is used to sends an HTTP request to the server and receives response. When we use to make request using GET command, then send method should be used with null parameter because data to be send via QueryString. When we used to make a request using POST command, then data to be send using send method only with specified parameter. Readystate Property Values Of XMLHttpRequest Object To Be Used In Following Sequence: ReadyState=0: After you have created the XMLHttpRequest object but before the open() method. ReadyState=1: After you have called the open() method but the send(). ReadyState=2: After we have called the send(). ReadyState=3: After the browser has established a communication with the server but before the server has completed the response. ReadyState=4: After the request has been completed and the response data have been completely received from the server. These Are The Following Steps Which We Follow While Writing AJAX Program: A client event occurs. An XMLHttpRequest object is created. The XMLHttpRequest object is configured. The XMLHttpRequest object makes an asynchronous request. Web server returns the result containing text or XML document. The XMLHttpRequest object calls the callback() function and the HTML DOM is updated.

file upload control in asp.net

November 2, 2017 by admin Leave a Comment

fileupload control in asp.net

The fileupload control enables you to upload file to the server. It displayed a text control and a browse button that allow users to select a file upload to the server.

This control is used to upload any type of file . but we can set it only specific format of file , using some code writing behind it .

html code of fileupload control

<asp:FileUpload ID="FileUpload1" runat="server" />

1	<asp:FileUpload ID="FileUpload1" runat="server" />

The asp.net fileupload control is introduce in asp.net 2.0 framework that provides the advanced functionality to the users to sent a file from their computer to the online web server.

It renders using HTML input type file control that appears as combination of two control such as textbox control and button control. The textbox control sends the path of the file selected from the use’s computer to the server whereas button control provides the functionality to open a file-navigation dialog box. Users can navigate between the directories and files available on their system and select a file that they want to upload to the web server.

The security feature of fileupload control does not allow , you to specify the file path dynamically and users are also not allowed to type-in the file path in the textbox field available with fileupload control. Users have to browse the file using file-navigation dialog box to select it for uploading.

Tha asp.net fileupload control provides different types of properties that enable you to examine the characteristics of the uploaded file and save it to a specific location on the web server.

fileBytes :- it provides the access to the bytes array generated from the stream of file selected by the user to upload.

FileContent:- it provides the Sysmte.IO.Stream object that points to the file specified for uploading. You access all the methods and properties stream class that allows you to read or write the bytes array stream of the file that is being upload by the fileupload control.

FileName :- it returns the name of the file selected by the user to upload using fileuplaod control.

SaveAs :- the savesa method of it provides the functionality to save the uploaded file at the location specified in the code to write it in the server .

PostedFile :- the postedFile provides as object of httpPostedFile class that points to the single file that have been upload using FileUpload control. It provides the access to the properties such as ContentLength, ContentType, FileName, InputStream and SaveAs method.

The asp.net FIleUpload control caches the entire contents of the elected file from client’s computer system to the the server memory after finishing the caching process it move forward to execute the code specified in the web page.