Visit 'LiveWorld24.tk' for Live world..............

It is always nice to show the preview of the image which has to be uploaded by the user.

After lot of searching I found that the HTML upload i.e input type="file"... is not useful as it does not expose enough server side events. For this scenario the better control is Ajax control ToolKit's AjaxFileUpload, which has enough server side events and client side events.

After the file is uploaded instead of saving it in the location in the server instead HttpHandler can be used which can write the uploaded image directly into the response. so no storage and less headaches.

What have been done.

1) Use AjaxFileUpload to upload the file.
2) Store the file in the session object.
3) Use the session object in the Handler. Set the Image control source to the Handler.

In .aspx.cs

	public static readonly string STORED_IMAGE = "SessionImage";

 	protected void OnAsyncFileUploadComplete(object sender, AsyncFileUploadEventArgs e)
        {
            if (asyncFileUpload.PostedFile != null)
            {
                HttpPostedFile file = asyncFileUpload.PostedFile;

                byte[] data = ReadFile(file);
		//Store the image in the session.
                Session[STORED_IMAGE] = data;
            }
        }


        private byte[] ReadFile(HttpPostedFile file)
        {
            byte[] data = new Byte[file.ContentLength];
            file.InputStream.Read(data, 0, file.ContentLength);
            return data;
        }

In .aspx

Note: Use the randomnumber in the querystring of the handler otherwise, browser caches the first image and returns the same image again and again.

    <script language="javascript" type="text/javascript">
        function getRandomNumber() {
            var randomnumber = Math.random(10000);
            return randomnumber;
        }    
    
        function OnClientAsyncFileUploadComplete(sender, args) 
        {
            var handlerPage = '<%= Page.ResolveClientUrl("~/ImageHandler.ashx")%>';
            var queryString = '?randomno=' + getRandomNumber();
            var src = handlerPage + queryString;
            var clientId = '<%=previewImage.ClientID %>';
            document.getElementById(clientId).setAttribute("src", src);
        }
    </script>

The Handler

Note use the IRequiresSessionState to access the session variables in the Handler.

    public class ImageRequestHandler: IHttpHandler, IRequiresSessionState
    {
        public void ProcessRequest(HttpContext context)
        {
            context.Response.Clear();

            if(context.Request.QueryString.Count != 0)
            {
		//Get the stored image and write in the response.
                var storedImage = context.Session[_Default.STORED_IMAGE] as byte[];
                if (storedImage != null)
                {
                    Image image = GetImage(storedImage);
                    if (image != null)
                    {
                        context.Response.ContentType = "image/jpeg";
                        image.Save(context.Response.OutputStream, ImageFormat.Jpeg);
                    }
                }
            }
        }

        private Image GetImage(byte[] storedImage)
        {
            var stream = new MemoryStream(storedImage);
            return Image.FromStream(stream);
        }

        public bool IsReusable
        {
            get { return false; }
        }
    }

In web.config

<add validate="false" verb="*" path="ImageHandler.ashx"type="ImagePreviewDemo.ImageRequestHandler,ImagePreviewDemo"/>

Please find the full source code attached.
Attachments

Introduction

Before creating a .NET MVC application, we have to register the domain name that will be used for the web site at the Facebook development site: http://developers.facebook.com/setup/. After successful registration, we will have a Facebook APIKey and Facebook Secret.

Now let's create a simple ASP.NET MVC application in VS:

I will use the Facebook API button in this sample to show an alternative log in option to the user. Let's change the _LogOnPartial.cshtml file in such a way:

Collapse | Copy Code

@if(Request.IsAuthenticated) {
    <text>Welcome <strong>@User.Identity.Name</strong>!
    [ @Html.ActionLink("Log Off", "LogOff", "Account") ]</text>
}
else {
    <fb:login-button perms="email,user_checkins" onlogin="afterFacebookConnect();" 
       autologoutlink="false" ></fb:login-button>
    <div id="fb-root" style="display:inline; margin-left:20px;"></div>
    @:[ @Html.ActionLink("Log On", "LogOn", "Account") ]
}
<script language="javascript" type="text/javascript">
    window.fbAsyncInit = function () {
        FB.init({ appId: ' -- YOUR REAL APPLICATION ID SHOUD BE HERE --', 
                  status: true, cookie: false, xfbml: true });
    };
    function afterFacebookConnect() {
        FB.getLoginStatus(function (response) {
            if (response.session) {
                window.location = "../Account/FacebookLogin?token=" + 
                       response.session.access_token;
            } else {
                // user clicked Cancel
            }
        });
    };
    $(document).ready(function () {
        if (document.getElementById('fb-root') != undefined) {
            var e = document.createElement('script');
            e.type = 'text/javascript';
            e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
            e.async = true;
            document.getElementById('fb-root').appendChild(e);
        }
    });
</script>

The following elements were added to the control:

