In this blog, I’m explaining how to create a simple data entry application using asp.net mvc 4.
Step 1:
First open Visual studio 2012 and create an empty asp.net mvc 4 application with razor engine.
Step 2:
Add a controller to the project named ”HomeController.cs” with below code:
using SimpleDataEntryApp.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace SimpleDataEntryApp.Controllers
{
publicclassHomeController : Controller
{
//
// GET: /Home/
publicActionResult Index()
{
int hour = DateTime.Now.Hour;
ViewBag.Time = hour < 12 ? "Good Morning!" : "Good Afternoon!";
return View();
}
}
}
Step 3:
Now we create a model class and named “Seminar.cs” and add some properties like below:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace SimpleDataEntryApp.Models
{
publicclassSeminar
{
publicstring name { get; set; }
publicstring email { get; set; }
publicstring phone { get; set; }
publicbool? willAttend { get; set; }
}
}
Step 4:
Now add a view to the project by right clicking in the Index() ActionResult in the “HomeController.cs” file and named it “Index.cshtml”.
@{
Layout = null;
}
<!DOCTYPEhtml>
<html>
<head>
<metaname="viewport"content="width=device-width"/>
<title>Index</title>
</head>
<body>
<div>
<h3>@ViewBag.Time </h3><br/>
We are having a fabulous seminar on Asp.Net MVC in your town.<br/>
Register Yourself @Html.ActionLink("here","RegForm")
</div>
</body>
</html>
I have added an ActionLink in this view to move to the next page when we click on “here”.
Step 5:
Now add a ViewResult method in the “HomeController.cs” file like below:
[HttpGet]
publicViewResult RegForm()
{
return View();
}
And also add a view to this viewresult and named it as ”RegForm” and make it a strongly-typed view like this:
And write the below code in the “RegForm.cshtml” file.
@model SimpleDataEntryApp.Models.Seminar
@{
Layout = null;
}
<!DOCTYPEhtml>
<html>
<head>
<metaname="viewport"content="width=device-width"/>
<title>RegForm</title>
</head>
<body>
@using (Html.BeginForm())
{
<p>Name : @Html.TextBoxFor(m => m.name)</p>
<p>Email : @Html.TextBoxFor(m => m.email)</p>
<p>Phone : @Html.TextBoxFor(m => m.phone)</p>
<p>
Will you attend? : @Html.DropDownListFor(m => m.willAttend, new[]{
newSelectListItem() {Text = "Yes", Value = bool.TrueString},
newSelectListItem() {Text= "No", Value= bool.FalseString},
},"Choose an option")
</p>
<inputtype="submit"value="Submit"/>
}
</body>
</html>
In this view, I have created a simple form with three textboxes and a dropdownlist and a submit button to submit the values.
Step 6:
Now we have created a form, next we need a page to display the values which user has inputted in the form, so add another viewresult to the controller that is “HomeController.cs” like this:
[HttpPost]
publicViewResult RegForm(Seminar seminarResponse)
{
return View("Thanks", seminarResponse);
}
So the whole “HomeController.cs” file look like this:
using SimpleDataEntryApp.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace SimpleDataEntryApp.Controllers
{
publicclassHomeController : Controller
{
//
// GET: /Home/
publicActionResult Index()
{
int hour = DateTime.Now.Hour;
ViewBag.Time = hour < 12 ? "Good Morning!" : "Good Afternoon!";
return View();
}
[HttpGet]
publicViewResult RegForm()
{
return View();
}
[HttpPost]
publicViewResult RegForm(Seminar seminarResponse)
{
return View("Thanks", seminarResponse);
}
}
}
Step 7:
Now add a view to the viewresult RegForm(Seminar seminarResponse) by right clicking to it named “Thanks.cshtml” and make it a strongly-typed view like this:
Now write the below code in it:
@model SimpleDataEntryApp.Models.Seminar
@{
Layout = null;
}
<!DOCTYPEhtml>
<html>
<head>
<metaname="viewport"content="width=device-width"/>
<title>Thanks</title>
</head>
<body>
<div>
<h1>Thank you, @Model.name</h1>
@if (Model.willAttend == true)
{
@: We are glad that you are attending the seminar
}
else
{
@:Sorry to hear that you are not coming.
}
</div>
</body>
</html>
Output
Now run the application:
When you click on “here” will open the “RegForm.cshtml”
Fill the form with appropriate values and click on submit button:
Leave Comment