ASP.NET MVC – okna modalne z wykorzystaniem Kendo UI

2012-02-042016-01-31 TPodolakASP.NET-MVC, ModalWindow, MVC5 Comments

Ostatnimi czasy w pracy eksperymentujemy z ASP.NET MVC. Jednym z problemów na jakie natknąłem się poznając tą technologię było utworzenie okien modalnych. Po niezbyt owocnej walce z kontrolkami ze stajni Devexpressa postanowiliśmy, że skorzystamy z darmowej biblioteki Kendo UI napisanej w jQuery. Wspomnianą wcześniej bibliotekę możemy znaleźć pod adresem http://www.kendoui.com/get-kendo-ui.aspx. Aby uzyskać dostęp do plików należy zarejestrować się w systemie – oczywiście rejestracja jest darmowa. Po zassaniu wszystkich plików kopiujemy zawartość katalogu “source” do naszego projektu MVC. W moim przypadku utworzyłem katalog Kendo w katalogu Content i tam umieściłem zawartość katalogu “source”.

Mając wszystkie pliki w komplecie musimy wskazać naszej aplikacji aby zaczęła z nich korzystać. Dodajmy zatem w pliku _Layout.cshtml następujące elementy

<script src="@Url.Content("~/Content/Kendo/js/jquery.min.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/Kendo/styles/kendo.common.css")" rel="stylesheet"/>
<link href="@Url.Content("~/Content/Kendo/styles/kendo.default.css")" rel="stylesheet"/>
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/Kendo/js/jquery.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/Kendo/js/kendo.core.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/Kendo/js/kendo.data.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/Kendo/js/kendo.pager.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/Kendo/js/kendo.selectable.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/Kendo/js/kendo.draganddrop.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/Kendo/js/kendo.groupable.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/Kendo/js/kendo.grid.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/Kendo/js/kendo.fx.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/Kendo/js/kendo.resizable.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/Kendo/js/kendo.window.js")" type="text/javascript"></script>

Przejdźmy teraz do najważniejszej części, a mianowicie do tworzenia okna modalnego. Biblioteka Kendo UI udostępnia nam funkcję kendoWindow, dzięki której jesteśmy w stanie utworzyć okno modalne. Okno to jednak nie ma w sobie żadnej zawartości – nie posiada nawet przycisków typu “Zapisz” oraz “Anuluj”. Utworzenie i załadowanie zawartości okna oraz reakcja na kliknięcia w potencjalne przyciski musi zostać obsłużona przez nas. Zacznijmy zatem od utworzenia zawartości okna. Załóżmy, że okno, które za chwilę stworzymy będzie służyło do dodawania nowego produktu do bazy danych. Klasa produkt jest bardzo prostą klasą prezentującą się w następujący sposób:

public class Product
{
    public string Id { get; set; }
    public string Name { get; set; }
    public int Quantity { get; set; }
}

public class Product

{

public string Id { get; set; }

public string Name { get; set; }

public int Quantity { get; set; }

}

Stwórzmy zatem strongly-typed partial view, który będzie zawartością naszego okna modalnego. Widok ten będzie posiadał dwa textboxy do wypełniania propertisów obiektu, oraz przyciski “Zapisz” oraz “Anuluj”. Zacznijmy od dodania odpowiednich funkcji w kontrolerze. Pierwszą z nich będzie akcja AddProduct();

public PartialViewResult AddProduct()
{
    return PartialView("AddProduct", new Product());
}

public PartialViewResult AddProduct()

{

return PartialView("AddProduct", new Product());

}

W celu dodania widoku klikamy PPM na nazwę funkcji i wybieramy opcję “Add View”. W otwartym oknie zaznaczmy opcję “Create Strongly Typed View”, a w comboboxie wpisujemy “Product”. Ponadto zaznaczamy checkboxa “Create as a partial view”.

W katalogu Home pojawił się nowy plik AddProduct.cshtml. W pliku tym zdefiniujemy wygląd zawartości naszego okna modalnego. Jako, że nasze dane będą musiały zostać wysłane na serwer do zapisu, skorzystamy z funkcji pomocniczej Html.BeginForm, w której to umieścimy wszystkie potrzebne elementy do edycji produktu.

