Create Registration Form in MVC4

Introduction : Here in this tutorial explain how to create Registration form using the various controll like dropdownlist ,textbox in mvc4.

Tools : Visual studio 2012-13, Sql Server Database

ScreenShot :

Step 1 : First Create database table for Country,State,City like same on previous post Like Select City state and Country

Step2 : Create database table to insert registration form as below mentioned

Step3 : add the 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 : Add controller action Method

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

Step 5:   Add html View

@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 :   Add Jquery code here to header of the 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) {

                }
            });
          }

codelearne

Create Registration Form in MVC4

3 comments