Hello World! In Ajax with ASP.Net

Posted on November 6, 2012 by Suman

After successful creation of “Hello World” now I am going to describe how to write Hello World in Ajax framework/Ajax extension. I have enhanced earlier Hello World code to describe Hello World in Ajax. As previous I am attaching codes at below look carefully and try to find out difference with earlier.

Hello World in ASP.Net with Ajax

In these codes I have highlighted sections with 1, 2 and 3. Section 1 and 2 are related with Ajax and 3 for timer. Section 1 is “ScriptManager” enables Ajax functionality in page. Remember in a page only one ScriptManager is permitted. If you add multiple ScriptManager then it will trough an error. Even for Master page scenario multiple ScriptManager is not permitted.

Section 2 is “UpdatePanel”. UpdatePanel is a wrapper of Ajax enabled sections. Using UpdatePanel we can declare that section is Ajax enable and can work asynchronously. Within UpdatePanel I have taken ContentTemplate, which actually holding all update sections.

Section 3 has used to create a timer in page. This timer executes for every 1000 milliseconds, which means in every 1 second and it picks system time from backend and shows in browser. If you check carefully in browser then you will find to get time from backend no post back is happening.

In backend section there has no major change for Ajax, in fact no change is there.  Just I have added a section to get system time using C# codes.  To get current time I have used DateTime Structure and have picked up current system time.

Full backend codes are as below:

Hello World with Ajax Timer – Ajax in ASP.Net

When this project runs in browser then it looks like below:

Ajax Hello World in Firefox – ASP.Net

 

 

Posted in VisualStudio.Net | Tagged , , , , , , | Leave a comment

Successful creation of Hello World! – Backend code

Posted on October 31, 2012 by Suman

In earlier post you have gained knowledge about frontend code and have learnt design and Source code of aspx page. Now I shall describe about backend code for Hello World.

aspx.cs backend code

aspx.cs backend code

I am not going to discuss about class, methods etc. from any book you can read these information. To run your written code you need to compile your project. You can do it very easily. To build your website/application please goto ‘Build’ menu from menu bar and then choose ‘Build Web Site’. If you want to build only current page then can select ‘Build Page’ from Build menu. After build completions you will see build result in lower section of the window. In above image it is showing that website build completed successfully.

After successful build of website we can run it. We can run a website in two ways. First, select ‘Start Debugging’ from ‘Debug’ menu or you can just press F5 key from function key.

Alternatively you can open website a page in design mode and can run it in browser by right clicking on Design mode (aspx page) and then by choosing ‘View in browser’.

View in browser - asp.net website

View in browser – asp.net website

Website in Google Chrome

Website in Google Chrome

However if we need to debug the code then we must run the application by running in design mode (F5) and by setting breakpoint in code.  By setting breakpoint in a particular code we can halt code execution at some position to review the code in runtime.

In debugging mode to  go to next line of code shortcut key  is F10. But F10 will skip inner section of codes line by line. But by pressing F5 we run the program again normally.

Menu bar - Debug

Menu bar – Debug – Visual web developer 2008

Shortcut keys

F1: help

F5: Run code in debug mode

F9: Set or reset (toggle)  break point in a code.

F10: Run in debug mode one by one line of code but it will skip inner section code debugging of any method/function.

F11: Run next line of code in debug mode and it will check inner codes of any called method/function.

Backend Code with break point ASP.Net

Backend Code with break point ASP.Net

Run web site in debugging mode (F5): Choose selected options

Run web site in debugging mode (F5): Choose selected options

Code has stopped at break point

Code has stopped at break point – code running in debugging mode (F5)

Press F10/F11 to execute one line code or F5 to execute all codes. So finally website looks like below:

Finally Hello World! website is running successfully!

Finally Hello World! website is running successfully!

So finally first Hello World! website got success but remember this is without Ajax. Next we will create Hello World! with Ajax!

 

 

 

 

Posted in VisualStudio.Net | Tagged , , , , , , , , , | Leave a comment

Successful creation of Hello World!

Posted on October 28, 2012 by Suman

Before explaining of Hello World! program look carefully into this screenshot and its codes.

Hello World in Visual Studio Web Designer.

Hello World in Visual Studio Web Designer 2008.

In this image 1 marked section is indicating all items of the project. Items are like webpages, user control, master pages, content pages, web config, app config, different folders like css, images, java script or simple scripts, app code, app data etc. That means each and everything of the project can be shown from here.

If we click on web page like Default.aspx then default.aspx will be shown in design area. Generally for any new project default.aspx remains open, so for any other item you can click . I have opened default.aspx in Split mode to see code and design at a time. There are two other modes like only ‘Design’ which is shows design of page and ‘Source’ for codes of the controls.  ‘Button’ and ‘Label’ server control in design mode I have marked by 2 and source code by 3. For each and individual control there will be different aspx code and it’s a bit similar of HTML but very minor difference due to ASPX syntax. In this project I have taken total two server control. These are called server control because these controls are executing in Server and sends output as HTML to browser.

Section 4 is Properties of a sever control, for this case button server control.  Button is showing with “Click me!”, it has created by updating its ‘Text’ property. If you look into Button’s HTML part then will find an event “onclick”. On clicking on this button will call “btnHello_Click” method in back-end ‘cs’ code. This event properties has created by double clicking on button server control. By clicking on button we change event property of then Button Server Control.

Click button properties

Button properties for Click event – ASP.Net server control.

See in this picture “btnHello_Click” has updated. In spite of double clicking on Button control, you double click on this Click event property of Button control then same thing will happen.

Now let’s look in to back end code of Hello World!

 

Posted in VisualStudio.Net | Tagged , , , , , , , | 2 Comments

First Web Site in Visual Studio.Net using Visual Web Developer 2008 Express Edition

Posted on October 27, 2012 by Suman

Yesterday I have shared download link for Visual Studio.Net for 2008, 2010 and 2012 express version. However I shall choose 2008 version because its more than enough for learning and its light weight. All of these Visual Studio.Net looks like below:

 

Visual Studio 2008 Express

Visual Web Developer 2008 Express Edition

 

Visual Studio Express 2012

Visual Studio Express 2012 for Web

 

Basically there has not much difference between two from look and feel perspective. Both are same but in 2012 has added more features like Razon v1 and v2 and it has become much slow. I am using i5 intel processor with 6 GB RAM and 750 GB HDD but also it is taking around 30-50 seconds to open. However as at that moment we are not concentrating on these so for now can skip these.

Let’s first create a new empty website to run “Hello World!”

As showing in first picture select ASP.Net Web Site and in location type “Hello World”. See I have select Language as “Visual C#”, so my website code will be C# or C Sharp code. However if you are more comfortable with Visual Basic language, can select Visual Basic from drop down. Next, click on OK. Now project will be created and it will show like below:

Visual Web Developer 2008 Express

 

Posted in VisualStudio.Net | Tagged , , , , , , | Leave a comment

Let’s start the journey with Microsoft Visual Studio.Net

Posted on October 25, 2012 by Suman

This is going to be my first blog in my own hosted domain with SumanBiswas.com. I am blogging from last 5 years in Blogger (socketprogramming.blogspot.com) but now planning to start own domain. I am planning to publish my ideas, though, concepts, knowledge in this blog. As initial will start this blog with Microsoft Visual Studio programming but in future it may extends to other technologies. However let’s start the new journey!

As initial I shall start from very beginning of Visual Studio.Net or only .Net (Dot Net, for short name will call Visual Studio or only Dot Net). I do not believe “Hello World!” is the beginning. Because to reach till “Hello World!” you need a ground and I shall start from there. To start Visual Studio.Net programming at least you need Microsoft Visual Studio.Net software. At present there are available multiple versions of Visual Studio and you can start learning from any of them. Visual Studio was introduced around 2002 (to learning more about its history can visit WikiPedia). To start learning you can choose any of these software but I shall prefer Visual Studio.Net 2008 or later version.

Visual Studio.Net now releases with different versions like Express (free to use with limited functionality), Professional etc. For our work we will use only Express version. You can download Express version from below URL or you can simple Google it to download.

Visual Studio.Net downloads URL as below:

 

Microsoft Visual Studio 2008 Express Editions with SP1

http://www.microsoft.com/en-gb/download/details.aspx?id=20682

 

Microsoft Visual Studio 2010 Express Products download URL

http://www.microsoft.com/visualstudio/eng/products/visual-studio-2010-express

 

Microsoft Visual Studio Express 2012 Products download URL

http://www.microsoft.com/visualstudio/eng/products/visual-studio-express-products

 

Download any of these software and install it in your PC.

Posted in VisualStudio.Net | Tagged , , , , , , | Leave a comment