Cannot display employee details in html table using json

Question

I had a problem with displaying information about employees when a user clicks a button on the viewing panel. when the user presses the button, the details of the employee (both id and name) will be called via JSON and display the data in the html table, for this purpose I wrote this in my view

@Scripts.Render("~/bundles/jquery") <script type="text/javascript"> $(function () { $('#submitbtnn').click(function () { var table = $('#parenttable'); var url = '/EmpDetails/GetEmployees/'; $.getJSON(url, function (data) { $.each(data, function (key, Val) { var user = '<tr><td>' + Val.EmployeeId + '<td><tr>' + '<tr><td>' + Val.EmployeeName + '<tr><td>' table.append(user); }); }); }); }); </script> @{ ViewBag.Title = "GetEmployeesByName"; } <h2>GetEmployeesByName</h2> @using (Html.BeginForm()) { <table id ="parenttable"></table> <input id="submitbtnn" type="Submit" value="Submit1" /> } 

and this is my controller, here I return json data for viewing

 namespace MvcSampleApplication.Controllers { public class EmpDetailsController : Controller { [HttpGet] public ActionResult GetEmployees() { List<EmployeeClass> employees = new List<EmployeeClass>(); EmployeeClass employee1 = new EmployeeClass { EmployeeId=1, EmployeeName = "Rams"}; EmployeeClass employee2 = new EmployeeClass { EmployeeId = 2, EmployeeName = "joseph" }; EmployeeClass employee3 = new EmployeeClass { EmployeeId = 3, EmployeeName = "matt" }; employees.Add(employee1); employees.Add(employee2); employees.Add(employee3); return Json(employees, JsonRequestBehavior.AllowGet); } } } 

but i get http 404 resource not found error when i try to access this url

 http://localhost/EmpDetails 

would anyone suggest any ideas or any suggestions on this, that would be very helpful to me.

Thanks a lot ... Changed view

  @Scripts.Render("~/bundles/jquery") <script type="text/javascript"> $(function () { $('#submitbtnn').click(function () { var table = $('#parenttable'); var url = @Url.Action("GetEmployees","EmpDetails") //alert("hi"); $.getJSON(url, function (data) { //alert("hi"); $.each(data, function (Val) { var user = '<tr><td>' + Val.EmployeeId + Val.EmployeeName + '<tr><td>' table.append(user); }); }); return false; }); }); </script> @{ ViewBag.Title = "GetEmployeesByName"; } <h2>GetEmployeesByName</h2> @using (Html.BeginForm()) { <div class="temptable"> <table id ="parenttable"></table> </div> <input id="submitbtnn" type="Submit" value="Submit1" /> } 

I cannot hit the second Alert function inside a JavaScript function.

Answer 1

You forgot to undo the default action of the button by returning false from the click handler:

 $('#submitbtnn').click(function () { var table = $('#parenttable'); var url = '/EmpDetails/GetEmployees/'; $.getJSON(url, function (data) { $.each(data, function (key, Val) { var user = '<tr><td>' + Val.EmployeeId + '<td><tr>' + '<tr><td>' + Val.EmployeeName + '<tr><td>' table.append(user); }); }); return false; // <!-- This is very important }); 

Without canceling the default action, when you click the submit button, the browser submits the form and redirects it from the page to the action form, leaving no time to complete the AJAX request.

Answer 2

Try using this as your url @Url.Action("GetEmployees","EmpDetails")

Answer 3

try it

 $(function () { $('#submitbtnn').click(function () { var table = $('#parenttable'); $.ajax({ url: 'GetEmployees', type: 'POST', data: JSON.stringify({ table: table }), dataType: 'json', contentType: 'application/json', success: function (data) { var rowcount = data.employees.length; for (var i = 0; i < rowcount; i++) { var user = '<tr><td>' + employees[i].EmployeeId + employees[i].EmployeeName + '<tr><td>' table.append(user); } }); }, error: function () { alert('fail'); } }); return false; });