jqgrid - 如何编辑行?

时间:2015-09-05 16:24:59

标签: jquery model-view-controller jqgrid

当我在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;
    }
}

0 个答案:

没有答案