javascript - 更新 PartialView 只工作一次

Question

我调用 javascript 来更新记录，然后显示结果。这有效，但只有一次。第二次，我的按钮似乎不再触发了。

        $("button[name='verlengknop']").click(function () {
            var spid=$(this).attr("id");
            console.log("button pressed");
            $.ajax({
                url: "@Url.Action("Verlengen", "Uitleen")",
                type: "post",
                data: { spid:spid },
                success: function (result) {
                    $("#partial").html(result);
                }
            });
        })

第一次，console.log 显示“按下按钮”，记录被更新，PartialView 显示新值，所以我猜这部分不是它不能工作两次的原因。第二次，我不再在 console.log 中看到“按下按钮”。

控制器：

[HttpPost]
    public IActionResult Verlengen(int spid)
    {
        var entity = _context.TblUitleen.FirstOrDefault(item => item.UitleenId == spid);
        var lener = entity.lenerid;
        if (entity != null)
        {
          entity.verlengingen = 10;
          _context.TblUitleen.Update(entity);
          _context.SaveChanges();
        }

        var uit = _context.TblUitleen.Where(uit => uit.lenerid == lener
                                                   && uit.teruggebracht == false).ToList();
        var viewModel = new GezinUitleen()
        {
            Uitleningen = uit

        };
        return PartialView("LeenDetailView",viewModel);
    }

局部视图：

<h4>Uitleningen :</h4>
<table class='table-sm table-striped'>
<thead>
    <tr>
        @*<th>Uitleen ID</th>*@
        <th>Omschrijving</th>
        <th>Datum uit</th>
        <th>Datum in</th>
        <th>Verlengingen</th>
        <th></th>
        <!--kolom verl.knop -->
        <th></th>
        <!--kolom terugknop -->

    </tr>
    </thead>
    <tbody>
    @foreach (var item in Model.Uitleningen)
    {
        <tr>
            <td>@item.UitleenId</td>
            <td>@item.speelgoedomschrijving</td>
            <td>@Convert.ToString(string.Format("{0:dd/MM/yyyy}", item.datumuit))</td>
            <td>@Convert.ToString(string.Format("{0:dd/MM/yyyy}", item.datumin))</td>
            <td>@item.verlengingen</td>
            <td><button class="btn btn-info" name="verlengknop" id=@item.UitleenId>Verlengen</button> 
 </td>
            <td><button class=" btn btn-success">Teruggebracht</button></td>
        </tr>
    }
</tbody>
</table>

我在这里做错了什么？谢谢，詹姆斯

标签： javascriptasp.net-core

Answer 1

您需要添加以下代码。在您的部分观点中，因此此问题将得到解决。并且请在 document.ready 中添加点击事件

<h4>Uitleningen :</h4>
<table class='table-sm table-striped'>
<thead>
    <tr>
        @*<th>Uitleen ID</th>*@
        <th>Omschrijving</th>
        <th>Datum uit</th>
        <th>Datum in</th>
        <th>Verlengingen</th>
        <th></th>
        <!--kolom verl.knop -->
        <th></th>
        <!--kolom terugknop -->

    </tr>
    </thead>
    <tbody>
    @foreach (var item in Model.Uitleningen)
    {
        <tr>
            <td>@item.UitleenId</td>
            <td>@item.speelgoedomschrijving</td>
            <td>@Convert.ToString(string.Format("{0:dd/MM/yyyy}", item.datumuit))</td>
            <td>@Convert.ToString(string.Format("{0:dd/MM/yyyy}", item.datumin))</td>
            <td>@item.verlengingen</td>
            <td><button class="btn btn-info" name="verlengknop" id=@item.UitleenId>Verlengen</button> 
 </td>
            <td><button class=" btn btn-success">Teruggebracht</button></td>
        </tr>
    }
</tbody>
</table>
<script>
    $("button[name='verlengknop']").click(function () {
           var spid=$(this).attr("id");
           console.log("button pressed");
           $.ajax({
               url: "@Url.Action("Verlengen", "Uitleen")",
               type: "post",
               data: { spid:spid },
                    success: function (result) {
                        $("#partial").html(result);
                    }
                });
            })
</script>

或者您也可以创建如下函数：

<h4>Uitleningen :</h4>
    <table class='table-sm table-striped'>
    <thead>
        <tr>
            @*<th>Uitleen ID</th>*@
            <th>Omschrijving</th>
            <th>Datum uit</th>
            <th>Datum in</th>
            <th>Verlengingen</th>
            <th></th>
            <!--kolom verl.knop -->
            <th></th>
            <!--kolom terugknop -->

        </tr>
        </thead>
        <tbody>
        @foreach (var item in Model.Uitleningen)
        {
            <tr>
                <td>@item.UitleenId</td>
                <td>@item.speelgoedomschrijving</td>
                <td>@Convert.ToString(string.Format("{0:dd/MM/yyyy}", item.datumuit))</td>
                <td>@Convert.ToString(string.Format("{0:dd/MM/yyyy}", item.datumin))</td>
                <td>@item.verlengingen</td>
                <td><button class="btn btn-info" onclick="myclick(this)" name="verlengknop" id=@item.UitleenId>Verlengen</button> 
     </td>
                <td><button class=" btn btn-success">Teruggebracht</button></td>
            </tr>
        }
    </tbody>
    </table>


function myclick(obj){
  var spid=$(obj).attr("id");
               console.log("button pressed");
               $.ajax({
                   url: "@Url.Action("Verlengen", "Uitleen")",
                   type: "post",
                   data: { spid:spid },
                        success: function (result) {
                            $("#partial").html(result);
                        }
                    });

}