Jak przekazać ID do buttona w oknie modalnym

0

Cześć wszystkim,

Wyświetlam na stronie tablicę z danymi, w jednej z kolumn wyświetlam użytkwonikowi przyciski akcji jak np. "Usuń". Poniżej kod:

                    <td>
                        <a class="btn btn-primary"
                           asp-controller="administrator"
                           asp-action="EditCategory"
                           asp-route-id="@category.Id">
                            Edytuj
                        </a>
                        <button type="button" class="btn btn-primary buttonDelete" data-id="@category.Id">
                            Usuń
                        </button>

                    </td>

Kod okna modalnego, które wyświetlam po naciśnięciu "Usuń":

<div id="myModal" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Usuwanie kategorii</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Czy na pewno chcesz usunąć kategorię ?</p>
            </div>
            <div class="modal-footer">
                <form method="post">
                    <button id="modalDeleteButton" type="submit" class="btn btn-primary"
                            asp-controller="administrator"
                            asp-action="DeleteCategory"
                            asp-route-id="">
                        Usuń
                    </button>
                </form>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Anuluj</button>
            </div>
        </div>
    </div>
</div>

Chciałbym aby po kliknięciu w przycisk "Usuń" na oknie modalnym, usuwała wykonała się akcja DeleteCategory, która z kolei usuwa rekord o id określonym w asp-route-id więc napisałem skrypt:

<script type="text/javascript">
    $(".buttonDelete").click(function () {
        var ids = $(this).data('data-id');
        $('#myModal').modal('show');
    $("#modalDeleteButton").attr('asp-route-id', ids )
    });
</script>

Modal wyświetla się poprawnie, natomiast po kliknięciu przycisku "Usuń" na modalu - przeładowuje się strona i nic poza tym. Po przedebugowaniu okazuje się, że parametr Id to integer = 0.

0

A dlaczego nie zwrócisz wartości po kliknięciu w przycisk? Tu przykład: https://stackoverflow.com/questions/29552904/return-a-value-from-bootstraps-modal-box-yes-or-no-option a dopiero później wywołasz kasowanie.

a tu http://jsfiddle.net/k7FC2/ rozwiązanie Twojego problemu, odpowiedź z https://stackoverflow.com/questions/10626885/passing-data-to-a-bootstrap-modal

inna sprawa, że problem dotyczy js/jquery i bootstrapa

0

Kolega wyżej wskazał jak przekazać wartość do pola typu input. Problem jest nieco bardziej złożony, ponieważ ja chcę nadać wartość konkretnemu helperowi (asp-route-id), a nie przypisać wartość do labelki czy inputa. Czy wiesz jak przekazać ten id do asp-route-id danego buttona w modalu?

0
<script>
    $("#myModal").on('show.bs.modal', function (event) {
            catId = event.relatedTarget.id;
        alert("This is number " + catId);
        $('#modalDeleteButton').attr('asp-route-id', catId);
    });
</script>

catId ma prawidłową wartość, ale asp-route-id nie przyjmuje jej. Przekierowuje mnie do url https://localhost:44368/administrator/DeleteCategory zamiast https://localhost:44368/administrator/DeleteCategory/7

EDIT - ROZWIĄZANIE:

Wrzucam rozwiązanie mojego zadania. Button w tablicy zmieniłem jego kod następująco:

<button type="button" onclick="getId(@category.Id)" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
                            Usuń
                        </button>

Poniżej funkcja:

<script>
    var clickId;
    $("#myModal").on('show.bs.modal', function (event) {
        $(event.currentTarget).find('asp-route-id').val(getId);
        var btn = $(this).find('#modalDeleteButton');
        console.log(clickId)
        btn.attr('formaction', '/administrator/DeleteCategory/'+clickId);
    });

    function getId(clicked_id) {
        this.clickId = clicked_id;
     }
</script>

1 użytkowników online, w tym zalogowanych: 0, gości: 1