asp.net mvc Jquery从表中删除空行

时间:2017-08-17 18:27:44

标签: javascript jquery asp.net asp.net-mvc

这是我的部分视图中的代码,我使用的是BeginCollectionItem。

<tr>

@using (Html.BeginCollectionItem("QuoteLines"))
{
    <td>

        @Html.HiddenFor(m => m.QuoteID)
        @Html.HiddenFor(m => m.QuoteLineID)
    </td>
    <td class="visible-lg  col-lg-3">
        @Html.TextBoxFor(m => m.Group, htmlAttributes: new { @class = "form-control" })
        @Html.ValidationMessageFor(model => model.Group, "", new { @class = "text-danger" })
    </td>
    <td class="col-xs-9 col-sm-9 col-md-8 col-lg-5">
        @Html.TextAreaFor(m => m.Description, htmlAttributes: new { @class = "form-control" })
        @Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })
    </td>
    <td class="visible-md visible-lg col-md-2  col-lg-2">
        @Html.TextBoxFor(m => m.Quantity, htmlAttributes: new { @class = "form-control" })
        @Html.ValidationMessageFor(model => model.Quantity, "", new { @class = "text-danger" })
    </td>
    <td class="col-xs-3 col-sm-3 col-md-2 col-lg-2">
        @Html.TextBoxFor(m => m.Price, htmlAttributes: new { @class = "form-control" })
        @Html.ValidationMessageFor(model => model.Price, "", new { @class = "text-danger" })
    </td>
    <td>
        <button type="button" class="delete form-control btn-default" data-id="@model.QuoteLineID">Delete</button>
    </td>
}

重要的部分是删除按钮,它有一个由javascript引用的类来删除该行。但由于某种原因,如果行没有数据,它就不会执行代码。

<button type="button" class="delete form-control btn-default" data-id="@model.QuoteLineID">Delete</button>

Javascript代码:

<script>
var url = '@Url.Action("DeleteQuoteLine")'; // assumes its in the same controller
$('.delete').click(function () {


    if (confirm('verwijderen?')) {
        var id = $(this).data('id');
        var row = $(this).closest('tr');
        if (id == 0) { // or if(id == 0) depending if your property is nullable
            row.remove(); // the item never existed so no need to call the server
            return;
        }
        $.post(url, { ID: id }, function (response) {
            if (response) {
                row.remove(); // OK, so remove the row
            } else {
                // Oops - display and error message?
            }
        });
    }
});
</script>

1 个答案:

答案 0 :(得分:1)

你的意思是什么行没有数据?如果row没有数据,因此data-id中没有存储数字ID值,那么原因可能是帖子期望有一个有效类型的ID,但它是null,因此Action方法抛出错误(使用ASP.NET错误处理将捕获...如果您正在记录这些错误,请检查日志)。要验证这一点,请使用网络工具查看它是否向服务器发出请求,并返回错误响应。

请您发布行动方式签名吗?这有助于看到。