Beginner: November 2010

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

Monday, November 22, 2010

Beginner: Cross browser compatibility

Beginner: Cross browser compatibility: "Most important issue in developing web site is cross browser supporting facility.Means o/p of one page is looking different in some browser ..."

Sunday, November 21, 2010

Jqurey file uploding without using server side control.

Hi guys,
for using file uploading control in your site just pick up this code and try to find out the solution.
It's work in a nice way.
Thank's.

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

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
        <title>ColdFusion And AJAX File Upload Demo</title>

     
     <script type="text/javascript" src="jquery-1.2.2.pack.js"></script>
     <script type="text/javascript" src="ajax_upload.js"></script>
     <script>
      $(
function(){

var jForm = $( "form:first" );

jForm.submit(
function( objEvent ){
var jThis = $( this );
var strName = ("uploader" + (new Date()).getTime());

var jFrame = $( "<iframe name=\"" + strName + "\" src=\"about:blank\" />" );

jFrame.css( "display", "none" );

jFrame.load(
function( objEvent ){
var objUploadBody = window.frames[ strName ].document.getElementsByTagName( "body" )[ 0 ];

var jBody = $( objUploadBody );

var objData = eval( "(" + jBody.html() + ")" );

prompt( "Return Data:", objData );

setTimeout(
function(){
jFrame.remove();
},
100
);
}
);

$( "body:first" ).append( jFrame );

jThis
.attr( "action", "upload_act.cfm" )
.attr( "method", "post" )
.attr( "enctype", "multipart/form-data" )
.attr( "encoding", "multipart/form-data" )
.attr( "target", strName )
;
}
);
}
);
<cfset arrFiles = [] />
<cfloop
index="strFileIndex"
from="1"
to="10"
step="1">

<cfset strField = "upload#strFileIndex#" />
<cfif (
StructKeyExists( FORM, strField ) AND
Len( FORM[ strField ] )
)>


<cffile
action="upload"
filefield="#strField#"
destination="#ExpandPath( '~/resume/' )#"
nameconflict="makeunique"
/>
<cfset ArrayAppend( arrFiles, CFFILE.ServerFile ) />

</cfif>

</cfloop>
</script>

    </head>
     <body>

     <form>


     <input type="file" name="upload1" size="60" /><br />
     <br />

     <input type="file" name="upload2" size="60" /><br />
     <br />

     <input type="submit" value="Upload Files" />

     </form>

     </body>
</html>

Monday, November 15, 2010

How row indexing is possible in asp.net grid view.

<asp:GridView>
                                                <Columns>
                                                    <asp:TemplateField headertext="s.no">
                                                        <ItemTemplate>
                                                            <%# Container.DataItemIndex + 1 %>
                                                        </ItemTemplate>
                                                    </asp:TemplateField>
                                                </Columns>
</grid view>

<%=txtUserName.ClientID%>.value

Friday, November 12, 2010

Reset the text box text in masterpage and jquery

<script>
$(document).ready(function() {
$('[id$=lnkBtn]').click(function() {
$('[id$=TextBox1]').val("");
return false;
});
});
</script>

Another example of reset textbox is

<asp:Content ID="cntHeader" ContentPlaceHolderID="head" runat="Server">
<script type="text/javascript" src="../Scripts/jquery.js"></script>

<script type="text/javascript">

    $(document).ready(function () {
        $('[id$=lnkCancel]').click(function () {
            $('[id$=txtFirstName]').val('');
            $('[id$=txtLastname]').val('');
            $('[id$=txtEmail]').val('');
            $('[id$=txtPhone]').val('');
        });

    });

Reset the dropdownlist
$('select[id$=\'DropdownlistID\']').val(-1);