• Facebook login button (fb:login-button).
• Container which will contain all Facebook scripts (div id="fb-root").
• FB initialization script (FB.fbAsyncInit). You have to replace the sample appId value with the real one received when registering your app on the Facebook development site.
• afterFacebookConnect - script which will be called after the user closes the Facebook login dialog window (after successful or failed login).
• Script for loading Facebook JavaScript libraries (e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';).

After successful login, we will have the access_token value, and now we can load detailed user's info, store this info (if we need to), and authenticate the user. To do this, we will redirect the user to the Account.FacebookLogin action and pass the access_token value as a parameter to this action. So at this stage, we will implement the "FacebookLogin" action. The created action will look like this:

Collapse | Copy Code

using System.Web.Mvc;
using System.Web.Security;
using MVCOAuth.Models;
using System.Net;
using Newtonsoft.Json.Linq;
using System;

namespace MVCOAuth.Controllers
{
    public class AccountController : Controller
    {
        [HttpGet]
        public ActionResult FacebookLogin(string token)
        {
            WebClient client = new WebClient();
            string JsonResult = client.DownloadString(string.Concat(
                   "https://graph.facebook.com/me?access_token=", token));
            // Json.Net is really helpful if you have to deal
            // with Json from .Net http://json.codeplex.com/
            JObject jsonUserInfo = JObject.Parse(JsonResult);
            // you can get more user's info here. Please refer to:
            //     http://developers.facebook.com/docs/reference/api/user/
            string username = jsonUserInfo.Value<string>("username");
            string email = jsonUserInfo.Value<string>("email");
            string locale = jsonUserInfo.Value<string>("locale");
            string facebook_userID = jsonUserInfo.Value<string>("id");

            // store user's information here...
            FormsAuthentication.SetAuthCookie(username, true);
            return RedirectToAction("Index", "Home");
        }

And that's it! We have integrated alternative Facebook authentication on the MVC site. Before login:

After successful Facebook authentication:

Hope this will be helpful for someone! 

How to Integrate Asp.Net application in Facebook

Hi,

Someone asked me how to create facebook app day before yesterday and he wanted to integrate existing asp.net webpage in this facebook app. I was not much aware about facebook integration but got to know that facebook doesn’t have any api for asp.net to integrate webpage instead they have for php and python. So I googled and then find very good dotnet toolkit for facebook app which is from Microsoft (Facebook Developer Kit). We can integrate desktop or web app using this toolkit. So I thought I should make a sample app and share on this platform.

Below are some steps":

Before creating facebook app you need to have facebook account.

Setting up Facebook App

• To create facebook app click on Developer section 
• Click on Set up New App button.
• Agree Facebook terms and click on Create App

• Put Security Check keywords.
• Click on Submit.
• Fill basic information about app.

• Click on Facebook Integration tab.
• Put Name of Canvas page.
• Before putting URL of webpage of your website, I want to show how your page can get callback from facebook app. So first we create webpage in our website:
• Create asp.net website in Visual studio.
• Add reference of Facebook.dll from “C:\Program Files\Coding4Fun\Facebook\Binaries”. This dll will be placed after installing Facebook Developer kit on your machine.
• Create instance of FacebookService object. you can copy facebook app api key and secret key from application page on facebook in source code.

 

put above values in FACEBOOK_API_KEY and FACEBOOK_SECRET constants respectively.

you can get user_id of facebook who requested this application by calling

view source

print?

1.string userId = Session["Facebook_userId"] as String;

you can also get many information about user like name, sex, location,friends etc.

view source

print?

1.User usr=_fbService.GetUserInfo();

Source Code

view source

print?

01.using System;

02.using Facebook;

03.public partial class Facebook_ConnectFacebook : System.Web.UI.Page

04.{

05.    Facebook.Components.FacebookService _fbService = new Facebook.Components.FacebookService();

06.    private const string FACEBOOK_API_KEY = "191856207506775";

07.    private const string FACEBOOK_SECRET = "820c0b05b14a09365e072c8d37a8c49f";

08. 

09.    protected void Page_Load(object sender, EventArgs e)

10.    {

11.        _fbService.ApplicationKey = FACEBOOK_API_KEY; _fbService.Secret = FACEBOOK_SECRET;

12.        _fbService.IsDesktopApplication = false;

13.        string sessionKey = Session["Facebook_session_key"] as String;

14.        string userId = Session["Facebook_userId"] as String;

15.         

16.    // When the user uses the Facebook login page, the redirect back here

17.    // will will have the auth_token in the query params

18.         

19.    string authToken = Request.QueryString["auth_token"];

20.         

21.    // We have already established a session on behalf of this user

22.        if (!String.IsNullOrEmpty(sessionKey))

23.        {

24.            _fbService.SessionKey = sessionKey; _fbService.UserId = userId;

25.        }

26.        // This will be executed when Facebook login redirects to our page        

27.        else if (!String.IsNullOrEmpty(authToken))

28.        {

29.            _fbService.CreateSession(authToken);

30.            Session["Facebook_session_key"] = _fbService.SessionKey;

31.            Session["Facebook_userId"] = _fbService.UserId;

32.            Session["Facebook_session_expires"] = _fbService.SessionExpires;

33.        }

34.        // Need to login        

35.        else

36.        {

37.            Response.Redirect(@"http://www.Facebook.com/login.php?api_key=" + _fbService.ApplicationKey + @"&v=1.0\");

38.        }

39. 

40.        User usr = _fbService.GetUserInfo();

41.        string t = string.Format("User Name:{0}, Sex:{1}, Location: {2}", usr.Name, usr.Sex, usr.CurrentLocation.City);

42.        Response.Write(t);

43.    }

44.}

Testing

Now we are done with coding. Its time for testing.

• Run your website.
• Put webaddress of your webpage in facebook developer section as canvas URL.
• Canvas type should be IFrame.

• Click on Save changes.
• now Facebook app has created.

• Now open app url like http://apps.facebook.com/testneeraj/ on browser .
• First time authToken will not authorize from facebook because you need to agree on “Allow Access” information.

• Click on facebook banner.
• It will ask Request for Permission. Click Allow.

• It will show all basic information of user on webpage.

• After that you can publish your app but having restriction from facebook that your application should 10 active member per month.

 

I hope this article will give good knowledge about integration with facebook app. Please share your comments and feedback with me.

Table of content

• Introduction
• Background
• Using the code
1. MVC Project structure
2. Model
3. View
4. Controller
5. jQuery
• Creating your first MVC application
1. List/Index page
2. Details page
3. Edit page
4. Create page
5. Delete functionality
6. Search
7. Validation
• Advanced topics
1. Routing
2. Areas
3. View bag
4. Custom view templates
5. Extension Methods
6. Helper methods
• Conclusion

Introduction

In this article you will find the simplest way to create your first ASP.NET MVC application. This is a tutorial for absolute beginners to ASP.NET MVC. The only prerequisite for following this tutorial is that you know how to use Visual Studio, and understand HTML and C# syntax. Also, I will show you briefly how you can use some jQuery plug-ins so it would be helpful if you know some jQuery syntax. If you are not familiar with jQuery, it is not a problem, you can just skip those parts because they are optional enhancements.

Background

What is MVC (Model-View-Controller)? MVC is a simple architecture where all components are separated into three classes:

1. Model - Classes that contain data that will be shown to the user.
2. View - Components that will display the model to the user.
3. Controller - Components that will handle any interaction with the user.

In the web framework, the user will enter some URL to the ASP.NET MVC application, and the controller, model, and view will handle this request and return the HTML back to the user. The interaction between the browser and the server that has model, view, and controller components is shown in the following figure:

This simple scenario of processing an MVC request is described in the following steps:

1. The user enters in the browser some URL that is sent to the server, e.g., http://localhost/Product/List.
2. The user request is analyzed by the framework in order to determine what controller should be called.
3. The Controller takes the parameters that the user has sent, calls the model to fetch some data, and loads the model object that should be displayed.
4. The Controller passes the model object to the view.
5. The View gets data from the model, puts it into the HTML template, and sends the response back to the user browser.
6. The browser shows the HTML that is received from the server.

In this example, I will show how you can create a simple application that allows you to list and manage user details using ASP.NET MVC using the Razor syntax.

First, what is Razor? When you create a view component that translates C# data objects to HTML view, you can use several template syntax. Razor is one nice and clean syntax for combining C# and HTML code. In the following listing, you can see a simple example of the Razor syntax:

Collapse | Copy Code

@{
 string name = "Jovan";
 var dateOfBirth = new { Day = 8, Month = 12, Year = 1980 }; 
 string[] skills = new string[] { "MVC",  "C#", "JQuery", "ASP.NET" };
}

<h2>@name</h2>
<p>Born in year: @dateOfBirth.Year</p>
<ul>
@foreach(skill in skills){
 <li>skill</li> 
}
</ul>

In the first part, I have defined a few C# variables, and then I have injected them into the HTML code. The resulting HTML output is shown in the following listing:

Collapse | Copy Code

<h2>Jovan</h2>
<p>Born in year: 1980</p>
<ul>
 <li>MVC</li>
 <li>C#</li>
 <li>JQuery</li>
 <li>ASP.NET</li>
</ul>

As you can see, C# code will be discarded and only values from that code will be injected in the HTML template. Putting C# data into HTML with Razor syntax is easy - just put the name of the C# variable with the @ prefix. This works both with simple types and object fields. Even if you have more complex processing such as outputting the list of elements with some loop, the syntax is very clean.

If you are not familiar with Razor, you can see a quick reference here or a full reference on the ASP.NET MVC site.

Note that in this example, C# data is defined directly in the view. However, in the real code, C# data will come from the model that is provided by the controller (see figure above).

Using the code

To start with this code, you will need to have Visual Studio or at least Web Developer. If you do not have it, you can install it from the ASP.NET MVC site. There you can find all the necessary prerequisites for installing the MVC framework.

Once you install Web Developer, creating an MVC application is easy. Just go to File/New Project, select ASP.NET MVC Web Application, and the wizard will walk you through the setup process.

Here you should put the name of your project and determine where it will be placed. You can use the default settings if you want. The following sections will explain the structure and elements of the created MVC project.

MVC Project structure

When you create your MVC web application, it will be organized in the following folders:

• Model containing your model classes.
• Controller where are placed classes named as <CONTROLLER-NAME>Controller. These classes contain the action method that will be called when an HTTP request is sent.
• Views - In this folder are placed template files that will be used to generate HTML as a response. Views are partitioned into subfolders. Each controller has its own subfolder named the same way as the controller where the controller's views are placed.
• CSS files and images will be placed in the Content folder.
• JavaScript files will be placed in the Scripts folders.

An example of that kind of structure is shown in the following figure:

In this figure, you can see all the components described above. We have two controllers User and School and their views in the /Views/School and /Views/User folders. Views that are placed in the /Views/Shared folder are shared among all controllers and views. Note that views have a .cshtml file extension. This means that they are using Razor syntax for view templates (this syntax is used in this tutorial).

Model

Model can be any class that defines a data structure that will be shown to the user. It can be a plain C# class, an Entity Framework model generated from a database, even a DataSet (although it is not recommended to use it in MVC). In this example, I will use a plain list of objects as a simulation of the data repository. The examples in this article will display a table of users from the list, show/edit details of a user object from the list, and enable you to add/delete users from the list. The Model class used in the application is shown in the following listing:

Collapse | Copy Code

public partial class User
{
    public int UserID { get; set; }
    public string Name { get; set; }
    public string Address { get; set; }
    public string Town { get; set; }
    public string County { get; set; }
    public string Country { get; set; }
    public string Email { get; set; }
    public DateTime DoB { get; set; }
    public bool IsActive { get; set; }
    public string UserName { get; set; }
    public string Password { get; set; }
    public int Rating { get; set; }
}

This example will not use persistent data storage (e.g., database). I will put the User object in a plain list and the application will use it to show user data. An example of that kind of "repository" is shown in the following example:

Collapse | Copy Code

public class UserRepository
{
        public static List<User> Users = new List<User>();
}

Although I will not explain any advanced data access techniques, I will use some simple LINQ queries to find user data from the list. The following listing shows LINQ queries that find users:

Collapse | Copy Code

var user = userList.First(x => x.UserID == id); 
var bestUsers = userList.Where(x => x.Rating > 8);

The first line of code finds the first object in the user list that has property UserID equal to the ID variable (i.e., finds a user by ID). The second line finds all the users with rating greater than 8.

The form parameter => expression is an inline function (lambda expression) that is used to define the criterion for finding users from the list. It is just a shorter version for the inline function that would look like:

Collapse | Copy Code

function(parameter){ return expression; }

You can find more information about LINQ queries in the Using LINQ Queries article.

View

View is a plain file that defines a template that will be used to show Model data. In the simplest scenario, you can imagine View as a plain HTML code where are placed positions where you will inject Model properties. An example of that kind of View is shown in the following listing:

Collapse | Copy Code

<fieldset>
    <legend>User</legend>
    <div class="display-label">Name</div>
    <div class="display-field">@Model.Name</div>
    <div class="display-label">Address</div>
    <div class="display-field">@Model.Address</div>
</fieldset>

In this Ciew is defined an HTML structure that will be shown to the user, and the places where the Model data will be placed. The example will inject the Model Name and Address properties into the HTML code. The syntax @Model.<<PropertyName>> defines a place where the Model property will be placed in the View. If you have values "Jane Smith" for name and "Regent street 12, London" for address, the following HTML output will be generated:

Collapse | Copy Code

<fieldset>
    <legend>User</legend>
    <div class="display-label">Name</div>
    <div class="display-field">Jane Smith</div>
    <div class="display-label">Address</div>
    <div class="display-field">Regent street 12, London</div>
</fieldset>

When you generate complex form elements such as INPUT, TEXTAREA, etc., you can use the same approach as the one in the previous example. You can put HTML code for INPUT and inject some property of the Model directly in the value attribute. An example is shown in the following listing:

Collapse | Copy Code

<input name="address" id="address"  value="@Model.Address" class="medium-size" />

However, instead of plain HTML, you can use a number of built-in Extension Methods of the HTML class.

Collapse | Copy Code

@Html.TextBox( "address", Model.Address)
@Html.TextBoxFor(  model => model.Address )

The first parameter is the name/ID for the textbox, and the second parameter specifies the value it should have. This helper method will render an INPUT tag and the type="text" attribute. In the second example is used the TextBoxFor method where is passed a lambda expression that specifies the Address property. In this case we do not need to explicitly specify name/id of the input field - the helper method will take it from the property name. There are other helper methods that can be used to generate other form elements:

• Html.DropDownListFor()
• Html.CheckboxFor()
• Html.RadioButtonFor()
• Html.ListBoxFor()
• Html.PasswordFor()
• Html.HiddenFor()
• Html.LabelFor()

You can also add your own methods that render some of your custom HTML such as Html.Table(), Html.Calendar(), etc. You can see more details in Creating custom helpers on the MVC site. You can also generate HTML without specifying the type using the Html.DisplayFor and Html.EditorFor methods. An example is shown in the following listing:

Collapse | Copy Code

@Html.DisplayFor( model => model.Address )
@Html.EditorFor(  model => model.Address )

In these methods, we have not specified the type of input at all, because it will be determined based on the type of the property that should be shown. As an example, if the type of the property is string, EditorFor will generate text input. A more interesting example is when you pass some object to EditorFor. By default, the EditorFor method will generate an INPUT element for each property in the object based on the type (e.g., text input for string, checkbox for boolean, etc.). DisplayFor will do the same except that it will render non-editable markup. You can find more details about the display templates here. However, the true power of these methods can be seen when you create custom templates for object types. This is a more advanced topic but if you are interested in this, you can see this article for more details.

Now back to basics - how do we add a new View? In the folder structure above, you can see the Views folder and the subfolders called User, School, Shared, etc. Just right-click on the folder where you want to put the View, go to Add New View, and the following dialog will be shown to you:

Here you can enter the name of the View (usually it is the same as the name of the controller action) and the type of the Model object that will be shown. Also, you can add an empty View and start coding it, or you can select some of the predefined templates for list, details, edit, create, or delete.

You can imagine Views as separate pages that will be shown to the user. However, there are a few other types of Views (described below).

Layout page

When you are creating a set of pages, probably you will need to use the same elements on many pages. As an example, all pages will have the same menu, the same CSS/JavaScript files included etc. In ASP.NET MVC, you do not need to copy the same elements on each page. You can use the so-called layout pages where a general layout of the entire MVC application will be defined and used on each View page. An example of a layout page that will be used in this project is shown in the following listing:

Collapse | Copy Code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>This is a title of the page</title>
    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script src="/Scripts/modernizr-1.7.min.js" type="text/javascript"></script>
    @RenderSection("PageScripts",false)
</head>

<body>
    @RenderBody()
</body>
</html>

As you can see, in the layout page, I have included all the necessary CSS/JavaScript files that will be used across all pages. Also, I have defined two custom placeholders where each View will put specific content. These two placeholders are:

1. Section PageScripts - where each page will be able to put some JavaScript or CSS files that will be required only on that page.
2. RenderBody statement that defines where the content of a particular View will be injected in the general layout.

Partial views

Another way to organize and reuse your View code is to put elements that are used on several Ciews into separate files. These are not standalone Views that are shown to the user - these are only partial views that are included on other main View pages.

Partial Views are HTML templates as regular Vviews. An example of a partial view that shows the current date is shown in the following listing:

Collapse | Copy Code

<div class="now">Current date is @DateTime.Now.ToString()</div>

Whenever you need to include this partial view, you can just call it by name as shown in the following example:

Collapse | Copy Code

@Html.Partial("_CurrentDateView")

In the place of the call, the entire content of the View will be included. You can put this statement in standard views, layout pages, and even in other partial views.

Controller

Controller is the heart of the processing logic in MVC model. When a URL is sent to an internet application in the format /<<Controller>>/<<Action>>/<<Parameter>> (e.g., /User/Details/1), it will be parsed and the class called <<Controller>>Controller (e.g., UserController) will be found, the method <<Action>> in that controller will be called (e.g., method Details in the above URL), and the parameter will be passed to that method. The Controller will perform all the necessary processing - it will find a Model and pass it to the View.

The Controller can have any public method with arbitrary parameters that will be passed. As an example, the following listing shows the Controller called ExampleController with a method ControllerAction that receives three parameters - id, name, and flag.

Collapse | Copy Code

public ExampleController
{
        public ActionResult ControllerAction(int id, string name, bool flag)
    {
        var model = GetModel(id, name, flag);
        return View(model);
    }
}

You can call this Controller's action using the following URL:

Collapse | Copy Code

/Example/ControllerAction?id=17&name=test&flag=true

This is the default mapping between URL routes and controller/actions where the first word in the URL represents a controller name, and the second one is the action method name. However, you can modify it and add your own routing mapping rules. You can see more details about the custom routing in the Creating custom routes article.

The Controller will automatically map parameters from the request to the method arguments by name. This is useful if you have a form with many parameters that can be automatically read from the request and the user in the action method body.

How you can add a new Controller? It is similar to adding new Views - go to the Controller folder, right-click, and add a new Controller. The following dialog will be shown:

Here you can enter the name of the Controller - note that it must be in the format <<Name>>Controller. Also, you can choose one of the predefined templates - empty controller, controller with list, details, edit, create, and delete actions, and controller that is already connected to the database via Entity Framework. In this example, I have started with an empty controller. Once you create an empty controller, you can add action methods in the following format:

Collapse | Copy Code

public MyController{
    [Get]
    public ActionResult MyAction()
    {
        return View();
    }
}

The action method should return a view that will display the HTML in the browser (ActionResult type in the example above). By default if you add the MyAction method in the MyController class, it will be called when the /My/MyAction URL is sent. You can change this behavior, but it will not be described in this beginner level article. Also, you might notice the [Get] attribute that is placed before the method. This attribute tells the action that it should react only to a GET HTTP protocol. As an alternative, I could set [Post] instead of [Get] or I could leave it blank so the action would be opened on both GET and POST protocols.

Also, you must have noticed that the last statement in the action is return View(). If an action MyAction is placed in MyController, this statement will find the MyAction.cshtml View in the My folder in the Ciews section. This is the default rule for returning Views in action methods. If you do not want to use this default view, you can choose what View should be returned by specifying the View name, e.g.,

Collapse | Copy Code

return View(name);

Note that you have an easy way to go to the View, or to add a View for a particular action. Just right click on the action and you will see a context menu that will enable you to add a View for this action. Add View action will open the "Add View" dialog as in the previous section. If a View with the same name as an action already exists, "Go to view" will open the view page.

jQuery

Although it is not a direct part of MVC, jQuery is a very useful JavaScript library that can enable you to enhance your user interface. The first useful thing you will be able to do is easily find HTML elements in the HTML. Some of the simplest queries are shown in the following table:

Once you find elements with jQuery selectors, you can hide them, change their color, attributes (classes, values, inner text), add some event handlers to them (click, double click), etc. An example of the code that attaches a click handler to the link is shown in the following listing:

Collapse | Copy Code

$('a').click(function (event) {

    // prevent default action (going to the another page)
    event.preventDefault()

    // Do something
});

Also, jQuery contains a set of useful plug-ins that enable you to enhance your UI elements. Some examples are shown in the following table:

You can fine more details and tutorials about jQuery on the jQuery documentation site. There is also an interesting article "jQuery for beginners" where you can find some interesting examples. This is optional, but very easy and useful to add in the MVC application. Note that when you create an MVC application, jQuery will be automatically included in the project. However, plug-ins are not part of core jQuery that is included in the MVC project so you will need to find them and put them in your project manually.

How can you use this JavaScript code? First, you will need to include the jQuery library from the jQuery download page. In your MVC project, you will probably find this library included in the scripts folder so you can just add a reference to this script in the layout page. Then you will be able to use this library - an example is shown in the following listing:

Collapse | Copy Code

<script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("table").fadeOut("slow");
    }
</script>

In this example, I have included jQuery version 1.7.1. and added a fade out effect on the table element. Note that this statement is placed in the document ready wrapper. Using this wrapper, any JavaScript code within it will be called when an entire document is loaded and ready to be processed. This is a common practice in jQuery programming. Here I have added jQuery code as an inline script, but you can put it into a separate file.

Creating your first MVC application

In this section, I will show how you can create a simple MVC application that lists, edits, creates, and deletes users.

List/Index page

On the list page will be displayed a table with a list of users in the repository. The page will be opened when the /User/Index URL is called. Therefore, we would need to create an Index method and place it in the UserController class. An example of the Index method is shown in the following listing:

Collapse | Copy Code

public ActionResult Index()
{
    var model = UserRepository.Users;
    return View(model);
}

This method is fairly simple. It takes a list of users from the repository and passes it to the View. The list view takes this list and displays a table as shown in the following listing:

Collapse | Copy Code

<table class="display">
    <thead>
    <tr>
        <th>
            Name
        </th>
        <th>
            Address
        </th>
        <th>
            Town
        </th>
        <th>
            County
        </th>
        <th>
            Rating
        </th>
        <th></th>
    </tr>
    </thead>
    <tbody>

@foreach (var item in Model) {
    <tr>
        <td>
            @item.Name
        </td>
        <td>
            @item.Address
        </td>
        <td>
            @item.Town
        </td>
        <td>
            @item.County
        </td>
        <td>
            @item.Rating
        </td>
        <td>
            <a href="/User/Details/@item.UserID">Details</a> |
            <a href="/User/Edit/@item.UserID">Edit</a> |
            <a href="/User/Delete/@item.UserID" class="delete">Delete</a>
        </td>
    </tr>
}
</tbody>
</table>

As you can see, this list view has taken a collection of user objects and outputs them as an HTML table in the foreach loop. Note that you do not need to create an HTML wrapper with head and body tags. These are defined in the layout page, and this part of the HTML code is just injected in the middle of the page (the RenderBody statement in the layout page above). An example of the list page is shown in the following figure:

Applying the jQuery DataTables plug-in

The table you saw is just a plain table without any functionality. However you can easily enhance this table with the jQuery JavaScript library to add some advanced features such as sorting, pagination, filtering, etc. In the layout page, you saw that I have put a PageScripts placeholder that allows each view to put some custom JavaScript or CSS. In this example, only on the list page, I will add some JavaScript that will enhance this table. An example of this additional script is shown in the following listing:

Collapse | Copy Code

@section PageScripts{
    <link href="/Content/dataTable/demo_table.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery.dataTables.1.8.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("table").dataTable();
        }
    </script>
}

This script has included jQuery DataTables CSS and JavaScript files, and applied DataTables function on the HTML table. As a result, you will convert this plain table to a feature-rich table shown on the following figure:

I will not explain how this jQuery plug-in can be used in more detail, but if you are interested, you can take a look at the Enhancing HTML tables using the jQuery DataTables plug-in article.

Details page

On the details page will be shown information of a particular user by ID. The request that is sent to the server-side is in the following format:

Collapse | Copy Code

/User/Details/123

In this request, you can see that UserController will be called, and that the Details method with parameter 123 will be executed. 123 is the ID of the record that will be shown. The Details method will take the ID of the user, find this user in the model repository, and pass it to the view:

Collapse | Copy Code

public ActionResult Details(int id)
{
    var model = UserRepository.Users.First(user => user.UserID == id);
    return View(model);
}

The View is also simple - it receives the user model object and injects user properties into the view. Part of view is shown in the following listing:

Collapse | Copy Code

@model JQueryMVC.Models.User

<h2>User Details</h2>
<fieldset>
    

Introduction to ASP.NET Web Programming Using the Razor Syntax (C#) OverviewTutorialsVideosSamplesForumBooksOpen Source

Introducing ASP.NET Web Pages 2 - Getting StartedIntroducing ASP.NET Web Pages 2 - Programming BasicsIntroducing ASP.NET Web Pages 2 - Displaying DataIntroducing ASP.NET Web Pages 2 - HTML Form BasicsIntroducing ASP.NET Web Pages 2 - Entering Database Data by Using FormsIntroducing ASP.NET Web Pages 2 - Updating Database DataIntroducing ASP.NET Web Pages 2 - Deleting Database DataIntroducing ASP.NET Web Pages 2 - Creating a Consistent LayoutIntroducing ASP.NET Web Pages 2 - Publishing a Site by Using WebMatrixIntro to ASP.NET Web Programming Razor SyntaxASP.NET Web Pages Visual BasicIntro to DebuggingWorking with FormsValidating User Input in ASP.NET Web Pages SitesCreating a Consistent LookCustomizing Site-Wide BehaviorCreating and Using a Helper in an ASP.NET Web Pages SiteRendering ASP.NET Web Pages Sites for Mobile DevicesCreating Readable URLs in ASP.NET Web Pages SitesWorking with DataDisplaying Data in a ChartMigrating a Database to SQL ServerWorking with FilesWorking with ImagesWorking with VideoDisplaying Maps in an ASP.NET Web Pages SiteAdding Security and MembershipAdding Security to Any SiteEnabling Login from External Sites in an ASP.NET Web Pages SiteUsing a CAPTCHA to Prevent Automated Programs (Bots) from Using Your ASP.NET Web SiteSending Email from Your SiteAdding Search to Your Web SiteAdding Social Networking to Your WebsiteCaching to Improve the Performance of Your WebsiteAnalyzing Traffic

The Top 8 Programming Tips

This section lists a few tips that you absolutely need to know as you start writing ASP.NET server code using the Razor syntax.

You can find more details about most of these programming techniques later in the article.

1. You add code to a page using the @ character

The @ character starts inline expressions, single statement blocks, and multi-statement blocks:

<!-- Single statement blocks  -->
@{ var total = 7; }
@{ var myMessage = "Hello World"; }

<!-- Inline expressions -->
<p>The value of your account is: @total </p>
<p>The value of myMessage is: @myMessage</p>

<!-- Multi-statement block -->
@{
    var greeting = "Welcome to our site!";
    var weekDay = DateTime.Now.DayOfWeek;
    var greetingMessage = greeting + " Today is: " + weekDay;
}
<p>The greeting is: @greetingMessage</p>

This is what these statements look like when the page runs in a browser:

2. You enclose code blocks in braces

A code block includes one or more code statements and is enclosed in braces.

<!-- Single statement block.  -->
@{ var theMonth = DateTime.Now.Month; }
<p>The numeric value of the current month: @theMonth</p>

<!-- Multi-statement block. -->
@{
    var outsideTemp = 79;
    var weatherMessage = "Hello, it is " + outsideTemp + " degrees.";
}
<p>Today's weather: @weatherMessage</p>

The result displayed in a browser:

3. Inside a block, you end each code statement with a semicolon

Inside a code block, each complete code statement must end with a semicolon. Inline expressions don't end with a semicolon.

<!-- Single-statement block -->
@{ var theMonth = DateTime.Now.Month; }

<!-- Multi-statement block -->
@{
    var outsideTemp = 79;
    var weatherMessage = "Hello, it is " + outsideTemp + " degrees.";
}

<!-- Inline expression, so no semicolon -->
<p>Today's weather: @weatherMessage</p>

4. You use variables to store values

You can store values in a variable, including strings, numbers, and dates, etc. You create a new variable using the var keyword. You can insert variable values directly in a page using @.

<!-- Storing a string -->
@{ var welcomeMessage = "Welcome, new members!"; }
<p>@welcomeMessage</p>

<!-- Storing a date -->
@{ var year = DateTime.Now.Year; }

<!-- Displaying a variable -->
<p>Welcome to our new members who joined in @year!</p>

The result displayed in a browser:

5. You enclose literal string values in double quotation marks

A string is a sequence of characters that are treated as text. To specify a string, you enclose it in double quotation marks:

@{ var myString = "This is a string literal"; }

If the string that you want to display contains a backslash character (\) or double quotation marks ( " ;), use a verbatim string literal that's prefixed with the @ operator. (In C#, the \ character has special meaning unless you use a verbatim string literal.)

<!-- Embedding a backslash in a string -->
@{ var myFilePath = @"C:\MyFolder\"; }
<p>The path is: @myFilePath</p>

To embed double quotation marks, use a verbatim string literal and repeat the quotation marks:

<!-- Embedding double quotation marks in a string -->
@{ var myQuote = @"The person said: ""Hello, today is Monday."""; }
<p>@myQuote</p>

Here's the result of using both of these examples in a page:

6. Code is case sensitive

In C#, keywords (like var, true, and if) and variable names are case sensitive. The following lines of code create two different variables, lastName and LastName.

@{
    var lastName = "Smith";
    var LastName = "Jones";
}

If you declare a variable as var lastName = "Smith"; and if you try to reference that variable in your page as @LastName, an error results because LastName won't be recognized.

7. Much of your coding involves objects

An object represents a thing that you can program with — a page, a text box, a file, an image, a web request, an email message, a customer record (database row), etc. Objects have properties that describe their characteristics and that you can read or change — a text box object has a Text property (among others), a request object has a Url property, an email message has a From property, and a customer object has a FirstName property. Objects also have methods that are the "verbs" they can perform. Examples include a file object's Save method, an image object's Rotate method, and an email object's Send method.

You'll often work with the Request object, which gives you information like the values of text boxes (form fields) on the page, what type of browser made the request, the URL of the page, the user identity, etc. The following example shows how to access properties of the Request object and how to call the MapPath method of the Request object, which gives you the absolute path of the page on the server:

<table border="1">
<tr>
    <td>Requested URL</td>
    <td>Relative Path</td>
    <td>Full Path</td>
    <td>HTTP Request Type</td>
</tr>
<tr>
    <td>@Request.Url</td>
    <td>@Request.FilePath</td>
    <td>@Request.MapPath(Request.FilePath)</td>
    <td>@Request.RequestType</td>
</tr>
</table>

The result displayed in a browser:

8. You can write code that makes decisions

A key feature of dynamic web pages is that you can determine what to do based on conditions. The most common way to do this is with the if statement (and optional else statement).

@{
   var result = "";
   if(IsPost)
   {
      result = "This page was posted using the Submit button.";
   }
   else
   {
      result = "This was the first request for this page.";
   }
}

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
<body>
<form method="POST" action="" >
  <input type="Submit" name="Submit" value="Submit"/>
  <p>@result</p>
</form>
</body>
</html>
    </body>
</html>

The statement if(IsPost) is a shorthand way of writing if(IsPost == true). Along with if statements, there are a variety of ways to test conditions, repeat blocks of code, and so on, which are described later in this article.

The result displayed in a browser (after clicking Submit):

A Simple Code Example

This procedure shows you how to create a page that illustrates basic programming techniques. In the example, you create a page that lets users enter two numbers, then it adds them and displays the result.

1. In your editor, create a new file and name it AddNumbers.cshtml.
2. Copy the following code and markup into the page, replacing anything already in the page.
   

   @{
       var total = 0;
       var totalMessage = "";
       if(IsPost) {
   
           // Retrieve the numbers that the user entered.
           var num1 = Request["text1"];
           var num2 = Request["text2"];
   
           // Convert the entered strings into integers numbers and add.
           total = num1.AsInt() + num2.AsInt();
           totalMessage = "Total = " + total;
       }
   }
   
   <!DOCTYPE html>
   <html lang="en">
     <head>
       <title>Add Numbers</title>
       <meta charset="utf-8" />
       <style type="text/css">
         body {background-color: beige; font-family: Verdana, Arial;
               margin: 50px; }
         form {padding: 10px; border-style: solid; width: 250px;}
       </style>
     </head>
   <body>
     <p>Enter two whole numbers and then click <strong>Add</strong>.</p>
     <form action="" method="post">
       <p><label for="text1">First Number:</label>
         <input type="text" name="text1" />
       </p>
       <p><label for="text2">Second Number:</label>
         <input type="text" name="text2" />
       </p>
       <p><input type="submit" value="Add" /></p>
     </form>
   
     <p>@totalMessage</p>
   
   </body>
   </html>

   Here are some things for you to note:

   • The @ character starts the first block of code in the page, and it precedes the totalMessage variable that's embedded near the bottom of the page.

   • The block at the top of the page is enclosed in braces.

   • In the block at the top, all lines end with a semicolon.

   • The variables total, num1, num2, and totalMessage store several numbers and a string.

   • The literal string value assigned to the totalMessage variable is in double quotation marks.

   • Because the code is case-sensitive, when the totalMessage variable is used near the bottom of the page, its name must match the variable at the top exactly.

   • The expression num1.AsInt() + num2.AsInt() shows how to work with objects and methods. The AsInt method on each variable converts the string entered by a user to a number (an integer) so that you can perform arithmetic on it.

   • The <form> tag includes a method="post" attribute. This specifies that when the user clicks Add, the page will be sent to the server using the HTTP POST method. When the page is submitted, the if(IsPost) test evaluates to true and the conditional code runs, displaying the result of adding the numbers.

3. Save the page and run it in a browser. (Make sure the page is selected in the Files workspace before you run it.) Enter two whole numbers and then click the Add button.

   

Basic Programming Concepts

This article provides you with an overview of ASP.NET web programming. It isn't an exhaustive examination, just a quick tour through the programming concepts you'll use most often. Even so, it covers almost everything you'll need to get started with ASP.NET Web Pages.

But first, a little technical background.

The Razor Syntax, Server Code, and ASP.NET

Razor syntax is a simple programming syntax for embedding server-based code in a web page. In a web page that uses the Razor syntax, there are two kinds of content: client content and server code. Client content is the stuff you're used to in web pages: HTML markup (elements), style information such as CSS, maybe some client script such as JavaScript, and plain text.

Razor syntax lets you add server code to this client content. If there's server code in the page, the server runs that code first, before it sends the page to the browser. By running on the server, the code can perform tasks that can be a lot more complex to do using client content alone, like accessing server-based databases. Most importantly, server code can dynamically create client content — it can generate HTML markup or other content on the fly and then send it to the browser along with any static HTML that the page might contain. From the browser's perspective, client content that's generated by your server code is no different than any other client content. As you've already seen, the server code that's required is quite simple.

ASP.NET web pages that include the Razor syntax have a special file extension (.cshtml or .vbhtml). The server recognizes these extensions, runs the code that's marked with Razor syntax, and then sends the page to the browser.

Where does ASP.NET fit in?

Razor syntax is based on a technology from Microsoft called ASP.NET, which in turn is based on the Microsoft .NET Framework. The.NET Framework is a big, comprehensive programming framework from Microsoft for developing virtually any type of computer application. ASP.NET is the part of the .NET Framework that's specifically designed for creating web applications. Developers have used ASP.NET to create many of the largest and highest-traffic websites in the world. (Any time you see the file-name extension .aspx as part of the URL in a site, you'll know that the site was written using ASP.NET.)

The Razor syntax gives you all the power of ASP.NET, but using a simplified syntax that's easier to learn if you're a beginner and that makes you more productive if you're an expert. Even though this syntax is simple to use, its family relationship to ASP.NET and the .NET Framework means that as your websites become more sophisticated, you have the power of the larger frameworks available to you.

Basic Syntax

Earlier you saw a basic example of how to create an ASP.NET Web Pages page, and how you can add server code to HTML markup. Here you'll learn the basics of writing ASP.NET server code using the Razor syntax — that is, the programming language rules.

If you're experienced with programming (especially if you've used C, C++, C#, Visual Basic, or JavaScript), much of what you read here will be familiar. You'll probably need to familiarize yourself only with how server code is added to markup in .cshtml files.

Combining Text, Markup, and Code in Code Blocks

In server code blocks, you often want to output text or markup (or both) to the page. If a server code block contains text that's not code and that instead should be rendered as is, ASP.NET needs to be able to distinguish that text from code. There are several ways to do this.

• Enclose the text in an HTML element like <p></p> or <em></em>:
  

  @if(IsPost) {
      // This line has all content between matched <p> tags.
      <p>Hello, the time is @DateTime.Now and this page is a postback!</p>
  } else {
      // All content between matched tags, followed by server code.
      <p>Hello <em>stranger</em>, today is: <br /> </p>  @DateTime.Now
  }

  The HTML element can include text, additional HTML elements, and server-code expressions. When ASP.NET sees the opening HTML tag (for example, <p>), it renders everything including the element and its content as is to the browser, resolving server-code expressions as it goes.

• Use the @: operator or the <text> element. The @: outputs a single line of content containing plain text or unmatched HTML tags; the <text> element encloses multiple lines to output. These options are useful when you don't want to render an HTML element as part of the output.
  

  @if(IsPost) {
      // Plain text followed by an unmatched HTML tag and server code.
      @: The time is: <br /> @DateTime.Now
      <br/>
      // Server code and then plain text, matched tags, and more text.
      @DateTime.Now @:is the <em>current</em> time.
  }

  If you want to output multiple lines of text or unmatched HTML tags, you can precede each line with @:, or you can enclose the line in a <text> element. Like the @: operator, <text> tags are used by ASP.NET to identify text content and are never rendered in the page output.

  @if(IsPost) {
      // Repeat the previous example, but use <text> tags.
      <text>
      The time is: <br /> @DateTime.Now
      <br/>
      @DateTime.Now is the <em>current</em> time.
      </text>
  }
  
  @{
      var minTemp = 75;
      <text>It is the month of @DateTime.Now.ToString("MMMM"), and
      it's a <em>great</em> day! <br /><p>You can go swimming if it's at
      least @minTemp degrees. </p></text>
  }

  The first example repeats the previous example but uses a single pair of <text> tags to enclose the text to render. In the second example, the <text> and </text> tags enclose three lines, all of which have some uncontained text and unmatched HTML tags (<br />), along with server code and matched HTML tags. Again, you could also precede each line individually with the @: operator; either way works.

  Note   When you output text as shown in this section — using an HTML element, the @: operator, or the <text> element — ASP.NET doesn't HTML-encode the output. (As noted earlier, ASP.NET does encode the output of server code expressions and server code blocks that are preceded by @, except in the special cases noted in this section.)

Whitespace

Extra spaces in a statement (and outside of a string literal) don't affect the statement:

@{ var lastName =    "Smith"; }

A line break in a statement has no effect on the statement, and you can wrap statements for readability. The following statements are the same:

@{ var theName =
"Smith"; }

@{
    var
    personName
    =
    "Smith"
    ;
} 

However, you can't wrap a line in the middle of a string literal. The following example doesn't  work:

@{ var test = "This is a long
    string"; }  // Does not work!

To combine a long string that wraps to multiple lines like the above code, there are two options. You can use the concatenation operator (+), which you'll see later in this article. You can also use the @ character to create a verbatim string literal, as you saw earlier in this article. You can break verbatim string literals across lines:

@{ var longString = @"This is a
    long
    string";
}

Code (and Markup) Comments

Comments let you leave notes for yourself or others. They also allow you to disable (comment out) a section of code or markup that you don't want to run but want to keep in your page for the time being.

There's different commenting syntax for Razor code and for HTML markup. As with all Razor code, Razor comments are processed (and then removed) on the server before the page is sent to the browser. Therefore, the Razor commenting syntax lets you put comments into the code (or even into the markup) that you can see when you edit the file, but that users don't see, even in the page source.

For ASP.NET Razor comments, you start the comment with @* and end it with *@. The comment can be on one line or multiple lines:

@*  A one-line code comment. *@

@*
    This is a multiline code comment.
    It can continue for any number of lines.
*@      

Here is a comment within a code block:

@{
    @* This is a comment. *@
    var theVar = 17;
} 

Here is the same block of code, with the line of code commented out so that it won't run:

@{
    @* This is a comment. *@
    @* var theVar = 17;  *@
} 

Inside a code block, as an alternative to using Razor comment syntax, you can use the commenting syntax of the programming language you're using, such as C#:

@{
    // This is a comment.
    var myVar = 17;
    /* This is a multi-line comment
    that uses C# commenting syntax. */
}

In C#, single-line comments are preceded by the // characters, and multi-line comments begin with /* and end with */. (As with Razor comments, C# comments are not rendered to the browser.)

For markup, as you probably know, you can create an HTML comment:

<!-- This is a comment.  -->

HTML comments start with <!-- characters and end with -->. You can use HTML comments to surround not only text, but also any HTML markup that you may want to keep in the page but don't want to render. This HTML comment will hide the entire content of the tags and the text they contain:

<!-- <p>This is my paragraph.</p>  -->

Unlike Razor comments, HTML comments are rendered to the page and the user can see them by viewing the page source.

Variables

A variable is a named object that you use to store data. You can name variables anything, but the name must begin with an alphabetic character and it cannot contain whitespace or reserved characters.

Variables and Data Types

A variable can have a specific data type, which indicates what kind of data is stored in the variable. You can have string variables that store string values (like "Hello world"), integer variables that store whole-number values (like 3 or 79), and date variables that store date values in a variety of formats (like 4/12/2012 or March 2009). And there are many other data types you can use.

However, you generally don't have to specify a type for a variable. Most of the time, ASP.NET can figure out the type based on how the data in the variable is being used. (Occasionally you must specify a type; you'll see examples where this is true.)

You declare a variable using the var keyword (if you don't want to specify a type) or by using the name of the type:

@{
    // Assigning a string to a variable.
    var greeting = "Welcome!";

    // Assigning a number to a variable.
    var theCount = 3;

    // Assigning an expression to a variable.
    var monthlyTotal = theCount + 5;

    // Assigning a date value to a variable.
    var today = DateTime.Today;

    // Assigning the current page's URL to a variable.
    var myPath = this.Request.Url;

    // Declaring variables using explicit data types.
    string name = "Joe";
    int count = 5;
    DateTime tomorrow = DateTime.Now.AddDays(1);
}

The following example shows some typical uses of variables in a web page:

@{
    // Embedding the value of a variable into HTML markup.
    <p>@greeting, friends!</p>

    // Using variables as part of an inline expression.
    <p>The predicted annual total is: @( monthlyTotal * 12)</p>

    // Displaying the page URL with a variable.
    <p>The URL to this page is: @myPath</p>
}

If you combine the previous examples in a page, you see this displayed in a browser:

Converting and Testing Data Types

Although ASP.NET can usually determine a data type automatically, sometimes it can't. Therefore, you might need to help ASP.NET out by performing an explicit conversion. Even if you don't have to convert types, sometimes it's helpful to test to see what type of data you might be working with.

The most common case is that you have to convert a string to another type, such as to an integer or date. The following example shows a typical case where you must convert a string to a number.

@{
    var total = 0;

    if(IsPost) {
        // Retrieve the numbers that the user entered.
        var num1 = Request["text1"];
        var num2 = Request["text2"];
        // Convert the entered strings into integers numbers and add.
        total = num1.AsInt() + num2.AsInt();
    }
}

As a rule, user input comes to you as strings. Even if you've prompted users to enter a number, and even if they've entered a digit, when user input is submitted and you read it in code, the data is in string format. Therefore, you must convert the string to a number. In the example, if you try to perform arithmetic on the values without converting them, the following error results, because ASP.NET cannot add two strings:

Cannot implicitly convert type 'string' to 'int'.

To convert the values to integers, you call the AsInt method. If the conversion is successful, you can then add the numbers.

The following table lists some common conversion and test methods for variables.

var myIntNumber = 0;
var myStringNum = "539";
if(myStringNum.IsInt()==true){
    myIntNumber = myStringNum.AsInt();
}

var myStringBool = "True";
var myVar = myStringBool.AsBool();

var myStringFloat = "41.432895";
var myFloatNum = myStringFloat.AsFloat(); 

var myStringDec = "10317.425";
var myDecNum = myStringDec.AsDecimal(); 

var myDateString = "12/27/2012";
var newDate = myDateString.AsDateTime();

int num1 = 17;
int num2 = 76;
// myString is set to 1776
string myString = num1.ToString() +
  num2.ToString();

Operators

An operator is a keyword or character that tells ASP.NET what kind of command to perform in an expression. The C# language (and the Razor syntax that's based on it) supports many operators, but you only need to recognize a few to get started. The following table summarizes the most common operators.

@(5 + 13)
@{ var netWorth = 150000; }
@{ var newTotal = netWorth * 2; }
@(newTotal / 2)

var age = 17;

var myNum = 15;
if (myNum == 15) {
    // Do something.
} 

var theNum = 13;
if (theNum != 15) {
    // Do something.
}

if (2 < 3) {
    // Do something.
}
var currentCount = 12;
if(currentCount >= 12) {
    // Do something.
}

// The displayed result is "abcdef".
@("abc" + "def")

int theCount = 0;
theCount += 1; // Adds 1 to count

var myUrl = Request.Url;
var count = Request["Count"].AsInt();

@(3 + 7)
@Request.MapPath(Request.FilePath);

var income = Request["AnnualIncome"];

bool taskCompleted = false;
// Processing.
if(!taskCompleted) {
    // Continue processing
}

bool myTaskCompleted = false;
int totalCount = 0;
// Processing.
if

Here are 3 ways to do it specifically with a FormCollection object.

public ActionResult SomeActionMethod(FormCollection formCollection)

{

  foreach (var key in formCollection.AllKeys)

  {

    var value = formCollection[key];

  }

  foreach (var key in formCollection.Keys)

  {

    var value = formCollection[key.ToString()];

  }

  // Using the ValueProvider

  var valueProvider = formCollection.ToValueProvider();

  foreach (var key in valueProvider.Keys)

  {

    var value = valueProvider[key];

  }

}

Chart Control of ASP.Net 3.5 is very handy way to get statictical data as charts. There are variety of ways to display data with Chart Control. Also it is extramely simple to adapt it to your project. But as I hear from so many ASP.Net user nowadays, there might be some problems when it comes to publish it on your web server, especially on shared hosting servers !

After you install the Chart Control, in order to run ASP.Net chart control on your project, you need to configure your web.config file on your root directory which you have already done (I guess !). If you do that properly, you are able to run it on your local server perfectly. But it is not enough for you to be good to go on your web server.

You need to have Chart Control installed on your web server in order to run it on web !

It is easy to do that if you have your own server but for those who have their website files on a shared hosting service, it is a bit hard. But you do not need to beg your hosting provider to make it be installed on server. Only you need to do is to make proper changes on your web.config file and believe me those changes are much more simple than you think ! Of Course, some references is needed to be added to the Bin Folder on your root directory !

Solution :

Follow this directory on windows explorer:

C:\Program Files\Microsoft Chart Controls\Assemblies

You will see 4 DLL files inside the folder. Two of those files are for Windows Applications and two of them for Web Applications. We need web application dll files so copy the dll files which are named 'System.Web.DataVisualization.Design' and 'System.Web.DataVisualization'

Paste those dll files into the Bin folder on the root directory of your Web Application.

Secondly, open the Web.Config file on the root directory of your web application.Find the <appSettings> node. You have a key add inside this just like below;

<add key="ChartImageHandler" value="storage=file;timeout=20;dir=c:\TempImageFiles\;" />

Replace this tag with the new one as below;

<add key="ChartImageHandler" value="storage=file;timeout=20;"/>

Save the changes on your Web.Config file and close it. Now copy the two dll inside the bin folder and replace the Web.Config file on your server with your new Web.Config file.

That's it !

Now you should be able to run the Chart Control on your Web Server without begging your hosting provider If you have any problem with this, I recommend you to check the following codes if they exist on your Web.Config file or not;

What is Web Service?

Web Service is an application that is designed to interact directly with other applications over the internet. In simple sense, Web Services are means for interacting with objects over the Internet. The Web serivce consumers are able to invoke method calls on remote objects by using SOAP and HTTP over the Web. WebService is language independent and Web Services communicate by using standard web protocols and data formats, such as

HTTP

XML

SOAP

Advantages of Web Service

Web Service messages are formatted as XML, a standard way for communication between two incompatible system. And this message is sent via HTTP, so that they can reach to any machine on the internet without being blocked by firewall.

Examples for Web Service

Weather Reporting: You can use Weather Reporting web service to display weather information in your personal website.

Stock Quote: You can display latest update of Share market with Stock Quote on your web site.

News Headline: You can display latest news update by using News Headline Web Service in your website.

In summary you can any use any web service which is available to use. You can make your own web service and let others use it. Example you can make Free SMS Sending Service with footer with your advertisement, so whosoever use this service indirectly advertise your company... You can apply your ideas in N no. of ways to take advantage of it.

Frequently used word with web services

What is SOAP?

SOAP (simple object access protocol) is a remote function calls that invokes method and execute them on Remote machine and translate the object communication into XML format. In short, SOAP are way by which method calls are translate into XML format and sent via HTTP.

What is WSDL? 

WSDL stands for Web Service Description Language, a standard by which a web service can tell clients what messages it accepts and which results it will return.WSDL contains every detail regarding using web service and Method and Properties provided by web service and URLs from which those methods can be accessed and Data Types used.

What is UDDI?

UDDI allows you to find web services by connecting to a directory.

What is Discovery or .Disco Files?

Discovery files are used to group common services together on a web server. Discovery files .Disco and .VsDisco are XML based files that contains link in the form of URLs to resources that provides discovery information for a web service. Disco File contains URL for the WSDL, URL for the documentation and URL to which SOAP messages should be sent.

Before start creating web service first create one table in your database and give name UserInformation in my code I am using same name and enter some dummy data for our testing purpose

Now we will see how to create new web service application in asp.net

Open visual studio ---> Select File ---> New ---> Web Site ---> select ASP.NET Web Service

Now our new web service ready our webservice website like this

Now open your Service.cs file in web service website to write the code to get the user details from database

Before writing the WebMethod in Service.cs first add following namespaces

using System.Xml;

using System.Configuration;

using System.Data;

using System.Data.SqlClient;

After adding namespaces write the following method GetUserDetails in Service.cs page

1. Explain the life cycle of an ASP .NET page.?

Following are the events occur during ASP.NET Page Life Cycle:

1)Page_PreInit

2)Page_Init

3)Page_InitComplete

4)Page_PreLoad

5)Page_Load

