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


ASP.NET MVC ASP.NET MVC 
Ratings:
0 Comment(s)
 13944  View(s)
Rate this:

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

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

{

    public class HomeController : Controller

    {

        //

        // GET: /Home/

        public ActionResult 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

{

    public class Seminar

    {

        public string name { get; set; }

        public string email { get; set; }

        public string phone { get; set; }

        public bool? 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;

}

<!DOCTYPE html>

<html>

<head>

    <meta name="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]

public ViewResult 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;

}

<!DOCTYPE html>

<html>

<head>

    <meta name="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[]{

                             new SelectListItem() {Text = "Yes", Value = bool.TrueString},

                             new SelectListItem() {Text= "No", Value= bool.FalseString},

                         },"Choose an option")

        </p>

        <input type="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]

public ViewResult 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

{

    public class HomeController : Controller

    {

        //

        // GET: /Home/

        public ActionResult Index()

        {

            int hour = DateTime.Now.Hour;

            ViewBag.Time = hour < 12 ? "Good Morning!" : "Good Afternoon!";

            return View();

        }

        [HttpGet]

        public ViewResult RegForm()

        {

            return View();

        }

        [HttpPost]

        public ViewResult 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;

}

<!DOCTYPE html>

<html>

<head>

    <meta name="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:


 


Don't want to miss updates? Please click the below button!

Follow MindStick