5

我正在研究 MVC4 并尝试使用 JQuery 和 JSON 将值表单视图传递给控制器​​。该查询正在提取网格内复选框的值。以下是代码：

<script type="text/javascript">
function DeleteCustomer() {
    var temp = "";
    var id = "";

    if (confirm("Are you sure to delete records?")) {
        $('#myGrid table tr').each(function () {
            if ($(this).find("input[id*='assignChkBx']").length > 0) {
                if ($(this).find("input[id*='assignChkBx']")[0].checked == true) {
                    temp = $(this).find("input[id*='assignChkBx']").val();
                    if (temp != "" || temp != null) {
                        id = id + " " + temp;
                        temp = "";
                    }
                } // End of Loop
            }
        }); //End of each Loop
        $.ajax({
            url: "Customer/DeleteCustomeByID",
            type: "POST",
            contentType: 'application/json; charset=utf-8',
            dataType: "json",
            data: "{'CustomerID':'" + id + "'}",
            success: function (data) {
                //alert('Records deleted');
                $('#lblMessage').html('Records Deleted');
            },
            error: function (xhr, textStatus, err) {
                alert('Error: ' + err);
                //$('#lblMessage').html(err);
            }
        });
    }
}

我的html代码如下：

<input type="button" id="btnDelete" value="Delete" title="Delete" onclick="DeleteCustomer()" style="color: Gray" />



@{
    WebGrid grid = new WebGrid(Model, rowsPerPage: 15, ajaxUpdateContainerId: "myGrid");
}
@grid.GetHtml(
    fillEmptyRows: false,
    alternatingRowStyle: "alternate-row",
    headerStyle: "grid-header",
    footerStyle: "grid-footer",
    mode: WebGridPagerModes.All,
    firstText: "<< First",
    previousText: "< Prev",
    nextText: "Next >",
    lastText: "Last >>",
    columns: new[] {
        grid.Column("", format: @<text><input class="check-box" type="checkbox" id="assignChkBx" value="@item.CustomerID" /></text>),
        grid.Column("CustomerID", "CustomerID", canSort: true),
        grid.Column("CompanyName", "Company Name", canSort: true),
        grid.Column("ContactName", "Contact Name", canSort: true),
        grid.Column("Address", "Address", canSort: false),
        grid.Column("City", "City", canSort: true),
        grid.Column("", 
                    header: "Actions",
                    format: @<text>
                    @Html.ActionLink("Edit",   "Edit",   new { id=item.CustomerID} )
                    @Html.ActionLink("Delete", "Delete", new { id=item.CustomerID} )
                    </text>
        )
})

当我单击删除按钮时，上面提到的 jquery 会将所选值带到控制器。控制器代码如下：

[HttpPost]
    public ActionResult DeleteCustomeByID(string CustomerID)
    {
        Customer customer = new Customer();
        try
        {
            if (ModelState.IsValid)
            {
                string[] values = CustomerID.Split(' ');

                for (int i = 1; i <= values.Length - 1; i++)
                {
                    if (values[i].ToString().Trim() != "" || values[i].ToString() != null)
                    {
                        customer = db.Customers.Find(values[i].ToString());
                        db.Customers.Remove(customer);
                        db.SaveChanges();
                    }
                }
                return RedirectToAction("Index");
            }
            return View(customer); // Error in Model, if any
        }
        catch (DbEntityValidationException dbEx)
        {
            foreach (var validationErrors in dbEx.EntityValidationErrors)
            {
                foreach (var validationError in validationErrors.ValidationErrors)
                {
                    Trace.TraceInformation("Class: {0}, Property: {1}, Error: {2}",
                        validationErrors.Entry.Entity.GetType().FullName,
                        validationError.PropertyName,
                        validationError.ErrorMessage);
                }
            }

            throw new Exception();  // You can also choose to handle the exception here...
        }
        catch (Exception ex)
        {
            throw new Exception(ex.Message);
        }
    }

当我单击删除按钮时，值会转到控制器并删除记录。但问题是，在将记录删除回控制器后，我收到以下错误：FireFox的“ SyntaxError: JSON.parse: unexpected character ”，Safari 的“ json parse error unrecognized token '<' ”和“错误：对象错误。 ” 我搜索了各种网站并尝试了各种解决方案。但没有任何工作。我正在使用 Northwind 数据库。

提前致谢。

帕塔

4

3 回答 3

12

根据文档，以下属性：

dataType: "json"

... 告诉 jQuery 您期望从服务器返回的数据类型。然后您的操作将返回 HTML。因此，当 jQuery 尝试解析它所期望的 JSON 时，它会运行到 HTML 中，并给你这个错误。

将操作更改为返回 a JsonResult，或将您的设置dataType为"html".

于 2013-06-06T16:30:15.047 回答
0

不确定，但我确实注意到您没有在 $.ajax 调用中传递 JSON ...尝试：

data: JSON.stringify({CustomerID: id }),
...

JSON 在成员名称周围使用双引号。

于 2013-06-06T16:30:23.767 回答
0

经过两天的搜索、测试和调试来解决这个疯狂的错误，我发现问题出在 jquery 库上。我正在开始一个新项目，所以我选择了最近的 jquery-1.10.2.js，并得到了错误。试过jquery-1.9.1.js，也报错。但是当我用 jquery-1.5.2.js 测试时，成功函数运行良好，没有抛出错误。

于 2013-09-29T23:38:32.433 回答