6)Control Events

7)Page_LoadComplete

8)Page_PreRender

9)SaveViewState

10)Page_Render

11)Page_Unload

Among above events Page_Render is the only event which is raised by page. So we can't write code for this event.

2. how does the cookies work in asp.net?

we know Http is an state-less protocol which is required for interaction between clinet and server .

so there is an need to remeber state of request raised by an web browser so that 

web server can recognize you have already previously visited or not.

There are two types of state management techniques:

a) Client side state management

b) Server - side statemanagement

Using cookies comes under clinet side statemanagement .In HttpResponse we write 

Cookie containing sessionId and other information within it.

when a browser made a request to the web server the same cookie is sent to the server where server recognize the session id and get other information stored to it previously.

3. What is Ispostback method in ASP.Net? Why do we use that??

Basically Post back is an action performed by a interactive Webpage. When it goes to the server side for a non-client Operation Server again posts it back to the client and hence the name.

Ex:

if(!IsPostBack)

will not allow the page to post back again n again bcoz it reduces the performance.

5. what is the difference between application state and caching?

Application Object and Cached Object both falls under Server side State Management.

Application object resides in InProc i.e. on the same server where we hosted our application.

Cache Object resides on server side/ DownStream/Client Side.

Application Object will be disposed once application will stop.

