MVC 4 - Creating simple Data-Entry Application
This example will show how to create simple data entry form in MVC4 asp.net.
By Mohd Zulkamal
NOTE : – If You have Found this post Helpful, I will appreciate if you can Share it on Facebook, Twitter and Other Social Media Sites. Thanks =)
Step By Step Creating Data Entry Application
- File >> New Project
- Choose ASP.NET MVC4 Web Application. (If you dont have MVC 4, Install it here)
- On Project Template, choose Empty if you want to start from zero or choose Internet Application to start developement with default template.
- Choose View engine Razor.
- Click OK button
- Create HomeController.cs under Controller Folder.
- Create GuestResponse.cs Model
- Create RsvpForm,Thanks, and Index View under View >> Home folder.
- See the file code example below.
HomeController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MyFirstMVCApp.Models;
namespace MyFirstMVCApp.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/
public ViewResult Index()
{
return View();
}
public ViewResult RsvpForm()
{
return View();
}
[HttpPost]
public ViewResult RsvpForm(GuestResponse guestResponse)
{
// TODO: Email response to the party organizer
return View("Thanks", guestResponse);
}
}
}
GuestResponse.cs
using System;
using System.Collections.Generic;
using System.Web;
namespace MyFirstMVCApp.Models
{
public class GuestResponse
{
public string Name { get; set; }
public string Email { get; set; }
public string Phone { get; set; }
public bool? WillAttend { get; set; }
}
}
Index.cshtml
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
div>
@ViewBag.Greeting World (from the view)
<p>
We're going to have an exciting party.<br />
(To do: sell it better. Add pictures or something.)
</p>
@Html.ActionLink("RSVP Now", "RsvpForm")
</div>
</body>
</html>
RsvpForm.cshtml
@model MyFirstMVCApp.Models.GuestResponse
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>RsvpForm</title>
</head>
<body>
<div>
@using (Html.BeginForm())
{
<p>
Your name: @Html.TextBoxFor(x => x.Name)
</p>
<p>
Your email: @Html.TextBoxFor(x => x.Email)</p>
<p>
Your phone: @Html.TextBoxFor(x => x.Phone)</p>
<p>
Will you attend?
@Html.DropDownListFor(x => x.WillAttend, new[] {
new SelectListItem() {
Text = "Yes, I'll be there",
Value = bool.TrueString
},
new SelectListItem() {
Text = "No, I can't come",
Value = bool.FalseString
}
},
"Choose an option")
</p>
<input type="submit" value="Submit RSVP" />
}
</div>
</body>
</html>
Thanks.cshtml
Have a try this tutorial.
@model MyFirstMVCApp.Models.GuestResponse
@{
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)
{
@:It's great that you're coming. The drinks are already in the fridge!
}
else
{
@:Sorry to hear that you can't make it, but thanks for letting us know.
}
</div>
</body>
</html>
By Mohd Zulkamal
NOTE : – If You have Found this post Helpful, I will appreciate if you can Share it on Facebook, Twitter and Other Social Media Sites. Thanks =)
