Tuesday, November 23, 2010

Ajax with asp.net

Hi,
Here i am post the code how to use the ajax in asp.net (.aspx page).
This is the simple example of using ajax in .aspx page.

what is ajax
The core idea behind AJAX is to make the communication with the server asynchronous, so that data is transferred and processed in the background. As a result the user can continue working on the other parts of the page without interruption. In an AJAX-enabled application only the relevant page elements are updated and only when necessary.

In contrast, the traditional synchronous (postback-based) communication requires a full page reload each time data is transferred to/from the server.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="validation.aspx.cs" Inherits="validation" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>




<body>
    <form id="form1" runat="server">
 <asp:scriptmanager ID="Scriptmanager1" runat="server"></asp:scriptmanager>
        <asp:UpdatePanel runat="server">
       <ContentTemplate>
    <asp:Label ID="lbl" runat="server" ></asp:Label>
    <asp:TextBox ID="txt" runat="server"></asp:TextBox>
            </ContentTemplate>
            <Triggers>
            <asp:AsyncPostBackTrigger ControlID="btnsubmit" EventName="Click" />
            </Triggers>
             </asp:UpdatePanel>
             <asp:Button ID="btnsubmit" runat="server" Text="button" OnClick="btnsubmit_Click"
            ValidationGroup="grp" />
       </form>
    </body>
   

</html>
 Just use the control under the update panel which is use on the current page.
u can call ajex on button submit event by the bind with <asp:AsyncPostBackTrigger> in which u can give controlid=(id of button) and event=(any event like on mouse over,click.....).


Jquery ajax wid asp.net

<head runat="server">
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
        $().ready(function () {
            $('#btn').click(function () {
                $.ajax({
                    type: "POST",
                    contentType: "charset=utf-8",
                    url: "Ajax.aspx",
                    dataType: "json",
                    success: function (data) {
                        $('#txtBox').val("Zeeshan");
                        alert("deepak");
                        $('#txtname').val("deepak")

                    },
                    error: function (data) {
                    }

                });
            });
        });

    </script>
   
</head>
Firstly added the js library in the header session of the page.
$().ready(function () = Its denote the current document is ready to load.
$('#btn').click(function ()= Here

Thanks

No comments:

Post a Comment