How to create a User Registration page using asp.net mvc

How to create a User Registration page using asp.net mvc.

In this tutorial We have learn How to create a User Registration page using asp.net mvc that will allow user register to the website in ASP.Net MVC Razor. The Registration Form will save (insert) data to database using store procedure.

User will fill up the registration form with details such as username, address,city, state, country etc. and these details will be saved in the database table.

Step 1 : First Create database table for Country,State,City like same as previous tutorial Cascading Dropdownlist using Ajax in Asp.Net Mvc with city state country

Step2 : Create database table to insert registration detail as Mentioned Pictorial

How to create a User Registration page using asp.net mvc

Step 3 : add database modal class like below

public class ModalClass
{
public int Id { get; set; }
public string CountryName { get; set; }
public string StateName { get; set; }
public string CityName { get; set; }
public string Name { get; set; }
public string Address { get; set; }

SqlConnection con = new SqlConnection(@”Data Source=(LocalDB)\v11.0;AttachDbFilename”);

public void Insert(ModalClass md)
{
con.Open();
SqlCommand cmd = new SqlCommand(“insert into tbl_All values(‘”+md.CountryName+”‘,'”+md.StateName+”‘,'”+md.CityName+”‘,'”+md.Name+”‘,'”+md.Address+”‘)”,con);
cmd.ExecuteNonQuery();
con.Close();
}
}

Step 4: Now Create controller and add action Method

public ActionResult Insert(ModalClass da)
{
da.Insert(da);
return View();
}

Step 5: Add html View for registration page

@using (Html.BeginForm())
{
@Html.ValidationSummary(true)

<fieldset>
<legend>EmployeeData</legend>
<div class=”editor-label”>
@Html.Label(“Name”)<br />
</div>
<div class=”editor-label”>
@Html.TextBox(“Name”)<br />
</div>
<div class=”editor-label”>
@Html.Label(“Address”)<br />
</div>

<div class=”editor-label”>
@Html.TextBox(“Address”)<br />
</div>

<div class=”editor-label”>
@Html.Label(“Country”)<br />
</div>

<div>
@Html.DropDownList(“Country”, ViewBag.Country as SelectList, “– Please Select a Country –“, new { style = “width:150px”, @id = “Country” })
</div>
<div class=”editor-label”>
<br />
@Html.Label(“State”)<br />
</div>
<div>
@Html.DropDownList(“State”, new SelectList(string.Empty, “Value”, “Text”), “– Please select a State –“,
new { style = “width:150px”, @class = “dropdown1″ })
</div>

<div class=”editor-label”>
<br />

@Html.Label(“City”)<br />
</div>
<div>
@Html.DropDownList(“City”, new SelectList(string.Empty, “Value”, “Text”), “– Please select a city –“,
new { style = “width:150px”, @class = “dropdown2”, @id = “City” })
</div>

<p>

<input type=”button” onclick=”ddlInsert();” value=”Submit” />
</p>
</fieldset>
}

Step 6 : Now add Jquery code to header section of page

function ddlInsert() {
var ctr = document.getElementById(‘Country’);
var Country = ctr.options[ctr.selectedIndex].text;

var stt = document.getElementById(‘State’);
var State = stt.options[stt.selectedIndex].text;

var ct = document.getElementById(‘City’);
var City = ct.options[ct.selectedIndex].text;

var Name = $(“#Name”).val();
var Address = $(“#Address”).val();
$.ajax({
url: ‘@Url.Action(“Insert”, “ABC”)’,
data: { CountryName: Country, StateName: State, CityName:City,Name:Name,Address:Address},
type: ‘POST’,
dataType: ‘json’,
success: function (data) {

}
});
}

Registration form:

How to create a User Registration page using asp.net mvc

 

SEE MORE

2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *