Google Chart In MVC using JQuery

My Model:-Name(Emp_tb)

namespace final1.Models
{
    using System;
    using System.Collections.Generic;
 
    public partial class Emp_tb
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public Nullable<int> Age { get; set; }

    }
}

Retrive Data From DataBase Using JQuery in MVC

Retrive Data From DataBase Using JQuery in MVC

My Model:- (tb_Emp)

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(selectController):-
using Final.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

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

        public JsonResult GetAllUser()
        {
            List<tb_Emp> allUser = new List<tb_Emp>();

            using (ABBCEntities1 dc = new ABBCEntities1())
            {
                allUser = dc.tb_Emp.ToList();
            }

            return new JsonResult { Data = allUser, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
        }
    }
}

My View(GetUser):-


@{
    ViewBag.Title = "Get User";
}

<h2>Retrive All Datas from DataBase</h2>
<table>

    <tr>
        <td>
            <div id="UpdatePanel">

            </div>
        </td>
    </tr>
</table>
@section Scripts{
    <script>
        $(document).ready(function () {

            // This is for Get All Data
            $(window).load(function () {

                $.ajax({
                    url: "@Url.Action("GetAllUser","select")",
                    data: "",
                    type: "GET",
                    dataType: "json",
                    success: function (data) {
                        loadData(data);
                    },
                    error: function () {
                        alert("Failed! Please try again.");
                    }
                });

            });

            // this will use for Get Data based on parameter
            $("#btnSearch").click(function () {
                $.ajax({
                    url: "@Url.Action("GetUserWithParameter", "select")",
                    data: { prefix: $('#txtSearch').val() },
                    type: "GET",
                    dataType: "json",
                    success: function (data) {
                        loadData(data);
                    },
                    error: function () {
                        alert("Failed! Please try again.");
                    }
                });
            });

            function loadData(data) {
                // Here we will format & load/show data
                var tab = $('<table class="myTable"></table>');
                var thead = $('<thead></thead>');
                thead.append('<th>ID</th>');
                thead.append('<th>Username</th>');
                thead.append('<th>Full Name</th>');


                tab.append(thead);
                $.each(data, function (i, val) {
                    // Append database data here
                    var trow = $('<tr></tr>');
                    trow.append('<td>' + val.id + '</td>');
                    trow.append('<td>' + val.EmployeeName + '</td>');
                    trow.append('<td>' + val.Age + '</td>');

                    tab.append(trow);
                });
                $("tr:odd", tab).css('background-color', '#C4C4C4');
                $("#UpdatePanel").html(tab);
            };

        });
       </script>

}

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>
}