Add View

@model MVCDemo.Models.EmployeeMaster
@{
    ViewBag.Title = "Add";
    Layout = "~/Views/Shared/_Layout.cshtml";
  
}
<h2>
    Add</h2>
<script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.20.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
<link href="../../Scripts/Datepicker/jquery-ui.css" rel="stylesheet" type="text/css" />
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/Datepicker")
<script language="javascript" type="text/javascript">
    var createuser = jQuery.noConflict();
    createuser(function () {
        createuser("#CountryId").change(function () {
            var selectedItem = createuser(this).val();
            var ddlCities = createuser("#CityId");
            if (selectedItem.toString().length > 0 && parseInt(selectedItem) > 0) {
                createuser.ajax({
                    cache: false,
                    type: "GET",
                    url: '@Url.Action("GetCity", "Employee")',
                    async: false,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    data: { "CountryId": selectedItem },
                    success: function (data) {
                        ddlCities.html('');
                        createuser.each(data, function (id, option) {
                            ddlCities.append(createuser('<option></option>').val(option.Value).html(option.Text));
                        });
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        alert('Failed to retrieve City.');
                    }
                });
            }
            else {
                ddlCities.html('');
                ddlCities.append(createuser('<option></option>').val('').html('--Select City--'));
            }
        });
    });

    var jqdatepicker = jQuery.noConflict();

    jqdatepicker(function () {
        jqdatepicker("#DOB").datepicker
            ({
                changeMonth: true,
                changeYear: true,
                dateFormat: 'mm/dd/yy'
            });

    });
        var createuser1 = jQuery.noConflict();
        createuser1(function () {
            $('#DOB').blur(function () {
                var birthday = createuser1(this).val();
                if (birthday.value != '') {
                    var birthdayDate = new Date(birthday);
                    dateNow = new Date();

                    var years = dateNow.getFullYear() - birthdayDate.getFullYear();
                    var months = dateNow.getMonth() - birthdayDate.getMonth();
                    var days = dateNow.getDate() - birthdayDate.getDate();
                    if (isNaN(years)) {

                        document.getElementById('Age').value = '';
                        document.getElementById('lblError').innerHTML = 'Input date is incorrect!';
                        return false;

                    }
                    else {
                        document.getElementById('lblError').innerHTML = '';

                        if (months < 0 || (months == 0 && days < 0)) {

                            //alert(document.getElementById('Age'));
                            years = parseInt(years) - 1;
                            document.getElementById('Age').value = years + ' Years ' + months + ' Month'
                        }
                        else {
                            //alert(document.getElementById('Age').value);
                            document.getElementById('Age').value = years + ' Years ' + months + ' Month'
                        }
                    }
                }
            });
        });

    var createuser = jQuery.noConflict();
    createuser(function () {
        createuser("#Occupation").change(function () {
            var selectedItem = createuser(this).val();
            var div1 = document.getElementById('GrossSalary');
            if (selectedItem.toString() == "Job" || selectedItem.toString() == "Bussiness") {
                div1.style.display = "block";
            }
            else {
                div1.style.display = "none";
            }
        });
    });
</script>
@using (Html.BeginForm("Add", "Employee", FormMethod.Post, new { id = "AddEmp" }))
{
    <div>
        <div>
            <div>
                Employee Code:
            </div>
            <div>
                @Html.TextBoxFor(ModelItem => Model.EmpCode)
            </div>
            <div>
                Emp Name:
            </div>
            <div>
                @Html.TextBoxFor(ModelItem => Model.EmpName)
            </div>
            <div>
                Gender:
            </div>
            <div>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;@Html.RadioButtonFor(model => model.Gender, "Male", new { id = "male", @style = "width:0px;" })Male
                @*@Html.Label("male", "Male")*@
            </div>
            <div>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;@Html.RadioButtonFor(model => model.Gender, "Female", new { id = "female", @style = "width:0px;" })Female
                @* @Html.Label("female", "Female")*@
            </div>
            <div>
                Country:
            </div>
            <div>
                @Html.DropDownList("CountryId", ViewBag.Country as SelectList, "--Select Country--")
            </div>
            <div>
                City:
            </div>
            <div>
                @* @Html.DropDownListFor(ModelItem => Model.CityMaster.CityId, new SelectList(ViewBag.City, "CityId", "CityName", ViewBag.SelCity), new { style = "width:310px" })
                @Html.ValidationMessageFor(ModelItem => Model.CityMaster.CityId)*@
                <select id="CityId" name="CityId" style="max-width: 250px;">
                    <option value="">--Select City--</option>
                </select>
                @*<select id="CityId">
                    <option>--Select City--</option>
                </select>*@
            </div>
            <div>
                DOB
            </div>
            <div>
                @Html.EditorFor(ModelItem => Model.DOB)
                <div id="lblError">
                </div>
            </div>
            <div>
                Age
            </div>
            <div>
                @*<div id="Age"></div>*@
                @Html.TextBoxFor(ModelItem => Model.Age, new { id = "Age" })
                @*<input type="text" id="Age" name="AgeMonth" />*@
            </div>
            <div>
                Occupation
            </div>
            <div>
                @Html.DropDownList("Occupation", ViewBag.Occupation as SelectList)
            </div>
            <div id="GrossSalary">
                <div>
                    GrossSalary
                </div>
                <div>
                    @Html.TextBoxFor(ModelItem => Model.GrossSalary)
                </div>
            </div>
            <div>
                <input type="submit" value="submit" />
            </div>
        </div>
    </div>
}