@model ModalDialogs.Models.Product
<div id="windowContent">
    @using (Html.BeginForm("AddProduct", "Home", FormMethod.Post, new { id = "fmAddProduct" }))
    {
        @Html.ValidationSummary(true)
        <div>
            @Html.Label("lblName", "Nazwa")
            @Html.TextBoxFor(val => val.Name)
            @Html.ValidationMessageFor(val => val.Name)
        </div>
        <div>
            @Html.Label("lblQuantity", "Ilość")
            @Html.TextBoxFor(val => val.Quantity)
            @Html.ValidationMessageFor(val => val.Quantity)
        </div>
        <input type="button" value="Zapisz" id="btnSave" />
        <input type="button" value="Anuluj" id="btnCancel" />
    }
</div>

@model ModalDialogs.Models.Product

@using (Html.BeginForm("AddProduct", "Home", FormMethod.Post, new { id = "fmAddProduct" }))

{

@Html.ValidationSummary(true)

<div>

@Html.Label("lblName", "Nazwa")

@Html.TextBoxFor(val => val.Name)

@Html.ValidationMessageFor(val => val.Name)

</div>

<div>

@Html.Label("lblQuantity", "Ilość")

@Html.TextBoxFor(val => val.Quantity)

@Html.ValidationMessageFor(val => val.Quantity)

</div>

}

</div>

Dodajmy teraz na naszej stronie głównej linka, który wywoła nasze okno modalne.

@Html.ActionLink("Dodaj produkt", "AddProduct", "Home", null, new { id = "addProduct" })

1	@Html.ActionLink("Dodaj produkt", "AddProduct", "Home", null, new { id = "addProduct" })

Przyszedł teraz czas na najważniejszą część wpisu, a mianowicie na wykorzystaniu jQuery oraz kendoWindow do pokazania okna edycji/dodawania produktu. Najpierw podpinamy się do zdarzenia(dodajemy handler) click utworzonego przed chwilą odnośnika. W funkcji obsługującej zdarzenie click musimy utworzyć okno,wypełnić jego zawartość oraz pokazać okno.

