选中复选框时获取表行的 id 并将其传递给事件处理程序

Question

这个问题几乎是八年前发布的（问题 16853364）。当我遵循提供的答案时，代码运行但记录 ID 的值没有传递给事件处理程序。我正在使用 ASP.NET Core 3.1 创建 Razor Page 应用程序。我假设最初的问题是基于使用 ASP.NET 2.x 和 MVC，希望这就是它不适合我的原因。

“索引”页面是已分配给用户的任务列表。我在页面上添加了一个复选框；完成后，用户选中复选框。选中该框应触发一个事件处理程序，该处理程序将更新数据库中的列 (tinyInt)。选中复选框确实会调用事件处理程序，但是在调用处理程序之前应该获取记录 ID 的代码没有获取 Id。我在 Index.cshtml 上显示记录并调用处理程序的代码是：

...
@if (Model.ScheduleOut.Count() == 0)
        {
            <p>
                This speaker has not been scheduled in the past six weeks or in the next 6 months...
            </p>
        }
        else
        {
        <table class="table table-striped border" height="40">
            <tr class="table-secondary">
                <th>
                    @Html.LabelFor(m => m.SchedOutgoingVM.ScheduleOutObj, "Id:")
                </th>
                <th>
                    @Html.LabelFor(m => m.SchedOutgoingVM.ScheduleOutObj, "DOT:")
                </th>
                <th>
                    @Html.LabelFor(m => m.SchedOutgoingVM.ScheduleOutObj, "Talk #'s:")
                </th>
                <th>
                    @Html.DisplayNameFor(m => m.SchedOutgoingVM.CongObj.CongName)
                </th>
                <th>
                    @Html.LabelFor(m => m.SchedOutgoingVM, "Date / Time:")
                </th>
                <th>
                    @Html.LabelFor(m => m.SchedOutgoingVM, "Talk Coordinator:")
                </th>
                <th>
                    @Html.LabelFor(m => m.SchedOutgoingVM, "TC's Phone:")
                </th>

                <th></th>
                <th></th>
            </tr>


            <!-- *************** display records ***************-->
            @foreach (var item in Model.ScheduleOut)
            {
            <tr id="1">
                <td class="tdBorder">
                    @Html.DisplayFor(m => item.Id)
                </td>
                <td>
                    @Html.DisplayFor(m => item.DOT)
                </td>
                <td>
                    @Html.DisplayFor(m => item.SpkTalkNum)
                </td>
                <td>
                    @Html.DisplayFor(m => item.Congregation.CongName)
                </td>
                <td>
                    @Html.DisplayFor(m => item.Congregation.MtgDay) / @Html.DisplayFor(m => item.Congregation.MtgTime)
                </td>
                <td>
                    @Html.DisplayFor(m => item.Congregation.tcFirstName) @Html.DisplayFor(m => item.Congregation.tcLastName)
                </td>
                <td>
                    @Html.DisplayFor(m => item.Congregation.tcMobilePhone)
                </td>

                <td>
                    <!-- check or uncheck checkbox based on value in database -->
                    @if (item.Accepted == null || item.Accepted == 0)
                    {
                        <!-- if false in the database-->
                        <input asp-for="AcceptedBoolean" type="checkbox" onclick="ckBox(this)" form-check-input">
                    }
                    else
                    {
                        <!-- if true in the database-->
                        <input asp-for="AcceptedBoolean" type="checkbox" checked="checked" onclick="ckBox(this)" form-check-input">
                    }
                </td>

            </tr>
            }
        </table>
        }

...

Index.cshtml.cs

    ...
 

//********** OnPost - update Accepted (tinyInt)column in database (using id) **********
        public async Task<JsonResult> OnGetUpDateAccepted(int id)
        {
            ///code to update database
                        
            return new JsonResult(id);
        }
    ...

非常感谢任何关于我做错或遗漏的建议。如果您有更好的更新数据库的方法，我也想知道。

Javascript 代码：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">  
    function ckBox(e) {
        if (e.checked) {

            ////var Testt = $(this).closest('tr').attr('Testtid');
            ////alert('Got this far...')

            var id = $(this).closest('tr').attr('id');
            console.log(Testt);    //used to capture the value at this point
            alert(id);

            $.getJSON('?handler=UpDateAccepted&Testt=' + id, (data) => {
                
            });
        } else {
            var Testt = 0
            alert('bye');

            $.getJSON('?handler=UpDateAccepted&Testt=' + id, (data) => {
                
            });

        }
    }
