Post
Ask Question

Create Basic ASP.NET MVC Application

Let us start writing MVC applications now, and why don’t we start with a small invitation from CsharpCorner Delhi event? I am not using an image and it’s just a very basic application.

In this application we will learn about Modal and View (that include strongly type views).

Let see the agenda for this application below:

  1. A Home page with details of the Invite.
  2. A form from where you can confirm your enrollment.
  3. Few basic validations, with thanks page.
  4. You can add Email functionality as well. I am escaping the same.

I am using strongly typed view in this application. Let’s first discuss what that is.

Strongly typed views are used for rendering specific types of model objects. By specifying type of data, visual studio provides IntelliSense for that class. View inherits from View Page whereas strongly typed view inherits from ViewPage<T> where T is type of the model.

Let us start making the invite:

Step 1: Select the MVC 4 empty project and name it as C#PartyInvite.

Select the MVC 4 empty project

Step 2: Add an empty “Home” Controller by right click on controller and add new controller.

Add controller

Step 3: Right click on index method and add View as shown below:

index method

Let the name remain “Index” only.

Add the following code:

  1. @{  
  2. Layout = null;  
  3. }  
  4.   
  5. <!DOCTYPE html>  
  6. <html>  
  7.     <head>  
  8.         <meta name="viewport"content="width=device-width"/>  
  9.         <title>Index</title>  
  10.     </head>  
  11.     <body>  
  12.         <div>  
  13. @ViewBag.Greeting World  
  14.   
  15.             <p> Hi..We are organizing C# Corner Delhi Meet and You are invited</p>  
  16. @Html.ActionLink("Enroll Now", "EnrollNow");  
  17.   
  18.         </div>  
  19.     </body>  
  20. </html>  
Step 4: Add a Model, right click on Model and add a class “Response”. Add the following code:
  1. public class Response  
  2. {  
  3.    public string Name { get; set; }  
  4.    public string MobileNumber { get; set; }  
  5.    public string Email { get; set; }  
  6.    public bool? AttendOrNot { get; set; }  
  7.   
  8. }  
Step 5: Linking Action Method.

If you remember we have added the following line on Index view:
  1. @Html.ActionLink("Enroll Now", "EnrollNow");  
So for the same add the following code on “Home Controller”:
  1. public ViewResult EnrollNow( )  
  2. {  
  3.    return View();  
  4.    //return View("Thanks" , response);  
  5. }  
Step 6: Right click on the EnrollNow Method and add a strongly typed View for the same as in the following:

View name

Step 7: Add the following code on the “EnrollNow” view:
  1. @model CSharpCornerDelhiInvite.Models.Response  
  2.   
  3. @{  
  4. Layout = null;  
  5. }  
  6.   
  7. <h1>Enrollment Form </h1>  
  8. <!DOCTYPE html>  
  9. <html>  
  10.     <head>  
  11.         <meta name="viewport"content="width=device-width"/>  
  12.         <title>Enroll Now</title>  
  13.     </head>  
  14.     <body>  
  15. @using (Html.BeginForm())  
  16.     {  
  17.   
  18.         <p>Enter You Name : @Html.TextBoxFor(x => x.Name )</p>  
  19.         <p>Enter Your Mobile :@Html.TextBoxFor(x => x.MobileNumber )</p>  
  20.         <p>Enter Your Email : @Html.TextBoxFor(x => x.Email )</p>  
  21.         <p>  
  22.             Will You Attend : @Html.DropDownListFor(x => x.AttendOrNot, new[] {newSelectListItem() {Text = "Yes, I'll be there",Value = bool.TrueString},newSelectListItem() {Text = "No, I can't come",  
  23.                         Value = bool.FalseString}}, "Choose an option")  
  24. </p>  
  25.         <inputtype="submit"value="Submit Response"/>  
  26.     }  
  27.   
  28.     </body>  
  29. </html>  
By using the above code we are asking user to provide inputs from the user. In the last <P> we are adding a drop down for confirmation user availability.

Step 8: Now we have thank user for the input, so for the same create one more method under home controller as in the following:
  1. [HttpPost]  
  2. public ViewResult EnrollNow(Response response)  
  3. {  
  4.   
  5.    return View("Thanks", response);  
  6. }  
Right click on the same and add new strongly typed view as shown below:

Add view

Step 9: Last step is to thank user for their response. For the same add the following code on view:
  1. @model CSharpCornerDelhiInvite.Models.Response  
  2. @  
  3. {  
  4.     Layout = null;  
  5. }   
  6. < !DOCTYPE html >   
  7.   < html >   
  8.     < head >   
  9.         < meta name = "viewport" content = "width=device-width" / >   
  10.         < title > Thanks < /title>   
  11.     < /head>   
  12.     < body > < div > < h1 > Thank you, @Model.Name! < /h1>  
  13.         @if(Model.AttendOrNot == true)  
  14.         {  
  15.             @: It 's great that you'  
  16.             re coming.The drinks are already in the fridge!  
  17.         }  
  18.         else  
  19.         {  
  20.             @: Sorry to hear that you can 't make it, but thanks for letting us know.  
  21.         }   
  22.         < /div>   
  23.      < /body>   
  24.   < /html>  
Now run the application and check the output as shown below:

Enroll now

Submmit

Thank you message

We can add validations in the model as shown below:
  1. public classResponse  
  2. {  
  3.     [Required(ErrorMessage = "Please enter your name")]  
  4.     public string Name  
  5.     {  
  6.         get;  
  7.         set;  
  8.     }  
  9.     [Required(ErrorMessage = "Please enter your phone number")]  
  10.     public string MobileNumber  
  11.     {  
  12.         get;  
  13.         set;  
  14.     }  
  15.     [Required(ErrorMessage = "Please enter your email address")]  
  16.     [RegularExpression(".+\\@.+\\..+", ErrorMessage = "Please enter a valid email address")]  
  17.     public string Email  
  18.     {  
  19.         get;  
  20.         set;  
  21.     }  
  22.     [Required(ErrorMessage = "Please specify whether you'll attend or not")]  
  23.     public bool ? AttendOrNot  
  24.     {  
  25.         get;  
  26.         set;  
  27.     }  
  28. }  
So in case user will not enter details it will ask to enter as shown below:

Enroll

I am adding the entire code for reference.


Similar Articles