$(document).ready(function () {
        var $kendoWindow;
        $("#addProduct").click(function (event) {
            debugger;
            event.preventDefault(); // anulujemy domyślną akcję
            var $dialog = $('<div></div>');
            var $url = $(this).attr('href'); //wyciągamy  url-a
            $dialog.empty();
            $kendoWindow = $dialog.kendoWindow({ //tworzmy okno
                height: "200px", //o wysokosci 200px
                title: "Dodaj", // z tytulem "Dodaj"
                width: "200px", // o szerokosci 200px
                actions: ["Close"], // ktore mozna jedynie zamknac - nie mozna przesuwac, odswiezac itp
                content: $url // ktorego zawartosc pobieramy z urla przechwyconego z clica

            }).data("kendoWindow");
            $kendoWindow.center(); //centrujemy okno
            $kendoWindow.open(); // otwieramy
        });
...
...
...
}

$(document).ready(function () {

var $kendoWindow;

$("#addProduct").click(function (event) {

debugger;

event.preventDefault(); // anulujemy domyślną akcję

var $dialog = $('<div></div>');

var $url = $(this).attr('href'); //wyciągamy url-a

$dialog.empty();

$kendoWindow = $dialog.kendoWindow({ //tworzmy okno

height: "200px", //o wysokosci 200px

title: "Dodaj", // z tytulem "Dodaj"

width: "200px", // o szerokosci 200px

actions: ["Close"], // ktore mozna jedynie zamknac - nie mozna przesuwac, odswiezac itp

content: $url // ktorego zawartosc pobieramy z urla przechwyconego z clica

}).data("kendoWindow");

$kendoWindow.center(); //centrujemy okno

$kendoWindow.open(); // otwieramy

});

...

}

Korzystając z selektora jQuery znajdujemy link opisany id-kiem “addProduct”, a następnie podłączamy się do zdarzenia click. W funkcji obsługującej zdarzenie musimy najpierw zapobiec wywołaniu się domyślnej akcji wykonującej się po naciśnięciu na link. Robimy to przy pomocy funkcji prefentDefault(). W kolejnych krokach tworzymy okno modalne zgodnie ze wskazówkami znajdującymi się w dokumentacji Kendo UI http://demos.kendoui.com/web/window/index.html. Najważniejszym elementem przy tworzeniu okna jest dynamiczne załadowanie jego zawartości poprzez podanie linka do akcji w kontrolerze. Linka tego jesteśmy w stanie wyciągnąć wykorzystując kolejną użyteczną funkcję jQuery – attr(‘nazwaAtrybutu’).
Od tej chwili po naciśnięciu odnośnika “Dodaj produkt” zawsze będzie odpalane okno modalne dodawania nowego produktu. Teraz musimy jeszcze obsłużyć zdarzenia click na przyciskach “Zapisz” oraz “Anuluj”. Do funkcji przedstawionej powyżej dopisujemy następujące linijki

$("#btnSave").live("click", function (event) {
            event.preventDefault(); // anulujemy domyślną akcję
            var $url = $("#fmAddProduct").attr("action"); //wyciągamy  url-a
           // odpalamy ajaxa w celu wywołania akcji kontrolera
            $.ajax(
                {
                    url: $url,  // podajemy url z akcja kontrolera
                    type: "POST", // okreslamy metode 
                    data: $("#fmAddProduct").serialize(), // przekazujemy dane 
                    success: function (response) {       //w przypadku gdy wszystko OK
                        $("#btnSave").unbind(); // odpinamy zdarzenia
                        $("btnCancel").unbind();
                        $kendoWindow.close(); //zamykamy i 
                        $kendoWindow.destroy(); // niszczymy okno
                    },
                    error: function (response) {
                        $("#btnSave").unbind(); //odpinamy zarzenia
                        $("btnCancel").unbind();
                        $kendoWindow.content(response.responseText); //odswiezamy zawartosc okna
                    }
                });
        });

        $("#btnCancel").live("click", function (event) {
            event.preventDefault();// anulujemy domyślną akcję
            $("#btnSave").unbind(); //odpinamy zdarzenia
            $("btnCancel").unbind();
            $kendoWindow.close(); //zamykamy i
            $kendoWindow.destroy(); // niszczymy okno
        });

$("#btnSave").live("click", function (event) {

event.preventDefault(); // anulujemy domyślną akcję

var $url = $("#fmAddProduct").attr("action"); //wyciągamy url-a

// odpalamy ajaxa w celu wywołania akcji kontrolera

$.ajax(

{

url: $url, // podajemy url z akcja kontrolera

type: "POST", // okreslamy metode

data: $("#fmAddProduct").serialize(), // przekazujemy dane

success: function (response) { //w przypadku gdy wszystko OK

$("#btnSave").unbind(); // odpinamy zdarzenia

$("btnCancel").unbind();

$kendoWindow.close(); //zamykamy i

$kendoWindow.destroy(); // niszczymy okno

error: function (response) {

$("#btnSave").unbind(); //odpinamy zarzenia

$("btnCancel").unbind();

$kendoWindow.content(response.responseText); //odswiezamy zawartosc okna

}

});

$("#btnCancel").live("click", function (event) {

event.preventDefault();// anulujemy domyślną akcję

$("#btnSave").unbind(); //odpinamy zdarzenia

$("btnCancel").unbind();

$kendoWindow.close(); //zamykamy i

$kendoWindow.destroy(); // niszczymy okno

});

Tutaj sytuacja odrobinę się komplikuje gdyż musimy wysłać wprowadzone dane do kontrolera oraz obsłużyć ewentualne błędy walidacji. Zaczynamy od znalezienia przycisku opisanego id-kiem “btnSave” oraz podpięcia się do zdarzenia click. Ponownie anulujemy domyślną akcję wywołując funkcję preventDefault(). W kolejnym kroku wyciągamy url-a, który miał zostać wywołany po naciśnięciu przycisku. Robimy to, ponownie wykorzystując funkcję attr(‘nazwaAtrybutu’). Jednakże teraz wyszukujemy tego atrybutu na obiekcie o id =”fmAddProduct” (taki id nadaliśmy “formie” na której są pola edycyjne produktu).Ostatnim elementem jest wykonanie asynchronicznego zapytania AJAX. Do tego zapytania przekazujemy wcześniej uzyskany url,określamy typ zapytania jako “POST” oraz przesyłamy dane wykorzystując funkcję serialize z biblioteki jQuery. Na samym końcu musimy sprecyzować co ma się stać w przypadku gdy wszystko pójdzie ok – parametr success, a co w przypadku gdy coś będzie nie tak – parametr error. Musimy oczywiście dodać do kontrolera jeszcze jedną akcję. Tym razem będzie to również akcja AddProduct, jednakże będzie to akcja HttpPost posiadająca jeden parametr typu Product

[HttpPost]
public ActionResult AddProduct(Product product)
{
    if (ModelState.IsValid)
        return new EmptyResult();
    Response.StatusCode = (int)HttpStatusCode.BadRequest;
    return PartialView("AddProduct", product);
}

[HttpPost]

public ActionResult AddProduct(Product product)

{

if (ModelState.IsValid)

return new EmptyResult();

Response.StatusCode = (int)HttpStatusCode.BadRequest;

return PartialView("AddProduct", product);

}

Ostatnią rzeczą jaką musimy zrobić jest wyłączenie cachowania widoków, które są pokazywane w oknie modalnym – można to zrobić wykorzystując atrybut OutputCaching. W przypadku gdy nie wyłączymy cachowania, okna modalne, które raz nie przeszły walidacji nie będą mogły zostać zapisane. W celu wyłączenia cachowania dla poszczególnych widoków najpierw musimy stworzyć profil cachowania. Dodajemy taki oto wpis do pliku Web.config

<caching>
      <outputCacheSettings>
        <outputCacheProfiles>
          <add name="DisableCaching"
               duration="0"
               varyByParam="None"
               location="None" />
        </outputCacheProfiles>
      </outputCacheSettings>
</caching>

<add name="DisableCaching"

duration="0"

varyByParam="None"

location="None" />

</outputCacheProfiles>

</outputCacheSettings>

</caching>

a następnie dekorujemy atrybutem

[OutputCache(CacheProfile = "DisableCaching")]

1	[OutputCache(CacheProfile = "DisableCaching")]

akcje AddProduct() oraz AddProduct(Product product)
To by było na tyle, projekt można zassać z tego linka http://www.4shared.com/rar/F4pNi3VH/ModalDialogs.html

MVVM i okna modalne

2011-11-302016-01-31 TPodolakModalWindow, MVVM

Często podczas użytkowania programów zachodzi konieczność pokazania dodatkowego okna, służącego do interakcji z użytkownikiem. Najczęściej okno takie należy pokazać w określonym przypadku. Jak już wcześniej zostało wspomniane cała logika powinna być umieszczona w ViewMoedlu, zatem nasuwa się pytanie, w jaki sposób z ViewModelu pokazać okno modalne – przecież ViewModel nie powinien mieć żadnych informacji o widoku. Rozwiązanie tego problemu polega na oddelegowaniu pokazywania widoków lub MessageBox-ów do wyspecjalizowanych klas tzw. serwisów. Ponadto w przypadku gdy chcemy pokazywać proste komunikaty możemy również skorzystać z Interaction/Interactivity oraz klasy Prisma InteractionRequest.

1. InteractionRequest

Jak już wcześniej wspomniano klasa InteractionRequest odpowiedzialna jest za pokazywanie komunikatów użytkownikowi – koordynuje ona działanie pomiędzy ViewModelem a widokiem. W celu skorzystania z klasy InteractionRequest w ViewModelu tworzymy publiczną właściwość udostpęniającą obiekt typu InteractionRequest na zewnątrz

public InteractionRequest<Confirmation> Request { get; set; }
Request = new InteractionRequest<Notification>();

1 2	public InteractionRequest<Confirmation> Request { get; set; } Request = new InteractionRequest<Notification>();

Jak widać za generyczny typ T została podstawiona klasa Notification. Parametr T może przyjmować klasy dziedziczące po klasie Notification. Domyślnie w Prismie są dwie takie klasy:

Notification – wspomniana już wcześniej, służy do powiadomienia użytkownika o jakimś zdarzeniu
Confirmation – również służy powiadominiu użytkownika o jakiś zdarzeniu, ale zwraca ona reakcję użytkownika (czy potwierdził daną akcję czy nie – coś jak MessageBox YesNo)

W celu wywołania okienka należy odpalić funkcję Raise na przykład w taki sposób:

Request.Raise(new Notification { Content = "Info dla użytkownika", Title = "sth" }, confirmation => AfterMessageAction());

1	Request.Raise(new Notification { Content = "Info dla użytkownika", Title = "sth" }, confirmation => AfterMessageAction());

Funkcja Raise przyjmuje jeden lub dwa parametry. Przedstawy bardziej zaawansowaną wersję tej funkcji – tą z dwoma parametrami. W pierwszym parametrze podajemy obiekt typu Notification, w którym przekazujemy informacje do przekazania użytkownikowi (Content) oraz tytuł okna (Title). Drugim parametrem jest delegat Action , który określa co mamy zrobić po zamknięciu okna przez użytkownika.
Ostatnią rzeczą jaką musimy zrobić, żeby wykorzystać NotificationRequest jest zdefiniowanie triggera w widoku, który będzie reagował na odpalenie funkcji Raise. Robimy to w następujący sposób:

definiujemy w XAML-u alias do namespaca interactivity

XHTML

xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"

1

xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"

tworzymy InteractionRequestTrigger

<i:Interaction.Triggers>
      <prism:InteractionRequestTrigger SourceObject="{Binding Request}">
          <prism:PopupChildWindowAction></prism:PopupChildWindowAction>
      </prism:InteractionRequestTrigger>
</i:Interaction.Triggers>

<i:Interaction.Triggers>

<prism:InteractionRequestTrigger SourceObject="{Binding Request}">

<prism:PopupChildWindowAction></prism:PopupChildWindowAction>

</prism:InteractionRequestTrigger>

</i:Interaction.Triggers>

2. MessageBoxService

Alternatywą dla InteractionRequest jest stworzenie własnej klasy, do której zostałyby oddelegowane wszystkie prośby o pokazania MessageBoxa. Przykładowa implementacja takiego serwisu może wyglądać w następujący sposób. Po pierwsze stwórzmy interfejs z funkcjami potrzebnymi do pokazania MessageBoxa

public interface IMessageBoxService
{      
    MessageBoxResult ShowMessageBox (string info, string caption,MessageBoxButton buttons);      
}

public interface IMessageBoxService

{

MessageBoxResult ShowMessageBox (string info, string caption,MessageBoxButton buttons);

}

Następnie zaimplementujmy ten interfejs w klasie MessageBoxService – właśnie do tej klasy będą oddelegowywane wszystkie prośby o pokazanie MessageBoxa

public class MessageBoxService : IMessageBoxService
{
    public MessageBoxResult ShowMessageBox(string info, string caption, MessageBoxButton buttons)
    {
        return MessageBox.Show(info, caption, buttons);
    }
}

public class MessageBoxService : IMessageBoxService

{

public MessageBoxResult ShowMessageBox(string info, string caption, MessageBoxButton buttons)

{

return MessageBox.Show(info, caption, buttons);

}

Taki serwis musimy następnie przekazać do każdego ViewModelu , w którym będzie potrzeba pokazania MessageBoxa. Jako, że ręczne przekazywanie tego obiektu może być nużące, możemy skorzystać z dobrodziejstw Inversion of Control. Ja skorzystałem z kontenera z Unity. Po pierwsze musimy zarejestrować nasz typ w kontenerze

_container.RegisterType<IMessageBoxService, MessageBoxService>();

1	_container.RegisterType<IMessageBoxService, MessageBoxService>();

następnie MessageBoxService może zostać wstrzyknięty do każdego ViewModelu przy np. przy pomocy wstrzykiwania właściwości.

[Dependency]
public IMessageBoxService MessageBoxService
{
  get { return  messageBoxService; }
  set { messageBoxService = value; }
}

[Dependency]

public IMessageBoxService MessageBoxService

{

get { return messageBoxService; }

set { messageBoxService = value; }

}

Oczywiście żeby nasza właściwość została wstrzyknięta, nasz ViewModel musi zostać stworzony przy użycia kontenera IO
Zauważmy, że właściwość MessageBoxService nie jest konkretnym typem, lecz interfejsem. Dzięki takiemu podejściu nasza aplikacja wciąż jest w łatwy sposób testowalna oraz ViewModel nie ma nic wspólnego z klasami widoku.

3. ModalWindowService

Do pokazywania widoków(jako okien) z poziomu ViewModelu posłużmy się podobnym mechanizmem jak w przypadku pokazywania MessageBox-ów. Zasada działania klasy, która stworzymy będzie taka sama, jednakże będziemy musieli odrobinę poszerzyć jej funkcjonalność. Po pierwsze tak jak poprzednio stwórzmy odpowiedni interfejs – IModalWindowService.
UWAGA
Przykład ModalWindowServicu zostanie zaprezentowany dla Silverlight-a, gdyż okna modalne w silerlighcie to tak naprawdę okna semi-modalne. Główny wątek się nie zatrzymuje, jednakże użytkownik nie ma możliwości interakcji z oknami będącymi pod aktualnie widocznym oknem.

public interface IModalDialogService
{
    void ShowDialog<TViewModel>(IModalView<TViewModel> view,Action<TViewModel> CloseAction) where TViewModel : ViewModelBase;       
}

public interface IModalDialogService

{

void ShowDialog<TViewModel>(IModalView<TViewModel> view,Action<TViewModel> CloseAction) where TViewModel : ViewModelBase;

}

Zauważmy, że funkcja ShowDialog w parametrze nie przyjmuje konkretnego widoku, lecz interfejs, który każde okno modalne powinno implementować – IModalView. Interfejs ten może wyglądać w następujący sposób:

public interface IModalView<TViewModel> where TViewModel : ViewModelBase
{
    /// 
    /// ViewModel odpowiedzialny za dane okno
    /// 
    TViewModel ViewModel { get; set; }
    /// 
    /// DialogResult po zamknieciu okna
    /// 
    bool? DialogResult { get; set; }
    /// 
    /// zamkniecie okna
    /// 
    void Close();
    /// 
    /// Pokazanie okna
    /// 
    void Show();
    /// 
    /// Zdarzenie wywoływane w momencie zamkniecia okna modalnego
    /// 
    event EventHandler Closed;
    /// 
    /// Zdarzenie wywoływane w chwli zamykania widoku 
    /// 
    event EventHandler<CancelEventArgs> Closing;
}

public interface IModalView<TViewModel> where TViewModel : ViewModelBase

{

///

/// ViewModel odpowiedzialny za dane okno

///

TViewModel ViewModel { get; set; }

///

/// DialogResult po zamknieciu okna

///

bool? DialogResult { get; set; }

///

/// zamkniecie okna

///

void Close();

///

/// Pokazanie okna

///

void Show();

///

/// Zdarzenie wywoływane w momencie zamkniecia okna modalnego

///

event EventHandler Closed;

///

/// Zdarzenie wywoływane w chwli zamykania widoku

///

event EventHandler<CancelEventArgs> Closing;

}

Jako, że okna modalne w Silverlighcie są tak naprawdę oknami semi-modalnymi (patrz wytłumaczenie w sekcji UWAGA) musimy wiedzieć kiedy dane okno zostanie zamknięte. Dlatego, też interfejs ten zawiera zdarzenie

event EventHandler Closed;

1	event EventHandler Closed;

ponadto wypadałoby sprawdzić czy dane wpisane w oknie są poprawne, dlatego też dodano zdarzenie

event EventHandler<CancelEventArgs> Closing;

1	event EventHandler<CancelEventArgs> Closing;

w przypadku gdy dane wpisane w oknie nie będą poprawne, nasz ModalDialogService zapobiegnie zamknięciu okna. Ostatecznie nasza klasa ModalDialogService może wyglądać w następujący sposób:

public class ModalDialogService : IModalDialogService
{
    private EventHandler<CancelEventArgs> ClosingEventHandler;
    private EventHandler CloseEventHandler;
    public void ShowDialog<TViewModel>(IModalView<TViewModel> view, Action<TViewModel> CloseAction) where TViewModel : ViewModelBase
    {
        view.Closing += ClosingEventHandler = (sender, args) =>
        {
            if (view.DialogResult.HasValue && view.DialogResult.Value)
            {
                if (!(args.Cancel = !view.ViewModel.Validate())) // jezeli mozna zamknac okno to odczepiamy handler
                    view.Closing -= ClosingEventHandler;
            }
        };
        if (CloseAction != null)
        {
            view.Closed += CloseEventHandler = (sender, args) =>
                {
                    CloseAction(view.ViewModel);
                    view.Closed -= CloseEventHandler;
                };
        }
        view.Show();
    }
}

public class ModalDialogService : IModalDialogService

{

private EventHandler<CancelEventArgs> ClosingEventHandler;

private EventHandler CloseEventHandler;

public void ShowDialog<TViewModel>(IModalView<TViewModel> view, Action<TViewModel> CloseAction) where TViewModel : ViewModelBase

{

view.Closing += ClosingEventHandler = (sender, args) =>

{

if (view.DialogResult.HasValue && view.DialogResult.Value)

{

if (!(args.Cancel = !view.ViewModel.Validate())) // jezeli mozna zamknac okno to odczepiamy handler

view.Closing -= ClosingEventHandler;

}

};

if (CloseAction != null)

{

view.Closed += CloseEventHandler = (sender, args) =>

{

CloseAction(view.ViewModel);

view.Closed -= CloseEventHandler;

};

}

view.Show();

}

Nasz serwis podobnie jak w przypadku MessageBoxServicu rejestrujemy w kontenerze, a następnie wstrzykujemy go do ViewModelu

_container.RegisterType<IModalDialogService, ModalDialogService>();
[Dependency]
public IMessageBoxService MessageBoxService
{
 get { return  messageBoxService; }
 set { messageBoxService = value; }
}

_container.RegisterType<IModalDialogService, ModalDialogService>();

[Dependency]

public IMessageBoxService MessageBoxService

{

get { return messageBoxService; }

set { messageBoxService = value; }

}

Pozostaje nam jedynie kwestia wyjaśnienia w jaki sposób wywołać nasze okno. Nie powinniśmy tworzyć okna w ViewModelu, gdyż łamie to zasadę MVVM-a. Dlatego też po raz kolejny skorzystamy z kontenera IoC. W kontenerze IoC rejestrujemy sobie nasz widok

_container.RegisterType<IModalView<AddPersonViewModel>,AddPersonView>()

1	_container.RegisterType<IModalView<AddPersonViewModel>,AddPersonView>()

jako, że ViewModel jest wstrzykiwany do View poprzez Dependency Injection należy również w kontenerze zarejestrować odpowiedni typ ViewModelu – czyli w tym przypadku AddPersonViewModel

_container.RegisterType<AddPersonView>()

1	_container.RegisterType<AddPersonView>()

Mając już zarejestrowane w kontenerze wszystkie niezbędne typu możemy wywołać okno z ViewModelu w następujący sposób:

ModalDialogService.ShowDialog<EditAllPlayersViewModel>(_container.Resolve<IModalView<AddPersonViewModel>>(), model => {//tutaj jakas logika });

1	ModalDialogService.ShowDialog<EditAllPlayersViewModel>(_container.Resolve<IModalView<AddPersonViewModel>>(), model => {//tutaj jakas logika });

Obiekt widoku otrzymujemy z kontenera IoC wykorzystując funkcję Resolve, w miejsce LambdaExpression wstawiamy nasze wyrażenie w którym określamy co zrobimy po poprawnym zamknięciu okna. Zauważmy, że ViewModel nie ma żadnych informacji o widoku – kontener nie zwraca nam konkretnego typu lecz interfejs. Dzięki takiemu podejściu nasza aplikacja może być w łatwy sposób testowalna.

.NET BLOG

.NET, C# blog

ModalWindow

ASP.NET MVC – okna modalne z wykorzystaniem Kendo UI

MVVM i okna modalne

1. InteractionRequest

2. MessageBoxService

3. ModalWindowService