Tuesday, March 28, 2017

MVC Jquery

---controller---------

Elaunch_DemoEntities context = new Elaunch_DemoEntities();
        // GET: Employee
        public ActionResult Index(int id=0)
        {
            return View();
        }
        public bool submitData(EmployeeMaster obj)
        {
            try
            {
                context.EmployeeMasters.Add(obj);
                context.SaveChanges();
                return true;
            }
            catch(Exception)
            {
                return false;
            }
        }
        public JsonResult GetAll()
        {
          List<EmployeeMaster> emp = context.EmployeeMasters.ToList();
            return Json(emp, JsonRequestBehavior.AllowGet);
        }
        public JsonResult GetbyId(int id)
        {
            var emp = context.EmployeeMasters.Find(id);
            return Json(emp, JsonRequestBehavior.AllowGet);
        }
        public JsonResult Update(EmployeeMaster emp)
        {
            context.Entry(emp).State = System.Data.Entity.EntityState.Modified;
            context.SaveChanges();
            return Json(emp, JsonRequestBehavior.AllowGet);
        }
        public JsonResult Delete(int Id)
        {
            EmployeeMaster emp = context.EmployeeMasters.Find(Id);
            context.EmployeeMasters.Remove(emp);
            context.SaveChanges();
            return Json(emp, JsonRequestBehavior.AllowGet);
        }


---------Index---------------


@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.validate.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<h2>Index</h2>
<div class="container">
    <div class="form-group" hidden>
            <label for="EmployeeId">ID</label>
            <input type="text" class="form-control" id="Id" name="Id" placeholder="Id" />
        </div>
    <div class="form-group">
        <span>Name:</span>
        <input type="text" class="form-control" id="Name" name="Name" />
    </div>
    <div class="form-group">
        <span>City:</span>
        <input type="text" class="form-control" id="City" name="City" data-valmsg-for="Address" />
    </div>
    <div class="form-group">
        <span>Address:</span>
        <input type="text" id="Address" class="form-control" name="Address" data-valmsg-for="Address" />
    </div>
    <div class="form-group">
        <span>CreatedDate:</span>
        <input type="date" id="CreatedDate" class="form-control" name="CreatedDate" data-valmsg-for="Address" />
    </div>
    <div class="form-group">
        <span>Male:</span> <input checked="checked" id="Gender" name="Gender" type="radio" value="Male" />
        <span>Female:</span> <input id="Gender" name="Gender" type="radio" value="Female" />
    </div>
    <div class="form-group">
        <button type="button" class="btn btn-success" id="btnAdd" onclick="return submitData()">Add</button>
        <button type="button" class="btn btn-success" id="btnUpdate" style="display:none;" onclick="return Update();">Update</button>
    </div>
    @* <input type="button" class="btn btn-success" id="Submit" value="Submit" onclick="submitData()" />*@
</div>
<div>
    <table id="resultTable" class="table table-bordered table-hover"></table>
