title: Fetching the Data from db and displaying it in table format using Ajax, Jquery, Asp.Net MVC
body: <p>I have established the connection to database and i want to display all the details in the db in the view in the table format but am unable to do it as my new can any one help.</p>
  
  <pre><code> public class EmployeeModel
   {
      public int EmpId { get; set; }
  
      public string EmpName { get; set; }
  
      public int Age { get; set; }
  
      public int Salary { get; set; }
  
   }
  </code></pre>
  
  <p>Controller :</p>
  
  <pre><code> private static readonly string connectionString =    ConfigurationManager.ConnectionStrings["ConnStringDb1"].ConnectionString;
      public ActionResult GetUser()
      {
          return View();
      }
  
      public JsonResult GetAllUser(int EmpId)
      {
          List&lt;EmployeeModel&gt; employee = new List&lt;EmployeeModel&gt;();
          string query = string.Format("Select * From Employee", EmpId);
          SqlConnection connection = new SqlConnection(connectionString);
          {
              using (SqlCommand cmd = new SqlCommand(query, connection))
              {
                  connection.Open();
                  SqlDataReader reader = cmd.ExecuteReader();
  
                  while (reader.Read())
                  {
                      employee.Add(
                          new EmployeeModel
                          {
                              EmpId = int.Parse(reader["EmpId"].ToString()),
                              EmpName = reader.GetValue(0).ToString(),
                              Age = int.Parse(reader["Age"].ToString()),
                              Salary = int.Parse(reader["Salary"].ToString())
                          }
                      );
                  }
              }
              return Json(employee, JsonRequestBehavior.AllowGet);
          }
      }
  </code></pre>
  
  <p>View:</p>
  
  <pre><code>   @{
      ViewBag.Title = "Home Page";
      var EmployeeModel = (List&lt;second_day.Models.EmployeeModel&gt;)Model;
  }
  &lt;button&gt;Click me&lt;/button&gt;
  
  &lt;script src="~/Scripts/jquery-1.10.2.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          $(':button').click(function () {
              GetEmployeeUsingAjax();
          });
      });
  
      function GetEmployeeUsingAjax() {
          var EmpId = 2;
          $.ajax({
              type: 'GET',
              url: '@Url.Action("GetAllUser")',
              data: { "EmpId": EmpId},
              dataType: 'json',
              success: function (data) {
                  $.each(data, function (i, item) {
                      var rows = "&lt;tr&gt;"
                      + "&lt;td&gt;" + item.EmpID + "&lt;/td&gt;"
                      + "&lt;td&gt;" + item.EmpName + "&lt;/td&gt;"
                      + "&lt;td&gt;" + item.Age + "&lt;/td&gt;"
                      + "&lt;td&gt;" + item.Salary + "&lt;/td&gt;"
                      + "&lt;/tr&gt;";
                      $('#tblProducts tbody').append(rows);
                  });
              },
              error: function (emp) {
                  alert('error');
              }
          });
      }
  &lt;/script&gt;
  &lt;table class="tblProducts"&gt;
      &lt;thead&gt;
          &lt;tr class="headings" style="background-color:#4495d1;"&gt;
              &lt;th&gt;EmpId&lt;/th&gt;
              &lt;th&gt;EmpName&lt;/th&gt;
              &lt;th&gt;Age&lt;/th&gt;
              &lt;th&gt;Salary&lt;/th&gt;
           &lt;/tr&gt;
  &lt;/thead&gt;
      &lt;tbody &gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Can anyone suggest me solution</p>
  
  <p>Data is fetched in console but not displaying in table format</p>