Cache Object can be disposed using Time based cache dependency.

Only one user can access Application Object at a time hence we have to lock it every time we modify it.

6. what is boxing and unboxing?

Boxing is what happens when a value-type object is assigned to a reference-type variable.

Unboxing is what happens when a reference-type variable is assigned to a value-type variable.

7. What are the uses of Reflection??

Reflection is a concept using which we can 

1) Load assemblies dynamically

2) Invoke methods at runtime

3) Retriving type information at runtime.

8. What is the use of AutoWireup in asp.net?

AutoEventWireup attribute is used to set whether the events needs to be automatically generated or not.

In the case where AutoEventWireup attribute is set to false (by default) event handlers are automatically required for Page_Load or Page_Init. However when we set the value of the AutoEventWireup attribute to true the ASP.NET runtime does not require events to specify event handlers like Page_Load or Page_Init.

9. what events will occur when a page is loaded?

Below are the events occures during page load.

1) Page_PreInit

2) Page_Init

3) Page_InitComplete

4) Page_PreLoad

10. Where is the View state Data stored?

ViewState data is stored in the hidden field. When the page is submitted to the server the data is sent to the server in the form of hidden fields for each control. If th viewstate of the control is enable true the value is retained on the post back to the client when the page is post backed.

12. Where do the Cookie State and Session State information be stored?

