当我在jqgrid中选择一行并按下编辑时,我无法在模态框中看到任何数据。
如果我按空确认框中的提交按钮,我的控制器不会收到任何数据。我的jqgrid出了什么问题?
这是我的观看代码:
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Employee</title>
<script src="~/Scripts/jquery-2.1.4.js"></script>
<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/free-jqGrid/jquery.jqgrid.min.js"></script>
<script src="~/Scripts/free-jqGrid/i18n/grid.locale-en.js"></script>
<link href="~/Content/ui.jqgrid.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function () {
getAllEmployee();
});
function getAllEmployee() {
$.ajax({
type: "get",
url: "/Employee/GetAllEmployee",
datatype: "JSON",
success: function (result) {
var html = '';
$.each(result, function (index, aEmployee) {
html += '<tr><td>' + aEmployee.EmployeeId + '</td>'
html += '<td>' + aEmployee.Name + '</td>'
html += '<td>' + aEmployee.Address + '</td>'
html += '<td>' + '<a href="#" onclick="getAnEmployeeById(' + aEmployee.EmployeeId + ');" >Edit</a>' + ' | <a href="#" onclick="deleteAnEmployee(' + aEmployee.EmployeeId + ');" >Delete</a>' + '</td></tr>'
})
$('#divList tbody').html(html);
},
error: function (errorMessage) {
alert(errorMessage.responseText);
}
});
}
function getAnEmployeeById(id) {
$.ajax({
url: "/Employee/GetEmployeeById/" + id,
type: "GET",
datatype: "JSON",
success: function (result) {
$('#txtEmployeeId').val(result.EmployeeId);
$('#txtName').val(result.Name);
$('#txtAddress').val(result.Address);
},
error: function (errorMessage) {
alert(errorMessage.responseText);
}
});
}
function editAnEmployee() {
var aEmployee = {
EmployeeId: $('#txtEmployeeId').val(),
Name: $('#txtName').val(),
Address: $('#txtAddress').val()
}
$.ajax({
url: "/Employee/UpdateAnEmployee",
type: "post",
data: aEmployee,
dataType: "JSON",
success: function (result) {
getAllEmployee();
},
error: function (errorMessage) {
alert(errorMessage.responseText);
}
});
}
function saveAnEmployee() {
var aEmployee = {
Name: $('#txtName').val(),
Address: $('#txtAddress').val()
}
$.ajax({
url: "/Employee/AddAnEmployee",
type: "post",
data: aEmployee,
dataType: "JSON",
success: function (result) {
getAllEmployee();
},
error: function (errorMessage) {
alert(errorMessage.responseText);
}
});
}
function deleteAnEmployee(id) {
var confirmation = confirm('Delete ?');
if (confirmation) {
$.ajax({
url: "/Employee/DeleteAnEmployee/" + id,
type: "post",
dataType: "JSON",
success: function (result) {
getAllEmployee();
},
error: function (errorMessage) {
alert(errorMessage.responseText);
}
});
}
}
$(function () {
jQuery("#tblGrid").jqGrid({
url: '/Employee/GetAllEmployee',
datatype: 'json',
mtype: 'POST',
ajaxGridOptions: { contentType: "application/json" },
colNames: ['EmployeeId', 'Name', 'Address'],
colModel: [
{ name: 'EmployeeId', index: 'EmployeeId', width: 100, align: 'left', editable: true, edittype: 'text', editoptions: { readonly: 'true' } },
{ name: 'Name', index: 'Name', width: 300, align: 'left', editable: true, edittype: 'text' },
{ name: 'Address', index: 'Address', width: 300, align: 'left', editable: true, edittype: 'text' },
],
//jsonReader: {
// repeatitems: false,
// root: function (obj) { return obj; },
// page: function (obj) { return 1; },
// total: function (obj) { return 1; },
// records: function (obj) { return obj.length; }
//},
loadonce: true,
pager: jQuery('#divPager'),
rowNum: 5,
rowList: [5, 10, 20, 50],
sortname: 'EmployeeId',
sortorder: "asc",
viewrecords: true,
caption: 'Employee Information',
editurl: '/Employee/UpdateAnEmployee'
//edit : {
//addCaption: "Add Record",
//editCaption: "Edit Record",
//bSubmit: "Submit",
//bCancel: "Cancel",
//bClose: "Close",
//saveData: "Data has been changed! Save changes?",
//bYes : "Yes",
//bNo : "No",
//bExit: "Cancel"
//}
}).navGrid(divPager, { edit: true, add: true, del: true, refresh: true, search: true },
{ },
{ url: "/Employee/DeleteAnEmployee?id=5" },
{ },
{ },
{ }
);
});
//jQuery("#tblGrid").navGrid("#divPager", {},
//{ url: "/Employee/DeleteAnEmployee" },
//{ url: "/Employee/DeleteAnEmployee" },
//{ url: "/Employee/DeleteAnEmployee" }
//);
</script>
</head>
<body>
<div class="container">
<div id="divEntry">
<form id="formStudent">
<h4>Enter An Employee</h4>
<table class="table-bordered">
<tr>
<td colspan="2">
<div class="form-group">
<label for="txtEmployeeId">ID</label>
<input type="text" id="txtEmployeeId" placeholder="Enter Employee Id" />
</div>
</td>
</tr>
<tr>
<td>Employee Name</td>
<td><input type="text" id="txtName" /></td>
</tr>
<tr>
<td>Employee Address</td>
<td><input type="text" id="txtAddress" /></td>
</tr>
</table>
</form>
</div>
<div id="divAction">
<input type="button" id="btnLoad" class="btn-primary btn-group-lg" value="Load" onclick="return getAllEmployee();" />
<input type="button" id="btnSave" class="btn-primary btn-group-lg" value="Save" onclick="return saveAnEmployee();" />
<input type="button" id="btnEdit" class="btn-primary btn-group-lg" value="Edit" onclick="return editAnEmployee();" />
<input type="button" id="btnDelete" class="btn-primary btn-group-lg" value="Delete" onclick="return deleteAnEmployee();" />
</div>
<div id="divList">
<table class="table table-bordered">
<thead>
<tr>
<th>Employee Id</th>
<th>Employee Name</th>
<th>Employee Address</th>
<th>Action</th>
</tr>
</thead>
<tbody class="tbody"></tbody>
</table>
</div>
<div>
<table id="tblGrid"></table>
<div id="divPager">
</div>
</div>
</div>
</body>
</html>
我还附上了我的数据检索代码:
public class EmployeeDB
{
string connectionString = @"Data Source=.\SQLEXPRESS; initial catalog=TestDB; user id=sa; password=123456";
public List<Employee> GetAllEmployee()
{
List<Employee> employees = new List<Employee>();
using (SqlConnection aSqlConnection = new SqlConnection(connectionString))
{
aSqlConnection.Open();
string query = "select EmployeeId, Name, Address from Employee";
SqlCommand aSqlCommand = new SqlCommand(query, aSqlConnection);
SqlDataReader aSqlDataReader = aSqlCommand.ExecuteReader();
while (aSqlDataReader.Read())
{
Employee aEmployee = new Employee();
aEmployee.EmployeeId = Convert.ToInt32(aSqlDataReader["EmployeeId"]);
aEmployee.Name = Convert.ToString(aSqlDataReader["Name"]);
aEmployee.Address = Convert.ToString(aSqlDataReader["Address"]);
employees.Add(aEmployee);
}
}
return employees;
}
public int AddEmployee(Employee aEmployee)
{
int status = 0;
using (SqlConnection aSqlConnection = new SqlConnection(connectionString))
{
aSqlConnection.Open();
string query = "insert into Employee values ('" + aEmployee.Name + "','" + aEmployee.Address + "')";
SqlCommand aSqlCommand = new SqlCommand(query, aSqlConnection);
status = aSqlCommand.ExecuteNonQuery();
}
return status;
}
public int UpdateEmployee(Employee aEmployee)
{
int status = 0;
using (SqlConnection aSqlConnection = new SqlConnection(connectionString))
{
aSqlConnection.Open();
string query = "Update Employee Set Name = '" + aEmployee.Name + "', Address = '" + aEmployee.Address + "' where EmployeeId='" + aEmployee.EmployeeId + "'";
SqlCommand aSqlCommand = new SqlCommand(query, aSqlConnection);
status = aSqlCommand.ExecuteNonQuery();
}
return status;
}
public int DeleteEmployee(int id)
{
int status = 0;
using (SqlConnection aSqlConnection = new SqlConnection(connectionString))
{
aSqlConnection.Open();
string query = "delete from employee where EmployeeId='" + id + "'";
SqlCommand aSqlCommand = new SqlCommand(query, aSqlConnection);
status = aSqlCommand.ExecuteNonQuery();
}
return status;
}
}