As the last part of sportsstore, your main task is to allow administrators to update their products. In this chapter, you will learn the following points:
§ 6. 1 adding Catalog Management
According to the common software practice, the data management method is to list and edit the data, so that users can conveniently add, delete, modify, and query data ,:
§ 6. 1.1 creating admincontroller: a place for the crud features
Let's startSportsstoreImplement a simple crud user interface and createAdmincontrollerController
Namespace sportsstore. webui. controllers {public class admincontroller: controller {private iproductsrepository productsrepository; Public admincontroller (incluproductsrepository) {This. productsrepository = productsrepository ;}}}
§ 6. 1.2 rendering a grid of products in the repository
In order to achieve the effect, we need to add an action method to list all products. According to the ASP. net mvc convention, we call it index.
Public actionresult index () {return view (productsrepository. Products. tolist ());}
Implementing the List View
Before adding a view to this action, create a master page for the management block. In the/views/shared folder, right-click to create the MVC 2 view master page, which is called Admin. master.
<% @ Master language = "C #" inherits = "system. Web. MVC. viewmasterpage" %> <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML xmlns = "http://www.w3.org/1999/xhtml"> Body, TD {font-family: segoe UI, verdana} H1 {padding :. 5em; padding-top: 0; font-weight: bold; font-size: 1.5em; border-bottom: 2px solid gray;} Div # Content {padding :. 9em;} table. grid TD, table. grid Th {border-bottom: 1px dotted gray; text-align: Left;} table. grid {border-collapse: collapse; width: 100%;} table. grid th. numericcol, table. grid TD. numericcol {text-align: Right; padding-Right: 1em;} Div. message {Background: Gray; color: White; padding :. 2em; margin-top :. 25em ;}. field-Validation-error {color: red; display: block ;}. field-Validation-valid {display: none ;}. input-Validation-error {border: 1px solid red; Background-color: # ffeeee ;}. validation-Summary-errors {font-weight: bold; color: red ;}. validation-Summary-valid {display: none ;}
Next, we should create the view. Note that when selecting the master page, we should select Admin. Master instead of the previous site. master.
Tip: When you select View content, vs sets the default viewdata class to ienumerable <the class you selected>, that is, you do not need to enter ienumerable <...>
After adding the file, we will find that there are many redundant files generated.Code, Let's clear it:
<% @ Page Language = "C #" masterpagefile = "~ /Views/shared/admin. master "inherits =" viewpage <ienumerable <sportsstore. domain. entities. product >>>" %> <asp: Content ID = "content1" contentplaceholderid = "titlecontent" runat = "server"> admin: All products </ASP: content> <asp: content ID = "content2" contentplaceholderid = "maincontent" runat = "server">
Run it now, and enter http: // localhost: Port/admin/index in the address bar.
§ 6. 1.3 building a product Editor
Next, we will do the "Create" and "Update" functions, so that we need to display a view and process the information submitted by the user. we will create a method to process the [get] request and the [Post] request respectively to process the information submitted by the form.
The Edit () method is to get the requested item and pass it to other views in the form of a model. We want to add the following method to admincontroller:
Public viewresult edit (INT productid) {var Product = productsrepository. Products. First (x => X. productid = productid); Return view (product );}
Creating a product editor UI
Now, we need to create a view for the edit activity.
This will generate a lot of useless code, and we will clean it up again.
<% @ Page title = "" Language = "C #" masterpagefile = "~ /Views/shared/admin. master "inherits =" system. web. MVC. viewpage <sportsstore. domain. entities. product> "%> <asp: Content ID =" content1 "contentplaceholderid =" titlecontent "runat =" server "> admin: Edit <% = model. name %> </ASP: content> <asp: Content ID = "content2" contentplaceholderid = "maincontent" runat = "server">
Here, we use HTML. editorformodel () to automatically build the entire user interface.
When you access the product editing interface (/admin/index and click a product), the following interface appears:
This kind of interface is really not human-friendly. ID, which will not be changed obviously, and the space of description is too small. Next, we will make some modifications to product. CS:
Namespace sportsstore. domain. entities {[Table (name = "Products")] public class product {[hiddeninput (displayvalue = false)] [column (isprimarykey = true, isdbgenerated = true, autosync = autosync. oninsert)] public int productid {Get; set;} [column] public string name {Get; set;} [column] [datatype (datatype. multilinetext)] Public String description {Get; set;} [column] public decimal price {Get; set;} [column] Public String category {Get; Set ;}}}
Here, the hiddeninput is in system. Web. MVC. dll.ProgramSo add system. Web. MVC. dll reference.
Tip: If you really don't want to reference the system. Web. MVC. dll assembly, you can change [hiddeninput (displayvalue = false)] to [scaffoldcolumn (false)].
Of course, you can also modify the CSS file./content/adminstyles.css
. Editor-field {margin-bottom :. 8em ;}. editor-label {font-weight: bold ;}. editor-label: After {content :":"}. text-box {width: 25em ;}. multi-line {Height: 5em; font-family: segoe UI, verdana ;}
Next, run the program and you will see the following interface:
Handling edit submissions