Cookie Information will be stored in a txt file on client system under a 

folder named Cookies. Search for it in your system you will find it. Coming to Session State

As we know for every process some default space will be allocated by OS.

In case of InProc Session Info will be stored inside the process where our 

application is running.

In case of StateServer Session Info will be stored using ASP.NET State Service.

In case of SQLServer Session info will be stored inside Database. Default DB 

which will be created after running InstallSQLState Script is ASPState.

14. What are the different types of sessions in ASP.Net? Name them.?

Session Management can be achieved in two ways

1)InProc

2)OutProc

OutProc is again two types

1)State Server

2)SQL Server

InProc

Adv.:

1) Faster as session resides in the same process as the application

2) No need to serialize the data DisAdv.:

1) Will degrade the performance of the application if large chunk of data is stored

2) On restart of IIS all the Session info will be lost

State Server

Adv.:

1) Faster then SQL Server session management 

2) Safer then InProc. As IIS restart 

won't effect the session data

DisAdv.:

1) Data need to be serialized

2) On restart of ASP.NET State Service session info will be lost

3)Slower as compared to InProc

SQL Server

Adv.:

1) Reliable and Durable

2) IIS and ASP.NET State Service 

restart won't effect the session data

3) Good place for storing large chunk of data

DisAdv.:

