Insert Data Using JQuery in MVC

Insert Data Using JQuery in MVC

My Model:-

namespace Final.Models
{
    using System;
    using System.Collections.Generic;
    using System.ComponentModel;
using System.ComponentModel.DataAnnotations;

    public partial class tb_Emp
    {
        [Display(Name="id")]
        public int id { get; set; }
         [Display(Name="EmployeeName")]
        public string EmployeeName { get; set; }
        [Display(Name = "Age")]
        public string Age { get; set; }

    }

}

My Controller:-

using Final.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace Final.Controllers
{
    public class InsertController : Controller
    {
     
        public ActionResult Save()
        {
            return View();
        }

        [HttpPost]
        public ActionResult Save(tb_Emp userinfo)
        {
            string message = "";
            if (ModelState.IsValid)
            {
                try
                {
                    using (ABBCEntities1 aid = new ABBCEntities1())
                    {
                        aid.tb_Emp.Add(userinfo);
                        aid.SaveChanges();
                        message = "Successfully Saved!";
                    }
                }
                catch (Exception ex) { message = "Error! Please try again."; }
            }
            else
            {
                message = "Please provide required fields value.";
            }
            if (Request.IsAjaxRequest())
            {
                return new JsonResult { Data = message, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
            }
            else
            {
                ViewBag.Message = message;
                return View(userinfo);
            }
        }
    }
}


My View:-

@model Final.Models.tb_Emp


@{
    ViewBag.Title = "Save";
}

<style>
    .success {
        border: solid 1px #0d6d00;
        width: 300px;
        padding: 5px;
        background-color: #d7ffda;
    }

    .failed {
        border: solid 1px red;
        width: 300px;
        padding: 5px;
        background-color: #ffe5e5;
    }
</style>


<h2 style="font-size:12pt; font-weight:bold;">Ajax Save - Contact Info</h2>
@using (Html.BeginForm())
{
    @Html.ValidationSummary(true);
    <fieldset style="background-color:#ffffff">
        <legend>Contact Info</legend>
        <div style="padding:20px;">
            <div class="editor-label">
               NAME
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.EmployeeName)
                @Html.ValidationMessageFor(model => model.EmployeeName)
            </div>
            <div class="editor-label">
               AGE
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Age)
                @Html.ValidationMessageFor(model => model.Age)
            </div>

            <p>
                <input type="button" value="Save" id="AjaxPost" />
            </p>
            <div id="content">

            </div>
        </div>
    </fieldset>
}
<div>
    @Html.ActionLink("Back to List","Index", "Home")
</div>



@section Scripts{
    @Scripts.Render("~/bundles/jqueryval")
    <script>

        $(document).ready(function(){
            $("#AjaxPost").click(function(){
                $("#content").html("<b>Please Wait...</b>");

                var dataObject = {
                    EmployeeName: $("#EmployeeName").val(),
                    Age: $("#Age").val()
                };
                $.ajax({
                    url: "@Url.Action("Save","Insert")",
                    type: "POST",
                    data: dataObject,
                    dataType: "json",
                    success: function (data) {
                        debugger
                        if (data.toString() == "Successfully Saved!") {
                            $("#EmployeeName").val('');
                            $("#Age").val('');
                            $("#content").html("<div class='success'>"+data+"</div>");
                        }
                        else {
                            $("#content").html("<div class='failed'>" + data + "</div>");
                        }
                    },
                    error: function () {
                        $("#content").html("<div class='failed'>Error! Please try again</div>");
                    }
                });
            })
        })
    </script>
}