blog

Home / DeveloperSection / Blogs / Creating a simple data entry application using Asp.Net MVC 4

Creating a simple data entry application using Asp.Net MVC 4

Sumit Kesarwani29949 10-Feb-2014

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 &nbsp;@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:


Creating a simple data entry application using Asp.Net MVC 4


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:


Creating a simple data entry application using Asp.Net MVC 4


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:


Creating a simple data entry application using Asp.Net MVC 4


When you click on “here” will open the “RegForm.cshtml”


Creating a simple data entry application using Asp.Net MVC 4


Creating a simple data entry application using Asp.Net MVC 4


Fill the form with appropriate values and click on submit button:


Creating a simple data entry application using Asp.Net MVC 4

 


Updated 18-Sep-2014

Leave Comment

Comments

Liked By