1) Data need to be serialized

2) Slower as compare to InProc and State Server

3)Need to purchase Licensed 

version of SQL Serve

16. What is caching? What are different ways of caching in ASP.NET?

Caching is a technique of persisting the data in memory for immediate access to requesting program calls. This is considered as the best way to enhance the performance of the application.

Caching is of 3 types:

Output Caching - Caches the whole page.

Fragment Caching - Caches a part of the page

Data Caching - Caches the data

17. What is meant by 3-tier architecture.

We generally split our application into 3-Layers

1)Presentation Layer ( Where we keep all web forms Master Pages and User Controls).

2)Business Layer (Where we keep business logic). e.g Code related to manipulating data Custom Exception classes Custom Control classes Login related code if any etc. etc.

3)Data Access Layer (Where we keep code used to interact with DB). e.g. We can have the methods which are using SQL Helper (Application Block).

19. What is the difference between mechine.config and web.config?

machine.config is a system level configuration i.e it is applied on all application in o/s that the configuration is set where as in web.config it is applicable to only one application i.e each asp.net webapplication will contain atleast on web.config file.

21. What is the difference between Response.Redirect and Server.Transfer.

Server.Transfer transfers page processing from one page directly to the next page without making a round-trip back to the client's browser. This provides a faster response with a little less overhead on the server.Server.Transfer does not update the clients url history list or current url. 

Response.Redirect is used toredirect the user's browser to another page or site. This performs a trip back to the client where the client's browser is redirected to the new page. The user's browser history list is updated to reflect the new address.

25. What is the exact purpose of http handlers?

ASP.NET maps HTTP requests to HttpHandlers. Each HttpHandler enables processing of individual HTTP URLs or groups of URL extensions within an application. HttpHandlers have the same functionality as ISAPI extensions with a much simpler programming model

Ex

1.Default HttpHandler for all ASP.NET pages ->ASP.NET Page Handler (*.aspx)

2.Default HttpHandler for all ASP.NET service pages->ASP.NET Service Handler (*.asmx)

An HttpHandler can be either synchronous or asynchronous. A synchronous handler does not return until it finishes processing the HTTP request for which it is called. An asynchronous handler usually launches a process that can be lengthy and returns before that process finishes

After writing and compiling the code to implement an HttpHandler you must register the handler using your application's Web.config file.