introduction to mvc 4 06. action methods, edit view, and a search feature
DESCRIPTION
Introduction to MVC 4 06. Action Methods, Edit View, and a Search Feature. NTPCUG Dr. Tom Perkins. The Edit Link. Run the application Append /Movies to the URL (browse to the Movies controller) Hover over the Edit link Examine the generated URL. Hover. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Introduction to MVC 4 06. Action Methods, Edit View, and a Search Feature](https://reader036.vdocuments.net/reader036/viewer/2022062501/56815c5e550346895dca6325/html5/thumbnails/1.jpg)
Introduction to MVC 406. Action Methods, Edit View, and a Search
Feature
NTPCUGDr. Tom Perkins
![Page 2: Introduction to MVC 4 06. Action Methods, Edit View, and a Search Feature](https://reader036.vdocuments.net/reader036/viewer/2022062501/56815c5e550346895dca6325/html5/thumbnails/2.jpg)
The Edit Link
• Run the application• Append /Movies to the URL (browse to the
Movies controller)• Hover over the Edit link• Examine the generated URL
![Page 3: Introduction to MVC 4 06. Action Methods, Edit View, and a Search Feature](https://reader036.vdocuments.net/reader036/viewer/2022062501/56815c5e550346895dca6325/html5/thumbnails/3.jpg)
The Edit link was generated by the Html.ActionLink method in the Views\Movies\Index.cshtml view:
@Html.ActionLink("Edit", "Edit", new { id=item.ID })
Hover
![Page 4: Introduction to MVC 4 06. Action Methods, Edit View, and a Search Feature](https://reader036.vdocuments.net/reader036/viewer/2022062501/56815c5e550346895dca6325/html5/thumbnails/4.jpg)
The ActionLink HtmlHelper
• Generates a link to an action method on a controller
• Arguments:– 1) Text to render (Edit Me)– 2) Name of action method in controller (Edit)– 3) anonymous object route data (ID=4)
![Page 5: Introduction to MVC 4 06. Action Methods, Edit View, and a Search Feature](https://reader036.vdocuments.net/reader036/viewer/2022062501/56815c5e550346895dca6325/html5/thumbnails/5.jpg)
Alternative: Pass Parameters Using Query String URL of: http://localhost:xxxxx/Movies/Edit?ID=4
Request sent to
Controller: MoviesAction Method: EditParameter ID: 4
![Page 6: Introduction to MVC 4 06. Action Methods, Edit View, and a Search Feature](https://reader036.vdocuments.net/reader036/viewer/2022062501/56815c5e550346895dca6325/html5/thumbnails/6.jpg)
2 Edit Actions in the Movies Controller
//// GET: /Movies/Edit/5
public ActionResult Edit(int id = 0){ Movie movie = db.Movies.Find(id); if (movie == null) { return HttpNotFound(); } return View(movie);}
//// POST: /Movies/Edit/5
[HttpPost]public ActionResult Edit(Movie movie){ if (ModelState.IsValid) { db.Entry(movie).State = EntityState.Modified; db.SaveChanges(); return RedirectToAction("Index"); } return View(movie);}
HttpPost Attribute
Invoked ONLY for POST requests
Default: Implied
[HttpGet] attribute
Invoked for GET requests
![Page 7: Introduction to MVC 4 06. Action Methods, Edit View, and a Search Feature](https://reader036.vdocuments.net/reader036/viewer/2022062501/56815c5e550346895dca6325/html5/thumbnails/7.jpg)
The HTTPGet Edit Method1. movie ID paramter input (default = 0)2. Entity Framework Find used to look up the movie3. If movie cant be found, return HttpNotFound()4. The Model movie object is passed to the view
When the Edit View was created, the system scanned the model and generated the markup to edit the fields.
//// GET: /Movies/Edit/5
public ActionResult Edit(int id = 0){ Movie movie = db.Movies.Find(id); if (movie == null) { return HttpNotFound(); } return View(movie);}
![Page 8: Introduction to MVC 4 06. Action Methods, Edit View, and a Search Feature](https://reader036.vdocuments.net/reader036/viewer/2022062501/56815c5e550346895dca6325/html5/thumbnails/8.jpg)
The Generated Edit View (Part 1)@model MvcMovie.Models.Movie
@{ ViewBag.Title = "Edit";}
<h2>Edit</h2>
The View expects that the Model it receives will be of type Movie
![Page 9: Introduction to MVC 4 06. Action Methods, Edit View, and a Search Feature](https://reader036.vdocuments.net/reader036/viewer/2022062501/56815c5e550346895dca6325/html5/thumbnails/9.jpg)
The Generated Edit View (Part 2)@using (Html.BeginForm()) { @Html.ValidationSummary(true)
<fieldset> <legend>Movie</legend>
@Html.HiddenFor(model => model.ID)
<div class="editor-label"> @Html.LabelFor(model => model.Title) </div> <div class="editor-field"> @Html.EditorFor(model => model.Title) @Html.ValidationMessageFor(model => model.Title) </div>
…LabelFor displays the name of the fieldHtmlEditorFor renders an <input> statementValidationMessageFor displays validation messages associated with field
![Page 10: Introduction to MVC 4 06. Action Methods, Edit View, and a Search Feature](https://reader036.vdocuments.net/reader036/viewer/2022062501/56815c5e550346895dca6325/html5/thumbnails/10.jpg)
Run the Application
• Navigate to /Movies URL• Click an Edit link• View the source for the page• Examine the HTML for the Form element• Note: Html <input> elements are in a <form>
element• Form action attribute is set to post• When Edit button is clicked, data will be posted to
the server
![Page 11: Introduction to MVC 4 06. Action Methods, Edit View, and a Search Feature](https://reader036.vdocuments.net/reader036/viewer/2022062501/56815c5e550346895dca6325/html5/thumbnails/11.jpg)
Server actions when the Save button is clicked and the data is posted:
• The values from the Form are transformed into a Movie object by the ASP MVC model binder.
• The Movie object is passed to the Edit action in the Movies controller.
• The ModelState.IsValid method determines whether or not the data submitted in the form is OK, the data is saved in the db MovieDBContext instance.
• The movie data is saved to the database .
• The user is redirected to the Index action, which displays the data with changes.
• If form data is invalid, data is re-displayed with error messages created by Html.ValidationMessageFor helpers.
[HttpPost] public ActionResult Edit(Movie movie) { if (ModelState.IsValid) { db.Entry(movie).State = EntityState.Modified; db.SaveChanges(); return RedirectToAction("Index"); } return View(movie); }
![Page 12: Introduction to MVC 4 06. Action Methods, Edit View, and a Search Feature](https://reader036.vdocuments.net/reader036/viewer/2022062501/56815c5e550346895dca6325/html5/thumbnails/12.jpg)
Posting Edited Form Data
Form Edited Data ModelState.IsValid method
Valid data
Data saved to database
Data sent to Index action, data (including changes) is
displayed
Invalid data sent back to form with error messages and form is redisplayed.
![Page 13: Introduction to MVC 4 06. Action Methods, Edit View, and a Search Feature](https://reader036.vdocuments.net/reader036/viewer/2022062501/56815c5e550346895dca6325/html5/thumbnails/13.jpg)
Validation error messages
![Page 14: Introduction to MVC 4 06. Action Methods, Edit View, and a Search Feature](https://reader036.vdocuments.net/reader036/viewer/2022062501/56815c5e550346895dca6325/html5/thumbnails/14.jpg)
Add a Search Method and View
• Objective: allow the user to search for movies by genre or name
• Add a SearchIndex action to the controllerSearchAction
method generates Html form for user to enter genre or name
Get Search Values
Search Database
Display Results
User submits search criteria
![Page 15: Introduction to MVC 4 06. Action Methods, Edit View, and a Search Feature](https://reader036.vdocuments.net/reader036/viewer/2022062501/56815c5e550346895dca6325/html5/thumbnails/15.jpg)
Add a SearchIndex method to the MoviesController class
• s => s.Title is a Lambda expression
• Used in LINQ queries• LINQ queries not
executed when defined or modified (deferred)
• Executed when value is used or in ToList()
• Execution takes place in View
public ActionResult SearchIndex(string searchString) { var movies = from m in db.Movies select m; if (!String.IsNullOrEmpty(searchString)) { movies = movies.Where(s => s.Title.Contains(searchString)); } return View(movies); }
![Page 16: Introduction to MVC 4 06. Action Methods, Edit View, and a Search Feature](https://reader036.vdocuments.net/reader036/viewer/2022062501/56815c5e550346895dca6325/html5/thumbnails/16.jpg)
Display the Search form for the User
• Create a SearchIndex View:• Right click inside the SearchIndex Method• In the AddView dialog box:– Pass a Movie object to the view– Choose List in the Scaffold Template– Click Add
![Page 17: Introduction to MVC 4 06. Action Methods, Edit View, and a Search Feature](https://reader036.vdocuments.net/reader036/viewer/2022062501/56815c5e550346895dca6325/html5/thumbnails/17.jpg)
![Page 18: Introduction to MVC 4 06. Action Methods, Edit View, and a Search Feature](https://reader036.vdocuments.net/reader036/viewer/2022062501/56815c5e550346895dca6325/html5/thumbnails/18.jpg)
The Create View @model IEnumerable<MvcMovie.Models.Movie> @{ ViewBag.Title = "SearchIndex"; } <h2>SearchIndex</h2> <p> @Html.ActionLink("Create New", "Create") </p> <table> <tr> <th> Title </th> <th> ReleaseDate </th> <th> Genre </th> <th> Price </th> <th></th> </tr>
@foreach (var item in Model) { <tr> <td> @Html.DisplayFor(modelItem => item.Title) </td> <td> @Html.DisplayFor(modelItem => item.ReleaseDate) </td> <td> @Html.DisplayFor(modelItem => item.Genre) </td> <td> @Html.DisplayFor(modelItem => item.Price) </td> <td> @Html.ActionLink("Edit", "Edit", new { id=item.ID }) | @Html.ActionLink("Details", "Details", new { id=item.ID }) | @Html.ActionLink("Delete", "Delete", new { id=item.ID }) </td> </tr> } </table>
![Page 19: Introduction to MVC 4 06. Action Methods, Edit View, and a Search Feature](https://reader036.vdocuments.net/reader036/viewer/2022062501/56815c5e550346895dca6325/html5/thumbnails/19.jpg)
Run the App
• Navigate using /Movies/SearchIndex?searchString=ghost
![Page 20: Introduction to MVC 4 06. Action Methods, Edit View, and a Search Feature](https://reader036.vdocuments.net/reader036/viewer/2022062501/56815c5e550346895dca6325/html5/thumbnails/20.jpg)
![Page 21: Introduction to MVC 4 06. Action Methods, Edit View, and a Search Feature](https://reader036.vdocuments.net/reader036/viewer/2022062501/56815c5e550346895dca6325/html5/thumbnails/21.jpg)
Add a filter <form>@model IEnumerable<MvcMovie.Models.Movie> @{ ViewBag.Title = "SearchIndex"; } <h2>SearchIndex</h2> <p> @Html.ActionLink("Create New", "Create")
</p>
@using (Html.BeginForm()){ <p> Title: @Html.TextBox("SearchString") <br /> <input type="submit" value="Filter" /></p> }
![Page 22: Introduction to MVC 4 06. Action Methods, Edit View, and a Search Feature](https://reader036.vdocuments.net/reader036/viewer/2022062501/56815c5e550346895dca6325/html5/thumbnails/22.jpg)
![Page 23: Introduction to MVC 4 06. Action Methods, Edit View, and a Search Feature](https://reader036.vdocuments.net/reader036/viewer/2022062501/56815c5e550346895dca6325/html5/thumbnails/23.jpg)
FINIS