Dodawanie metody Create i tworzenie widoku

Autor: Scott Hanselman

Jest to samouczek dla początkujących, który przedstawia podstawy ASP.NET MVC. Utworzysz prostą aplikację internetową, która odczytuje i zapisuje z bazy danych. Odwiedź centrum szkoleniowe ASP.NET MVC , aby znaleźć inne samouczki i przykłady ASP.NET MVC.

W tej sekcji wdrożymy obsługę niezbędną do umożliwienia użytkownikom tworzenia nowych filmów w naszej bazie danych. Zrobimy to, implementując akcję /Movies/Create URL.

Implementowanie adresu URL /Movies/Create jest procesem dwuetapowym. Gdy użytkownik po raz pierwszy odwiedza adres URL /Movies/Create, chcemy wyświetlić mu formularz HTML, który może wypełnić, aby wprowadzić nowy film. Następnie, gdy użytkownik prześle formularz i opublikuje dane z powrotem na serwerze, chcemy pobrać opublikowaną zawartość i zapisać ją w naszej bazie danych.

Zaimplementujemy te dwa kroki w dwóch metodach Create() w naszej klasie MoviesController. Jedna metoda pokaże <formularz> , który użytkownik powinien wypełnić, aby utworzyć nowy film. Druga metoda będzie obsługiwać przetwarzanie opublikowanych danych, gdy użytkownik prześle <formularz> z powrotem na serwer i zapisze nowy film w naszej bazie danych.

Poniżej znajduje się kod, który dodamy do klasy MoviesController, aby zaimplementować ten kod:

public ActionResult Create()
{
    return View();
}

[HttpPost]
public ActionResult Create(Movie newMovie)
{

    if (ModelState.IsValid)
    {
        db.AddToMovies(newMovie);
        db.SaveChanges();

        return RedirectToAction("Index");
    }
    else
    {
        return View(newMovie);
    }
}

Powyższy kod zawiera cały kod, którego będziemy potrzebować w ramach naszego kontrolera.

Teraz zaimplementujmy szablon Utwórz widok, który będzie używany do wyświetlania formularza użytkownikowi. Kliknij prawym przyciskiem myszy pierwszą metodę Create i wybierz pozycję "Dodaj widok", aby utworzyć szablon widoku dla formularza Film.

Wybierzemy, że przekażemy szablon widoku "Film" jako klasę danych widoku i wskażemy, że chcemy utworzyć szkielet szablonu "Utwórz".

Po kliknięciu przycisku Dodaj zostanie utworzony szablon \Movies\Create.aspx View. Ponieważ wybraliśmy pozycję "Utwórz" z listy rozwijanej "Wyświetl zawartość", okno dialogowe Dodawanie widoku automatycznie "szkielet" zawiera część domyślnej zawartości. Tworzenie szkieletu spowodowało utworzenie formularza> HTML<, miejsce na potrzeby komunikatów o błędach weryfikacji, a ponieważ tworzenie szkieletu wie o filmach, utworzono etykietę i pola dla każdej właściwości klasy.

<% using (Html.BeginForm()) {%>
    <%: Html.ValidationSummary(true) %>

    <fieldset>
        <legend>Fields</legend>
       
        <div class="editor-label">
            <%: Html.LabelFor(model => model.Id) %>
        </div>
        <div class="editor-field">
            <%: Html.TextBoxFor(model => model.Id) %>
            <%: Html.ValidationMessageFor(model => model.Id) %>
        </div>
       
        <div class="editor-label">
            <%: Html.LabelFor(model => model.Title) %>
        </div>
        <div class="editor-field">
            <%: Html.TextBoxFor(model => model.Title) %>
            <%: Html.ValidationMessageFor(model => model.Title) %>
        </div>
       
        <div class="editor-label">
            <%: Html.LabelFor(model => model.ReleaseDate) %>
        </div>
        <div class="editor-field">
            <%: Html.TextBoxFor(model => model.ReleaseDate) %>
            <%: Html.ValidationMessageFor(model => model.ReleaseDate) %>
        </div>
       
        <div class="editor-label">
            <%: Html.LabelFor(model => model.Genre) %>
        </div>
        <div class="editor-field">
            <%: Html.TextBoxFor(model => model.Genre) %>
            <%: Html.ValidationMessageFor(model => model.Genre) %>
        </div>
       
        <div class="editor-label">
            <%: Html.LabelFor(model => model.Price) %>
        </div>
        <div class="editor-field">
            <%: Html.TextBoxFor(model => model.Price) %>
            <%: Html.ValidationMessageFor(model => model.Price) %>
        </div>
       
        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>

<% } %>

Ponieważ nasza baza danych automatycznie udostępnia identyfikator Filmu, usuńmy te pola, które odwołują się do modelu odniesienia. Identyfikator z widoku tworzenia. Usuń 7 wierszy po <legendzie>Pola</legenda> , ponieważ pokazują pole identyfikatora, którego nie chcemy.

Teraz utwórzmy nowy film i dodajmy go do bazy danych. Zrobimy to, uruchamiając ponownie aplikację i odwiedzając adres URL "/Filmy", a następnie klikając link "Utwórz", aby dodać nowy film.

Po kliknięciu przycisku Utwórz opublikujemy ponownie (za pośrednictwem protokołu HTTP POST) dane w tym formularzu do metody /Movies/Create, którą właśnie utworzyliśmy. Podobnie jak wtedy, gdy system automatycznie wziął parametr "numTimes" i "name" z adresu URL i zamapował je na parametry we wcześniejszej metodzie, system automatycznie przejmie pola formularza z postu i zamapuje je na obiekt. W takim przypadku wartości z pól w kodzie HTML, takich jak "ReleaseDate" i "Title", zostaną automatycznie wprowadzone do poprawnych właściwości nowego wystąpienia filmu.

Przyjrzyjmy się drugiej metodzie Create z naszej metody MoviesController. Zwróć uwagę, jak przyjmuje obiekt "Movie" jako argument:

[HttpPost]
public ActionResult Create(Movie newMovie)
{
    if (ModelState.IsValid)
    {
        db.AddToMovies(newMovie);
        db.SaveChanges();

        return RedirectToAction("Index");
    }
    else
    {
        return View(newMovie);
    }
}

Ten obiekt filmowy został następnie przekazany do wersji [HttpPost] metody akcji Create i zapisaliśmy go w bazie danych, a następnie przekierowano użytkownika z powrotem do metody akcji Index(), która spowoduje wyświetlenie zapisanego wyniku na liście filmów:

Nie sprawdzamy jednak, czy nasze filmy są poprawne, a baza danych nie pozwoli nam zapisać filmu bez tytułu. Byłoby miło, gdybyśmy mogli poinformować użytkownika, że zanim baza danych zgłosiła błąd. Zrobimy to dalej, dodając obsługę walidacji do naszej aplikacji.

WsteczDalej