</script>

Answer 1

首先，你在调试代码时注释了一些js代码，导致js乱七八糟。你的示例中的变量名不正确。小心这些变量。

然后，后端参数名为 id，所以请求 url 应该是：'?handler=UpDateAccepted&id=' + id 而不是 '?handler=UpDateAccepted&Testt=' + id.

最后，你想传递记录的id，但是所有的tr都有相同的id。你需要将<tr id="1">更改为：<tr id="@item.Id">。

这是我的整个工作演示：

型号：

public class ScheduleOut
{
    public int Id { get; set; }
    public string DOT { get; set; }
    public string SpkTalkNum { get; set; }
    public int? Accepted { get; set; }
    public Congregation Congregation { get; set; }
}
public class Congregation
{
    public string CongName { get; set; }
    public string MtgTime { get; set; }
    public string tcFirstName { get; set; }
    public string tcLastName { get; set; }
    public string tcMobilePhone { get; set; }
    public int MtgDay { get; set; }
}
public class SchedOutgoingVM
{
    public ScheduleOut ScheduleOutObj { get; set; }
    public Congregation CongObj { get; set; }
}

Index.cshtml：

@page
@model IndexModel
@if (Model.ScheduleOut.Count() == 0)
{
    <p>
        This speaker has not been scheduled in the past six weeks or in the next 6 months...
    </p>
}
else
{
<table class="table table-striped border" height="40">
    <tr class="table-secondary">
        <th>
            @Html.LabelFor(m => m.SchedOutgoingVM.ScheduleOutObj, "Id:")
        </th>
        <th>
            @Html.LabelFor(m => m.SchedOutgoingVM.ScheduleOutObj, "DOT:")
        </th>
        <th>
            @Html.LabelFor(m => m.SchedOutgoingVM.ScheduleOutObj, "Talk #'s:")
        </th>
        //...
        <th>
            @Html.LabelFor(m => m.SchedOutgoingVM, "TC's Phone:")
        </th>
        <th></th>
        <th></th>
    </tr>
    @foreach (var item in Model.ScheduleOut)
    {
        <!-- *************** change here ***************-->
        <tr id="@item.Id">
            <td class="tdBorder">
                @Html.DisplayFor(m => item.Id)
            </td>
            <td>
                @Html.DisplayFor(m => item.DOT)
            </td>
            <td>
                @Html.DisplayFor(m => item.SpkTalkNum)
            </td>
            <td>
                @Html.DisplayFor(m => item.Congregation.CongName)
            </td>
            <td>
                @Html.DisplayFor(m => item.Congregation.MtgDay) / @Html.DisplayFor(m => item.Congregation.MtgTime)
            </td>
            <td>
                @Html.DisplayFor(m => item.Congregation.tcFirstName) @Html.DisplayFor(m => item.Congregation.tcLastName)
            </td>
            <td>
                @Html.DisplayFor(m => item.Congregation.tcMobilePhone)
            </td>

            <td>
                @if (item.Accepted == null || item.Accepted == 0)
                {
                    <input asp-for="AcceptedBoolean" type="checkbox" onclick="ckBox(this)" form-check-input">
                }
                else
                {
                    <input asp-for="AcceptedBoolean" type="checkbox" checked="checked" onclick="ckBox(this)" form-check-input">
                }
            </td>

        </tr>
    }
</table>
}

Index.cshtml 中的 JS：

@section Scripts
{
    <script type="text/javascript">  
    function ckBox(e) {
        if (e.checked) {
            var id = $(e).closest('tr').attr('id');
            $.getJSON('?handler=UpDateAccepted&id=' + id, (data) => {
                
            });
        } else {
            //do your stuff...

        }
    }
    </script>
}

结果：

顺便说一句，如果用户取消选中该复选框，似乎还需要更新 id。如果我猜是正确的，您需要进行如下更改：

 <script type="text/javascript">  
    function ckBox(e) {
        var id = $(e).closest('tr').attr('id');
        $.getJSON('?handler=UpDateAccepted&id=' + id, (data) => {
            
        });  
    }
</script>

Answer 2

我想你忘了定义你的 javascript 代码。你会包含ckBox(this) 的代码吗？ 谢谢！