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调用控制器操作。

ASP.NET Core将数据从表发送到模式

1 个答案: