Loading Likes...
Najważniejszą rzeczą, którą musimy zrobić, aby nasze żądanie typu POST zostało prawidłowo odebrane przez kontroler to dopisanie do akcji odpowiedni selektor. Selektorem odpowiedzialnym za tą metodę jest
Pokażę teraz jak to wygląda w praktyce na podstawie prostego Newslettera
W nowym projekcie ASP.net MVC tworzymy klasę Newsletter w folderze Models.
|
|
namespace nazwaprojektu.Models { public class Newsletter { public string AddressEmail { get; set; } public string Name { get; set; } public Newsletter(string AddressEmail, string Name) { this.AddressEmail = AddressEmail; this.Name = Name; } } } |
Gdy już mamy klasę możemy utworzyć dla niej formularz, który przekażemy potem do kontrolera. Wykorzystamy w tym celu HTML Helperów oraz składni Razor.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
@{ ViewBag.Title = "Home Page"; } @model _190416_formularz.Models.Newsletter <div style="margin-top: 100px;"></div> @using (@Html.BeginForm("Add", "Home", FormMethod.Post)) { <h1>Newsletter</h1> <table class="table table-striped table-bordered"> <tr> <td>@Html.LabelFor(m => m.AddressEmail, "Adres E-mail:")</td> <td>@Html.TextBoxFor(m => m.AddressEmail)</td> </tr> <tr> <td>@Html.LabelFor(m => m.Name, "Imię: ")</td> <td>@Html.TextBoxFor(m => m.Name)</td> </tr> <tr> <td colspan="2"> <input type="submit" value="Dodaj!"/> </td> </tr> </table> } |
Gdy już mamy klasę i formularz możemy przejść do zabrania się za kontroler. Tak jak wcześniej wspomniałem musimy dodać selektor do akcji. Przyjrzyj się uważnie gdyż została dodana nowa klasa HomeViewModel, o której zaraz troche dopowiem.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
using nazwaprojektu.Models; using nazwaprojektu.ViewModels; using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace nazwaprojektu.Controllers { public class HomeController : Controller { List nl = new List(); public ActionResult Index() { return View(); } [HttpPost] public ActionResult Add(HomeViewModel model) { //moglibyśmy sprawdzić w tym miejscu, czy nasz formularz spełnia wymagania naszej klasy HomeViewModel //tworzymy a następnie dodajemy nowy obiekt do listy. Newsletter newUser = new Newsletter(model.AddressEmail, model.Name); nl.Add(newUser); // pokazujemy widok o nazwie List i przekazujemy mu naszą listę, stworzymy ten widok pod koniec. return View("List", nl); } } } |
Wewnątrz głównej klasy HomeController, stworzyliśmy Listę obiektów Newsletter, żeby móc operować na niej wewnątrz innych akcji. Stworzyliśmy także akcję Add z selektorem POST, która przyjmuje nowy model, HomeViewModel. Powinno teraz nasunąć Ci się na myśl dlaczego nie mogliśmy wpisać do akcji Add(Newsletter) otóż HomeViewModel jest naszym modelem walidującym i na jego podstawie sprawdzamy czy dane z naszego formularza są prawidłowe. Gdybyśmy chcieli użyć Add(Newsletter) wyskoczyłby nam błąd. Tak wygląda nasza klasa HomeViewModel, która została stworzona w osobnym folderze ViewModels, wewnątrz głównego projektu.
|
|
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; namespace nazwaprojektu.ViewModels { public class HomeViewModel { // w tym miejscu, w prawdziwej klasie walidującej powinny się znaleźć walidatory (DataAnnotations) public string AddressEmail { get; set; } public string Name { get; set; } } } |
Zatem gdy mamy już wszystko wystarczy nam dodać widok List oraz akcję List, która go obsłuży. Zacznijmy od dopisania akcji.
|
|
public ActionResult List() { //tworzymy dwóch przykładowych subskrybentów Newsletter Jan = new Newsletter("jan@mail", "Janek"); Newsletter Tadeusz = new Newsletter("tad@mail", "Tadeusz"); //dodajemy ich nl.Add(Jan); nl.Add(Tadeusz); //zwracamy widok wraz z listą return View(nl); } |
Teraz pozostało nam jedynie stworzenie widoku dla naszej akcji List()
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
@{ ViewBag.Title = "List"; } <h1>Obecnie w newsletterze</h1> <table> @using _190416_formularz.Models @model IEnumerable<Newsletter> @foreach (dynamic user in Model) { <tr> <td>@user.Name</td> <td>@user.AddressEmail</td> </tr> } </table> |
Nasz przykładowy newsletter jest gotowy, w praktyce oczywiście powinien być lepiej walidowany, oraz po dodaniu subskrybenta, powinniśmy pokazać mu komunikat, a nie pokazywać pełną listę. 🙂 Wersja jest taka ze względu na to, że chciałem Wam pokazać jak najwięcej.
Pasjonat informatyki, bloger.
Full-stack Developer
Technologie:
- ASP.NET MVC
- ASP.NET CORE
- Angular 2+
