Edit View

@model MVCDemo.Models.EmployeeMaster
@{
    ViewBag.Title = "Edit";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>
    Edit</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 createuser = jQuery.noConflict();
    createuser(document).ready(function () {
        var selectedItem = createuser("#CountryId").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.');
                }
            });
            createuser("#CityId").val('@ViewBag.CityId');
            createuser("#Occupation").val('@ViewBag.Occu');
        }
        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();
                alert(days);
                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 ' + days + ' days'
                    }
                    else {
                        //alert(document.getElementById('Age').value);
                        document.getElementById('Age').value = years + ' Years ' + months + ' Month ' + days + ' days'
                    }
                }
            }
        });
    });

    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";
            }
        });
    });

    var createuser = jQuery.noConflict();
    createuser(document).ready(function () {
        var selectedItem = createuser("#Occupation").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("Edit", "Employee", FormMethod.Post, new { id = "EditEmp" }))
{
    @Html.HiddenFor(model => model.EmployeeId)
    <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 City--")
            </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)
                @* <input type="text" id="DOB" name="DOB" value='@ViewBag.DOB' onblur="getAge(this)" />*@
                <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("CountryId", ViewBag.Country as SelectList, "--Select City--")*@
                @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" />
                <a href="/Employee/ListEmployees" style = "text-decoration:none;">
                    <input type="button" value="Cancel" >
                </a>
                @*<input type="button" onclick="document.location.href('Employee/ListEmployees')" value="Cancel" />*@
            </div>
        </div>
    </div>
}