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

削除ボタンをクリックすると、値がコントローラーに送られ、レコードが削除されます。しかし、問題は、コントローラーに戻ったときにレコードを削除した後、次のエラーが発生することです:「SyntaxError: JSON.parse:予期しない文字」(FireFox の場合)、「json parse error unrecognized token '< '」(Safari の場合)、および「エラー: object error.」 いろいろなサイトを検索して、いろいろな解決策を試しています。しかし、何も機能していません。Northwind db を使用しています。

前もって感謝します。

パルサ

4

3 に答える 3

12

docsによると、次のプロパティ:

dataType: "json"

...サーバーから返されると予想されるデータのタイプをjQueryに伝えます。次に、アクションは HTML を返します。そのため、jQuery が想定している JSON を解析しようとすると、HTML が実行され、このエラーが発生します。

を返すようにアクションを変更するか、をJsonResultに設定dataTypeします"html"。

于 2013-06-06T16:30:15.047 に答える
0

確かではありませんが、 $.ajax 呼び出しで JSON を渡していないことに気付きました...試してください:

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

JSON では、メンバー名を二重引用符で囲みます。

于 2013-06-06T16:30:23.767 に答える