Ссылка на действие MVC и модальная отправка начальной загрузки

Я разрабатываю веб-приложение MVC 5. В одном из моих представлений Razor у меня есть таблица, которая выводит несколько строк данных. Рядом с каждой строкой данных есть кнопка Удалить. Когда пользователь нажимает кнопку удаления, я хочу получить всплывающее окно Bootstrap Modal и попросить пользователя подтвердить свое удаление.

@foreach (var item in Model.Data) {
<tr>
 <td>...</td>
 <td>@Html.ActionLink("Delete", "Delete", new { id = item.ID }, new { @class = "btn btn-danger btn-xs", data_toggle = "modal", data_target = "#myModal" })</td>
</tr>
}

Как бы то ни было, когда пользователь нажимает кнопку Удалить, модальное окно появляется нормально, но я не могу получить идентификатор в параметре Actionlink для перехода к кнопке Подтвердить в моем Модальном окне, чтобы он затем был отправлен на удаление действие в моем контроллере.

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
             <h4 class="modal-title" id="myModalLabel">Delete Nomination</h4>
         </div>
         <div class="modal-body">
           Are you sure you wish to delete this nomination?
         </div>
         <div class="modal-footer">
           <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
           <button type="button" id="mySubmit" class="btn btn-primary">Confirm</button>
         </div>
       </div>
      </div>
</div>

Кто-нибудь может помочь?

Спасибо.


twitter-bootstrap asp.net-mvc bootstrap-modal
person tcode    schedule 23.05.2014    source источник
comment
Назначьте событие щелчка для вашей модальной кнопки sumbit, которая создает обратный вызов ajax на ваш контроллер и просто сохраняет ваш идентификатор в скрытом поле. Я могу привести вам пример, если он вам нужен   -  person heymega    schedule 23.05.2014
comment
Разве это не должно быть новым {id = itemin.ID} вместо item.ID? Поскольку вы объявили имя переменной для itemin   -  person brothers28    schedule 23.05.2014
comment
@heymega Спасибо за ответ. Отлично подойдет пример или фрагмент кода. Я не уверен, как поместить идентификатор параметра ActionLink в скрытое поле?   -  person tcode    schedule 23.05.2014
comment
@heymega, пожалуйста, пример   -  person Tinaira    schedule 11.07.2016

Ответы (2)


arrow_upward
7
arrow_downward 

<script type="text/javascript">

    //Everytime we press delete in the table row
    $('.delete').click(function(e) {
        e.preventDefault();

        //Update the item to delete id so our model knows which one to delete
        var id = $(this).data('id');
        $('#item-to-delete').val(id);

    });


    //Everytime we press sumbit on the modal form...
    $('#mySubmit').click(function() {

        //Get the id to delete from the hidden field
        var id = $('#item-to-delete').val();


        //Call our delete actionresult and pass over this id
        $.post(@Url.Action("Delete", "Delete"), { id : id } , function (data) {

            alert("Deleted");

        });


    });

</script>

и ваш html ...

@Html.Hidden("item-to-delete", "", new { @id = "item-to-delete"})
@foreach (var item in Model.Data) {
<tr>
    <td>...</td>

    <td><a href="" class="btn btn-danger btn-xs delete" data-toggle= "modal" data-target="#myModal" data-id="@item.id">Delete</a></td>

</tr>
}

Я предполагаю, что действие вашего контроллера выглядит примерно так ...

public ActionResult Delete(Guid id)
{


}
person heymega    schedule 23.05.2014
comment
Отличный ответ. Даже если ваш код неверен на 100%, я все равно смогу заставить его работать здесь. Спасибо еще раз. - person tcode; 23.05.2014
comment
не могу получить идентификатор из # удаляемого элемента - person Vasil Valchev; 05.08.2015
comment
в документации по начальной загрузке говорится, что мы можем либо использовать javascript, либо атрибуты данных для их архивации. Итак, как мы можем сделать это с использованием атрибутов данных без javascript? - person Arianit; 11.07.2016
comment
@tgriffiths, расскажите, пожалуйста, как вам это удалось? - person Arianit; 11.07.2016
comment
Как я могу добавить html.AntiforgeryToken к ссылкам привязки или где-нибудь в JS? - person Suhani; 19.08.2019

arrow_upward
0
arrow_downward

Вам нужно поставить null после второго Delete, тогда он должен работать, но у вас все равно будет проблема, потому что то, что он попытается сделать, - это открыть страницу внутри вашего модального окна, лучший способ добиться того, что вы хотите сделать, - это выполните вызов ajax на сервер и в случае успеха верните данные в этот div, который находится вокруг вашего модального

person Clarence Wilson    schedule 07.09.2017
comment
Это не ответ, это комментарий. Комментарии, опубликованные в качестве ответа, могут быть удалены. Для получения дополнительной информации проверьте эту ссылку - person vivekkupadhyay; 08.09.2017