</div>
<script type="text/javascript">
    getData();
    function submitData() {
        var res = validate();
        if (res == false) {
            return false;
        }
        var data = {
            Id: $('#Id').val(),
            Name: $("#Name").val(),
            City: $("#City").val(),
            Address: $("#Address").val(),
            CreatedDate: $("#CreatedDate").val(),
            Gender: $("#Gender").val()
        }
        $.ajax({
            type: "POST",
            url: '@Url.Action("SubmitData", "Employee")',
            data: data,
            success: function (res) {
                if (res) {
                    getData();
                    //$("#Id").val('');
                    $("#Name").val('');
                    $("#City").val('');
                    $("#Address").val('');
                    $("#CreatedDate").val('');
                    $("#Gender").val('');
                }
            }
        });
    }
    function getData() {
        $.ajax({
            type: "GET",
            url: '@Url.Action("GetAll", "Employee")',
            success: function (result) {
                debugger
                var data = '<tr><th>Sr.no</th><th>Name</th><th>City</th><th>Address</th><th>CreatedDate</th><th>Gender</th><th></th></tr>';
                for (var i = 0; i < result.length; i++) {
                    data += '<tr><td>' + result[i].Id + '</td><td>' + result[i].Name + '</td><td>' + result[i].City + '</td><td>' + result[i].Address + '</td><td>' + ConvertDate(result[i].CreatedDate,"dd-mm-yyyy") + '</td><td>' + result[i].Gender + '</td><td><a href="#" onclick="getbyID(' + result[i].Id + ')">Edit</a> | <a href="#" onclick="Delele(' + result[i].Id + ')">Delete</a></td></tr>'
                }
                $("#resultTable").html(data)
            }
        });
    }
    function ConvertDate(data, format) {
        if (data == null) return '';
        var r = /\/Date\(([0-9]+)\)\//gi
        var matches = data.match(r);
        if (matches == null) return '';
        var result = matches.toString().substring(6, 19);
        var epochMilliseconds = result.replace(
        /^\/Date\(([0-9]+)([+-][0-9]{4})?\)\/$/,
        '$1');
        var b = new Date(parseInt(epochMilliseconds));
        var c = new Date(b.toString());
        var curr_date = c.getDate();
        var curr_month = c.getMonth() + 1;
        var curr_year = c.getFullYear();
        var curr_h = c.getHours();
        var curr_m = c.getMinutes();
        var curr_s = c.getSeconds();
        var curr_offset = c.getTimezoneOffset() / 60
        //var d = curr_month.toString() + '/' + curr_date + '/' + curr_year;
        //return d;
        return format.replace('mm', curr_month).replace('dd', curr_date).replace('yyyy', curr_year);
    }
    function getbyID(EmpID) {
        $('#Name').css('border-color', 'lightgrey');
        $('#City').css('border-color', 'lightgrey');
        $('#Address').css('border-color', 'lightgrey');
        $('#CreatedDate').css('border-color', 'lightgrey');
        $("#Gender").css('border-color', 'lightgrey');
        $.ajax({
            //url: '@Url.Action("SubmitData", "Employee")',
            url: "/Employee/getbyID/" + EmpID,
            type: "GET",
            contentType: "application/json;charset=UTF-8",
            //dataType: "json",
            success: function (result) {
                $('#Id').val(result.Id);
                $('#Name').val(result.Name);
                $('#City').val(result.City);
                $('#Address').val(result.Address);
                $('#CreatedDate').val(result.CreatedDate);
                $('#Gender').val(result.Gender);
                //$('#Submit').show();
                $('#btnUpdate').show();
                $('#btnAdd').hide();
            },
        });
        return false;
    }
    //function for updating employee's record
    function Update() {
        var res = validate();
        if (res == false) {
            return false;
        }
        var empObj = {
            Id: $('#Id').val(),
            Name: $('#Name').val(),
            City: $('#City').val(),
            Address: $('#Address').val(),
            CreatedDate: $('#CreatedDate').val(),
            Gender: $('#Gender').val()
        };
        $.ajax({
            url: "/Employee/Update",
            data: JSON.stringify(empObj),
            type: "POST",
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            success: function (result) {
                getData();
                $('#Id').val("");
                $('#Name').val("");
                $('#City').val("");
                $('#Address').val("");
                $('#CreatedDate').val("");
                $('#Gender').val("");
            }
        });
    }
    //function for deleting employee's record
    function Delele(ID) {
        var ans = confirm("Are you sure you want to delete this Record?");
        if (ans) {
            $.ajax({
                url: "/Employee/Delete/" + ID,
                type: "POST",
                contentType: "application/json;charset=UTF-8",
                dataType: "json",
                success: function (result) {
                    loadData();
                }
            });
        }
    }
    function validate() {
        var isValid = true;
        if ($('#Name').val().trim() == "") {
            $('#Name').css('border-color', 'Red');
            isValid = false;
        }
        else {
            $('#Name').css('border-color', 'lightgrey');
        }
        if ($('#City').val().trim() == "") {
            $('#City').css('border-color', 'Red');
            isValid = false;
        }
        else {
            $('#City').css('border-color', 'lightgrey');
        }
        if ($('#Address').val().trim() == "") {
            $('#Address').css('border-color', 'Red');
            isValid = false;
        }
        else {
            $('#Address').css('border-color', 'lightgrey');
        }
        if ($('#CreatedDate').val().trim() == "") {
            $('#CreatedDate').css('border-color', 'Red');
            isValid = false;
        }
        else {
            $('#CreatedDate').css('border-color', 'lightgrey');
        }
        if ($('#Gender').val().trim() == "") {
            $('#Gender').css('border-color', 'Red');
            isValid = false;
        }
        else {
            $('#Gender').css('border-color', 'lightgrey');
        }
        return isValid;
    }
</script>

No comments:

Post a Comment

Demo for Repository Pattern in ASP.Net

----------------------------------------------------------- ----------------------------------------------------------- Repository Projec...