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>

}