ASP .NET MVC 5 - modal window

ASP .NET MVC 5 - modal window
A9
  • Rejestracja:ponad 10 lat
  • Ostatnio:około 2 lata
  • Postów:100
0

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

Kopiuj
 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.

edytowany 1x, ostatnio: amator963
Krzysztof Pe
Zbinduj dany wiersz z przyciskiem. Do przycisku otwierajacego modala przekazujesz parametr, ktory identyfikuje dane uzytkownika. https://stackoverflow.com/questions/11534788/mvc-c-sharp-modal-popup Z tym, ze aplikacje asp mvc maja ta wade, ze lepiej sprawdzaja sie kiedy po kazdym kliknieciu przeladowuja widok lub laduja inny widok.
złoty
  • Rejestracja:ponad 17 lat
  • Ostatnio:28 dni
  • Lokalizacja:Warszawa
  • Postów:108
0

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

Kopiuj
<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:

Kopiuj
@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>
}
Krzysztof Pe
Tylko wtedy musi dodac uikit
A9
Zrobiłem zgodnei z wytycznymi. Ale jeśli mam akcję Usuń (usuwająca element z listy) w modalu za pomocą@Ajax.ActionLink(...) przekierowuje mnie do metody która w ActionLink wskazuje, aktualizuje model - ale okno modalne się nie odświeża. Zauważyłem, że dopiero po przeładowaniu całej strony (odśwież na przeglądarce) odświeżają mi się dane w modalu.
A9
Do okna modalnego jest przekazywany dobry model (z listy 2 elementów po usunięciu 1 iteruje tylko raz - co jest jak najbardziej okej). Ale i tak ostatecznie w modalnym wyświetli 2 elementy :/
złoty
@amator963: pokaż więcej kodu, nie jestem w stanie wywróżyć jak to wygląda dokładnie u Ciebie
Karol Krawczyk
  • Rejestracja:około 6 lat
  • Ostatnio:ponad 4 lata
  • Lokalizacja:Warszawa, Wola
  • Postów:18
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.

A9
  • Rejestracja:ponad 10 lat
  • Ostatnio:około 2 lata
  • Postów:100
0

Przycisk wywołania okna modalnego :

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

Widok okna modalnego :

Kopiuj
<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 :

Kopiuj
 [HttpPost]
        public PartialViewResult DeleteUser(int userIdx)
        {
          //Logika usuwania
            return PartialView("Users", model);
        }
złoty
  • Rejestracja:ponad 17 lat
  • Ostatnio:28 dni
  • Lokalizacja:Warszawa
  • Postów:108
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.

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.