当用户单击 View 上的按钮时,我无法在 View 中显示员工详细信息。 当用户单击按钮时,将通过 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" />
}
这是我的 Controller ,我在这里返回 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 资源未找到错误
http://localhost/EmpDetails
任何人都可以就此提出任何想法和建议,这对我来说将非常感激..
非常感谢... 修改后的 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" />
}
我无法在 JavaScript 函数中点击第二个警报函数。
最佳答案
您忘记通过从点击处理程序返回 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 请求永远执行。
关于c# - 无法使用 json 在 View 中的 html 表中显示员工详细信息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17874121/