ASP.NET Core將數據從表發送到模式

Question

在我的應用程序中，我有一個表，您可以在其中刪除行。 當用戶單擊刪除圖標時，會彈出一個模態，提示他是否確實要刪除該行。 在確認模式的按鈕上，我想調用一個動作方法並隨其傳遞行的值。 但是，如何從模態內的行中獲取值呢？

這是我的代碼：

@*Account table*@
<table id="account_table" class="table table-striped table-bordered">
<thead>
    <tr>
        <td>Id</td>
        <td>Email</td>
        <td>Name</td>
        <td>Phone Number</td>
        <td></td>
    </tr>
</thead>
@foreach (DataTable dt in Model.Tables)
{
    if (dt.TableName.Equals("account"))
    {
        foreach (DataRow dr in dt.Rows)
        {
            <tr>
                <td>@dr[0]</td>
                <td>@dr[1]</td>
                <td>@dr[2]</td>
                <td>@dr[3]</td>
                <td class="text-center">
                     <span class="glyphicon glyphicon-trash" data-toggle="modal" data-target="#confirmationAccountModal"></span>
                </td>
            </tr>
        }
    }
}

@*Confirmation Account Modal*@
<div class="modal fade" id="confirmationAccountModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header bg-danger">
            <h5 class="modal-title" id="exampleModalLabel" style="float: left;">DELETING ACCOUNT</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="float: right;">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            Are you sure you want to delete this account?
            <hr />
            <button type="button" class="btn btn-default" style="float: right;" data-dismiss="modal">Close</button>
            @Html.ActionLink("DELETE", "DeleteAccountAsync", "Admin", new { accountId = dr[0] }, new { @class = "btn btn-primary", style = "float: right; width: auto; margin-right: 5px;" })
            <div class="clearfix"></div>
        </div>
    </div>
</div>

dr [0]在模態內的actionlink中不是有效值。

Answer 1

因為應該傳遞給控制器​​動作的值是動態的，所以最好從JavaScript調用此動作，並且可以使用jQuery使其更容易。

HTML表格：

<tr>
  <td>@dr[0]</td>
  <td>@dr[1]</td>
  <td>@dr[2]</td>
  <td>@dr[3]</td>
  <td class="text-center">
    <span id="delete-account-btn" account-id="@dr[what_ever_is_the_id]" class="glyphicon glyphicon-trash" data-toggle="modal" data-target="#confirmationAccountModal"></span>
  </td>
</tr>

模式：

<div class="modal-body">
  <p>Are you sure you want to delete this account?</p>
  <hr />
  <button type="button" class="btn btn-default" style="float: right;" data-dismiss="modal">Close</button>
  <button id="btn-yes" type="button" class="btn btn-primary" style = "float: right; width: auto; margin-right: 5px;">Yes</button>
  <div class="clearfix"></div>
</div>

JavaScript的：

var delAccountId;

$(document).delegate('#delete-account-btn',
'click',
function (e) {
  delAccountId = $(this).attr('account-id');
});

$(document).delegate('#btn-yes',
'click',
function (e) {
    var data = {
      accountId : delAccountId
    };
    $.ajax({
        url: '/controller/action',
        type: 'POST',
        data: data,
        success: function (returnvalue) {
           //what you want on success
        },
        error: function (error) {
            //what you want on error
        }
    });
});

因此，通過單擊要刪除的帳戶行中的圖標，您首先將其模型ID存儲在JavaScript變量中。 然后，通過單擊模式內的是按鈕，將使用要刪除的帳戶ID調用控制器操作。