User registration page, with a defined user MODEL (MVC )
I have worked with .Net webforms before and now working on a MVC project.
I am working on creating a user registration page. I have no idea how its MODEL should look like.
See database diagram
User registration page:
LastName
Email adress
Password
Choose your city
I think I have to do this in this task:
STEP 1 :
Populate cities dropdownList (choose your city) with data from database
STEP 2 :
Insert users email address in UserEmail table and set subcribe to 0 or 1
STEP 3 :
Save user registration data and EmailID (get from UserEmails table), CityID into Users table
Should I make a large MODEL , like this :
Public Class Registration Model
{
Get, set:
all USEREMAIL plugs ties
all Users plugs ties
all Cities plugs ties
}
How to start with this task in MVC?
(I know how to develop this in webforms , but MVC model confuses me)
You were on the right track.You're trying to create a view which let's users complete a registertion form, this view needs to use the user model and at the same type display a list of cities in a drop down which come from a different table in the database but are related to the user.
In MVC there's a concept called viewmodel, all that it is is a simple class which combines one or more models together.
Below I created a model called SiteUser and then another model called SiteUserViewModel which inherits from the user and gives us all the user properties PLUS an additional property we can use to populate the cities.So when we display the page, we will use the SiteUserViewModel but when we post to the controller to save the user in the database we will use SiteUser :
Models:
namespace MVCTutorial.Models
{
public class SiteUser
{
[Display(Name="First Name")]
public string FirstName { get; set; }
[Display(Name = "Last Name")]
public string LastName { get; set; }
[DataType(DataType.EmailAddress)]
public string EmailAddress { get; set; }
[Display(Name = "Subscribe To Newsletter?")]
public bool SubscribeToNewsletter { get; set; }
[DataType(DataType.Password)]
public string Password { get; set; }
[Display(Name="City")]
public int CityId { get; set; }
}
public class SiteUserViewModel : SiteUser
{
public List<SelectListItem> Cities { get; set; }
}
}
Controller:
public class SiteUserController : Controller
{
[HttpGet]
public ActionResult Index()
{
var model = new SiteUserViewModel();
//Replace this with logic that reads cities from the database
var city1 = new SelectListItem { Text = "Johannesburg", Value = "1" };
var city2 = new SelectListItem { Text = "Cape Town", Value = "2" };
model.Cities = new List<SelectListItem> { city1, city2 };
return View(model);
}
[HttpPost]
public ActionResult CreateUser(SiteUser user)
{
System.Diagnostics.Debugger.Break();
//Write the code to add user to the database
return View();
}
}
View:
@model MVCTutorial.Models.SiteUserViewModel
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Create User</title>
</head>
<body>
@using (Html.BeginForm("CreateUser", "SiteUser"))
{
@Html.ValidationSummary(true)
<fieldset>
<legend>Site User</legend>
<div class="editor-label">
@Html.LabelFor(model => model.FirstName)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.FirstName)
@Html.ValidationMessageFor(model => model.FirstName)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.LastName)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.LastName)
@Html.ValidationMessageFor(model => model.LastName)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.EmailAddress)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.EmailAddress)
@Html.ValidationMessageFor(model => model.EmailAddress)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.SubscribeToNewsletter)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.SubscribeToNewsletter)
@Html.ValidationMessageFor(model => model.SubscribeToNewsletter)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Password)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Password)
@Html.ValidationMessageFor(model => model.Password)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.CityId)
</div>
<div class="editor-field">
@Html.DropDownList("CityId", Model.Cities, "Please select one")
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
</body>
</html>
Result: 
