piątek, 16 stycznia 2015

NancyFx Razor Wiele przycisków na jednej stronie (Multiple submit on one form)

Jeżeli zdecydujemy się porzucić stare "web.form" i w warstwie widoku przejść na syntaks Razor, to wtedy spotykamy się z problemem "wiele akcji w jednej formie". O ile podstawowa implementacja wygląda mniej więcej tak:

                <form name="xyzForm" id="xyzForm" class="xyzForm" action="/" method="post">
<input type="submit" value="Generuj raport" id="btnGenerate" class="btnGenerate" />
                </form>

Ten syntaks oznacza, że każde naciśnięcie każdego przycisku (input type="submit") wewnątrz tego form'a spowoduje wywołanie akcji kontrolera:        
        public MainModule(IDataStore dataStore)
        {
            Post["/"] = parameters =>
            {
                 return null;
            };
        }

A co jeśli chcemy, mieć kilka przycisków w jednej formie, odpowiedzialnych za kilka osobnych akcji? Z NancyFx oraz drobną pomocą Ajax'a nie stanowi to żadnego problemu:


                 <form name="xyzForm" id="xyzForm" class="xyzForm" action="/" method="post">
<input type="submit" value="Generuj raport" id="btnGenerate" class="btnGenerate" />
                    <input id="saveReportSpec" type="button" value="Zapisz ustawienia raportu dla klienta" onclick="saveReportSpecJs(); return false;" />
                </form>

        <script type="text/javascript">
            function saveReportSpecJs() {
                var $formData = $('#xyzForm').serialize();

                $.post('/Ajax/SaveReportSpec/', $formData, function (data) 
               {
              //TODO: jeżeli metoda coś zwraca, to tutaj działamy na 'data.'
                }
               );
            }

W przypadku html-a niewiele się zmieniło (dodaliśmy nowy przycisk, tym razem typu button) oraz ustawiliśmy wywoływanie javascriptu pod zdarzeniem "onClick".
Sam javascript, wywołuje nasz kontroler. Co ważne, jako parametr podajemy zserioalizowany formularz (form), dzięki któremu będziemy mogli później w osobnym kontrolerze posługiwać się danymi z formularza.
Prosty kod Modułu (kontrolera) dla tej akcji.

        public AjaxModule(IDataStore dataStore) : base("Ajax")
        {
            Post["/SaveReportSpec"] = _ =>
            {
                return null;
            }
        }

Jako parametr przekazujemy zserializowaną formę, abyśmy później mogli korzystać w kontrolerze z danych zawartych w formie, np.:

<input id="cbXYZ" name="cbXYZ" type="checkbox" />

Odczytujemy za pomocą:

            var cbXYZ= Request.Form.cbXYZ;




1 komentarz:

  1. Tutaj kolejny przykład użycia Nancy zamiast ASP http://www.applandeo.com/en/net-and-nancy-parsing-multipartform-data-requests/

    OdpowiedzUsuń