ASP.NET Core отправляет данные из таблицы в модальные - PullRequest
Новая
       23

ASP.NET Core отправляет данные из таблицы в модальные

0 голосов
/ 02 октября 2018

В моем приложении у меня есть таблица, где вы можете удалить строку.Когда пользователь нажимает на значок удаления, появляется модал с вопросом, действительно ли он хочет удалить строку.На кнопке для подтверждения модальности я хочу вызвать метод действия и передать ему значение строки.Но как мне получить значение из строки в модале?

Вот мой код: 

@*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] не является допустимым значением в моей ссылке на действие в моем модале.

1 Ответ

0 голосов
/ 02 октября 2018

Поскольку значение, которое следует передать действию контроллера, является динамическим, лучше всего вызывать это действие из 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
        }
    });
});

Итак, нажав на значок в строкеДля удаления учетной записи вы сначала сохраняете ее идентификатор модели в переменной JavaScript.Затем, нажав кнопку «Да» внутри модального окна, вызывается действие контроллера с идентификатором удаляемой учетной записи.

...