ASP .NET MVC 5 - modal window

0

Hej, mam pytanie, przyjmijmy, że na ekranie wyświetlam tabelę z danymi. Dane to lista obiektów klasy np:

 public class User
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Email { get; set; }

    }

Przykładowo przygotowałem listę kilku takich obiektów - klasa / obiekty mają charakter obrazowy (by w prosty sposób pokazać problem).
Do każdego wiersza mam kolumnę Akcje która zawiera akcję "Dodatkowe informację". Po kliknięciu w w/w akcję ma otworzyć się okno modalne (link : https://getuikit.com/docs/modal). Problem polega na tym, że nie wiem w jaki sposób wywoływać akcję 'Dodatkowe informacje' ale dla danego użytkownika. Czyli by dla 1wszego użytkownika po kliknięciu akcji 'Dodatkowe informacje' pokazać dane tylko tego użytkownika i analogicznie do pozostałych. Po prostu nie wiem w jaki sposób przekazać do okna modalnego informacje / parametr dla którego użytkownika mają zostać wyświetlone dane w oknie modalnym (by nie mieszały się)

Z góry dzięki za wszystkie odpowiedzi.

0

Modal, który ma zostać otworzony jest rozpoznawany po polu id. Wartość tego pola podajesz w atrybucie uk-toggle buttona:

<button uk-toggle="target: #my-id" type="button"></button>

Wystarczy, że w ten atrybut wstawisz Id osoby wyświetlanej w tabeli, i to samo id nadasz modalowi, np:

@foreach (var user in Model.Users)
{
<button uk-toggle="target: #@(user.Id)" type="button"></button>

<!-- This is the modal -->
<div id="@(user.Id)" uk-modal>
    <div class="uk-modal-dialog uk-modal-body">
        <h2 class="uk-modal-title"></h2>
        <button class="uk-modal-close" type="button"></button>
    </div>
</div>
}
0

Możesz przypisać ID użytkownika do buttona, którego kliknięcie wywoła Ajaxem akcję kontrolera, która zwróci Jsona z danymi/partial view do wyświetlenia w modalu.

0

Przycisk wywołania okna modalnego :

<button uk-toggle="target: #users@(Model.Users.IndexOf(Model.Users[i]))" type="button"><i class="tm-btnIcon i-link"></i></button>

Widok okna modalnego :

<div id="userModalWindow">

    @if (@Model != null)
    {
        for (int i = 0; i < Model.Users.Count; i++)
        {
            <div id="users@(Model.Users.IndexOf(Model.Users[i]))" uk-modal>
                <div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical">
                    <button class="uk-modal-close-default" type="button" uk-close></button>

                    <table class="uk-table">
                        <tr>
                            <th>Imie</th>
                            <th>Nazwisko</th>
                            <th>Email</th>
                        </tr>
                        <tr>
                            <td>@Model.Users[i].FirstName</td>
                            <td>@Model.Users[i].LastName</td>
                            <td>
                                @Ajax.ActionLink(" ", "DeleteUser",
                                        new { userIdx = Model.Users.IndexOf(Model.Users[i] },
                                        new AjaxOptions
                                        {
                                            UpdateTargetId = "userModalWindow",
                                            InsertionMode = InsertionMode.InsertAfter,
                                            HttpMethod = "POST"
                                        }, new { @class = "tm-btnIcon i-bin", @uk_tooltip = "Usuń" })

                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        }

    }

</div>

Akcja w kontrolerze :

 [HttpPost]
        public PartialViewResult DeleteUser(int userIdx)
        {
          //Logika usuwania
            return PartialView("Users", model);
        }
0

Zakładam, że PartialView("Users", model); zwraca Ci Partial View, który zawiera kod html modala. Czy w takim razie w AjaxOptions dla kliknięcia przycisku usuń nie powinieneś ustawić InsertionMode = InsertionMode.Replace? To powinno podmienić kod html modala, w efekcie użytkownik usunięty nie będzie wyświetlony.

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