无法使用 json 在 html 表中显示员工详细信息

Question

当用户单击视图中的按钮时，我在视图中显示员工详细信息时遇到问题。 当用户单击按钮时，将通过 JSON 调用员工详细信息（id 和姓名）并在 html 表中显示数据，为此我在 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" />       
}

这是我的控制器，这里我将返回 json 数据以查看

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

但是当我尝试访问此 url 时，我收到 http 404 resource not found 错误

http://localhost/EmpDetails

请任何人对此提出任何想法和建议，这对我来说非常有用..

非常感谢... 修改后的视图

   @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" />
}

我无法在 JavaScript 函数中点击第二个警报函数。

Answer 1

您忘记通过单击处理程序返回 false 来取消按钮的默认操作：

$('#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
});

通过不取消默认操作，当您单击提交按钮时，浏览器会提交表单并从页面重定向到表单的action，从而没有时间执行 AJAX 请求。

Answer 2

尝试将此作为您的网址@Url.Action("GetEmployees","EmpDetails")

Answer 3

试试这个

$(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;
});