If you would like to create an application such as this one, please do follow along in this step-by-step tutorial. Download Project Files

Transcription

1 Creating a CRUD application in ASP MVC A few years ago, creating a web application with create, read, update and delete (CRUD) functionality with traditional ASP or ASP.NET web forms could become cumbersome. In traditional ASP, developers were left with mixing presentational HTML markup with server-side Visual Basic script, which made creation and maintenance of applications difficult. When ASP.NET web forms debuted, it shifted the paradigm where developers could at least separate presentational HTML markup from server-side business logic with their preferred object-oriented language (Visual Basic or C#.NET). However, web forms came with out of the box web controls that cornered developers into data controls which often felt bloated and made HTML output rendered by the application server (Internet Information Services) hard to debug. With the radical shift in development with ASP MVC, developers can create web applications like CRUD relatively easy and separate behaviors of concern. Developers have complete control over HTML markup, and the ability to separate classes based on their intended behaviors. In the following tutorial, we ll see how we can create a simple applicant system with ASP MVC. We ll explore how we can either use the existing HTML markup scaffolding Microsoft provides, or create our own. We ll see a glimpse of the new database access framework known as entity framework and how it can alleviate some of the common mistakes developers using in-line structured query language (SQL) make. We ll understand how Razor web page views communicate via implicit GET and explicit POST commands. Lastly, we ll start to see how ASP MVC delivers separation of concerns throughout an application. If you would like to create an application such as this one, please do follow along in this step-by-step tutorial. Download Project Files Prerequisites Before beginning we need to make sure we have the following software installed and operational: 1. Microsoft.NET framework 4.5 or higher 2. ASP MVC 4 or later 3. Microsoft Visual Studio Web Developer Express 13 a. Free version found at this link: i From this website, choose Express for Web 4. Microsoft SQL Server Management Studio 14 a. Free version found at this link:

2 i Make sure to install the local database service and management studio product Once you have downloaded and installed these applications, open Visual Studio Web Developer Express by following these steps: 1. From the desktop, left click Start button 2. In the search field, type visual studio 3. Left click to select Visual Studio 13 Creating the project From Visual Studio, follow these steps: 1. From the main menu, choose File : New : Project

3 2. In the New Project window: a. From the left pane, leave Visual C# as selected b. From the top combo box, choose.net Framework c. From the main window, choose ASP.NET Web Application Next, while in the New Project window, at the bottom: 1. In the name field, type Applicant 2. In the location field, choose root of C:\ 3. In the solution field, should be auto filled with the same name as the name field (1.) Lastly, while in the New Project window, at the bottom right: 1. In the check box for Create directory for solution, leave checked 2. In the check box for Add to Source Control, leave unchecked 3. Once finished, click OK

4 Note: Regarding source control, once we have this project finished, pushing the files into a source control repository such as Team Foundation Server (TFS), Subversion, GitHub or CodePlex should be a straightforward task. In the next window, choose (1) MVC and click (2) OK: Once Visual Studio has completed creating the project, we should see from the right side in solution explorer we have a functional web application created with the appropriate folder structure needed for MVC. Go ahead and press F5 on the keyboard to ensure the project builds and launches a web page as shown below:

5 Entity framework with MVC applications In the latest versions of the.net framework, Microsoft has provided a new and more robust approach to data access with ASP MVC applications called entity framework. Entity framework aims to solve some of the common problems associated to data access retrieval and submission from ASP MVC application including but not limited to: 1. Performance of complex queries: if your application is using complex stored procedures with complex business logic, it may be a worthwhile exercise to determine if using entity framework can speed up the query operation and make the overall query structure easier to write and understand. 2. Native support of database operations: much like Active Data Objects (ADO), entity framework has native methods to perform common database operations such as selecting, filtering, sorting, adding, updating and deleting data from a database 3. Native support of parameterized queries: with traditional ASP applications and ADO, we have to explicitly parameterize queries that deal with insertion of data into a database from an application to prevent the use of structured query language (SQL) injection attacks. With entity framework, parameterized queries are natively supported. For the purposes of this tutorial, we ll be using entity framework and a deeper dive using entity framework will be covered later.

6 Approaches to creating entity framework within an MVC application When we want to work with entity framework within an MVC application there are three different approaches you can take: 1. Model first: We create entity framework from existing models 2. Database first: We create entity framework from an existing database 3. Code first: We create entity framework by creating the classes we need first, then associate the database based on these needs For our purposes, we ll be using code first approach. Creation of applicant database Before creating our data model in our MVC application, let s create our database and corresponding table. Follow these steps: 1. From the desktop, left click the start button 2. In the search field type sql server 3. Choose Microsoft SQL Server Management Studio from the start menu: 4. In the Connect to Server window:

7 a. Choose a local computer database b. For authentication, leave Windows Authentication c. Left click Connect: 5. From object explorer, left click to expand Databases: 6. Right click Databases, and choose New Database: 7. In New Database window, in Database name text field: a. Type Applicant b. Left click OK

8 Creation of applicants table With our database created, let s create our table for applicant submissions: 1. From Object Explorer, left click to expand Applicant database: 2. Right click on Tables, and choose New: Table :

9 3. From the tab that opens, enter the following columns: Column Name Data Type Primary Key Identity Seed Allow Nulls ApplicantId Int Yes Yes No FirstName Varchar(50) No No No LastName Varchar(50) No No No City Varchar(50) No No No State Varchar(50) No No No ZipCode Varchar(5) No No No Once finished let s save our table: 1. From the main menu, choose File: Save Table_1: 2. In Choose Name window: a. Type Applicants b. Left click OK:

10 Note: As a reader, you may be wondering why we chose Applicant as our database name, while we chose Applicants as our table name? The answer is simple - by default, entity framework uses pluralization on table names. If we want to remove pluralization, a Google search would provide examples on a resolution. Creation of applicant model With our database and table created, let s create our model. Model s in MVC is a class that will get and set data for each column from our database table. Follow these steps: 1. In Visual Studio, from Solution Explorer, right click on Models and choose Add : Class: 2. In Add New Item window: a. Leave Visual C# selected b. Leave Class selected c. In the name text field type Applicant.cs d. Left click Add

11 In our model class add the following: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.ComponentModel.DataAnnotations; namespace Applicant.Models { public class Applicants { [Key] public int ApplicantId { get; set;} public string FirstName { get; set; } public string LastName { get; set; } public string City { get; set; } public string State { get; set; } public string ZipCode { get; set; } } } As you can see from the code:

12 We import a.net library (namespace) for assigning keys in entity framework to a primary key from our database table (System.ComponentModel.DataAnnotations) Create six matching public class variables with corresponding data type Save your model class and close the file. Creation of data context When working with entity framework in an MVC application we create a data context class that uses a data type specific to entity framework which is then type casted to our model class. Follow these steps: In Visual Studio, from Solution Explorer: 1. Right click the solution Applicant, and choose Add : New Folder: 2. Name the folder DAL (data access layer): 3. Right click DAL and choose Add : Class:

13 4. In Add New Item window: a. Leave Visual C# selected b. Choose Class c. In the name text field, type ApplicantDataContext.cs d. Left click Add:

14 Add the following to our class: using System; using System.Collections.Generic; using System.Linq; using System.Web; using Applicant.Models; using System.Data.Entity; namespace Applicant.DAL { public class ApplicantDataContext : DbContext { public DbSet<Applicants> Applicant { get; set; } } } As you can see from the code: We import two libraries (name spaces): o Our applicant model class (using Applicant.Models) o A.NET library for working with entity framework (using System.Data.Entity)

15 We make the class signature inherit from DbContext, a specific class from entity framework which gets translated internally to our web.config file <connectionstring> XML node o Inside the constructor class we create a public applicant variable which is typed cast to our model class, applicants, with a data type DbSet, which makes entity framework capable of getting and setting specific column types Save your data context class and close the file. Adding data context key to web.config Once we ve added a data context class, we need to instruct our class where the database server resides. Let s modify the file: In Visual Studio, from Solution Explorer, scroll down and double click Web.config In Web.config, look for an xml tag named connectionstring Inside the parent node, we ll see a key added for applicant context, replace that key with the following: <connectionstrings> <add name="applicantdatacontext" connectionstring="data Source=(local); Initial Catalog=Applicant; Integrated Security=SSPI;" providername="system.data.sqlclient" /> </connectionstrings> As you can see from the XML markup: Add name s value must match the class name of our data context Connection string s value must be set to either a local or remote database server with a corresponding table named Applicant Save web.config and close the file. Creation of controller In MVC the last piece of the puzzle is creating a controller. In the MVC paradigm, the controller is a class that takes care of performing navigation operations between different razor views, performing validation and database operations. Follow these steps: 1. In Visual Studio, from Solution Explorer, right click Controller folder, and choose Add : Controller:

16 2. In Add Scaffold window: a. Leave Controller selected b. Choose MVC controller with views using Entity Framework c. Left click Add: 3. In Add Controller window: a. In Controller name, type ApplicantController b. In Model class drop down list, choose Applicant (Applicant.Models) c. In Data context drop down list, choose ApplicantDataContext (Applicant.DAL) d. Left click Add:

17 After clicking Add, we ll notice that Visual Studio natively creates the following: An applicant controller with create, read, update, and delete (CRUD) abilities Views found at: o Views : Applicant Go ahead and run the project and verify our solution is working. Press F5 on the keyboard will show the default landing page. To see our applicant system in the address bar, type the following: and press enter on the keyboard. You ll notice a basic administrative CRUD system. From this point forward we can customize the look and feel of the application, make modifications to our model, data context, and controller classes as well as database modifications. Create link to applicant from home page Since we don t want to type the fully qualified web address to our applicant system, let s add a link to the home page which is found in Views: Shared: _Layout.cshtml:

18 <ul class="nav navbar-nav"> "Index", "Home")</li> "About", "Home")</li> "Contact", "Home")</li> </ul> As you can see from the code we add a link using the html helper object s class - ActionLink (provided by Razor) and supply the following: 1. String text: a. Applicant which is our link description 2. Action name: a. The name of the action we wish to call 3. Object Values: a. More behind the scenes plumbing for MVC, typically you stick with the directory your current files reside in Save your changes and re-build the solution. Once the build is finished, press F5 on the keyboard will show us the modified page and we ll be able to navigate to our applicant system without typing the full web address in address bar of the browser. You ll notice our table for an applicant is empty - the reason is simple - we haven t entered data in our database table. Before we enter data into our database table, let s discuss how ASP MVC interprets retrieving and sending razor pages, as well as database access. Understanding the differences between ASP web forms & ASP MVC In ASP MVC the way pages are requested (GET), sent (POST), and how database access is achieved differs significantly compared to traditional ASP or ASP web forms. When working with web pages in traditional ASP or web forms, developers either combined HTML markup and business logic in the same page (ASP) or worked with out of the box data controls such as grids, repeaters, buttons, etc. (ASP web forms). The combination of HTML markup and business logic in ASP is predominately why most developers dropped it. ASP web form controls made creating a web page easy and quick, not to mention associating data to them through native data binding calls a cinch. However, with ASP web forms, we lost some key abilities early on which made customizing and delegating responsibilities of concerns difficult: 1. Out of the box data controls returned native HTML markup from Microsoft, which may/may not work for your needs a. There were ways around this but involved writing your own custom controls which was time consuming and tedious

19 2. Out of the box data controls and the web form in general were executed at the server level, which in most cases with the HTTP protocol isn t necessary 3. Out of the box data controls in a web form didn t have to be strongly typed to business logic/model: a. This meant a developer could easily place their code in the code-behind file for each web form. As a result, re-usability of code was lost and in larger scale applications, architecturally, developers were tied to one class for business logic and data access 4. GET/POST commands were largely handled internally by the framework 5. Database access could be achieved by: a. Stored procedures b. Inline SQL i. Depending on size and scale of an application, these can be complex & a performance hindrance i. When using an update operation to a specific page, if parameter s are not added to a WHERE clause, these queries can be used in malicious attacks (SQL injection) against a database In MVC, specifically with regard to ASP, much of these tradeoffs have been resolved and simplified. With respect to the numbers above, MVC does the following: 1. While there are out of box HTML helper classes (Razor) that do produce HTML markup from the server, the majority of the markup of your application is entirely up to the developer, including placement 2. While there are out of box HTML helper classes (Razor) that execute at the server level, the majority of the HTML markup isn t 3. When working with views in MVC, there must be an associated model typed to the view and any data a developer wants created or modified must be specifically data bound to an HTML helper class 4. GET/POST commands are handled explicitly by developers, with the aid of Visual Studio where needed 5. Database access can be achieved by: a. Stored procedures b. Inline SQL i. Same concerns arise as with traditional ASP web forms i. Same concerns arise as with traditional ASP web forms c. Entity Framework

20 i. Many of the issues surrounding SQL injection and performance of queries can be reduced or eliminated The next section will dig deeper into the above mentioned areas. Understanding how applicant records are created Since we have an understanding at a basic level of the differences between traditional ASP, ASP web forms and MVC, let s look at how applicant records for examples of these behaviors: With the solution open, press F5 on the keyboard and wait for the home page to load In the top menu, left click Applicant link From the Applicant home page, left click Create New When we left click Create New from the Applicant home page, the following code is executed: // GET: /Applicant/Create public ActionResult Create() { return View(); } As you can see from the code: We have a method named Create, with an implicit GET command which simply returns the contents from our create view Import note here is that we haven t actually created an applicant - we are only viewing the page, creation comes next. Looking in our view, we see the following at the Applicant.Models.Applicants As you can see from the code: We reference a strongly typed model, in our case, Applicants: o This allows our view the ability to data bind inputted data from our form fields and allows a one-to-one mapping to the properties in our applicant s model Continuing, the binding between our view and model:

21 @using (Html.BeginForm()) { <div class="form-horizontal"> <h4>applicants</h4> <hr <div => model.firstname, new = "control-label colmd-2" }) <div => => model.firstname) </div> </div> As you can see from the code: Before the form HTML markup starts, we use Razor s HTML helper object and call BeginForm to instruct MVC this form is processing a database operation Next, we see the use of the HTML helper object and its call of ValidationSummary which instructs MVC to display error messages when applicable Inside the parent DIV, we use the html helper object and call LabelFor method which accepts a few parameters, in our case, the model property FirstName o LabelFor is a class method for displaying a label in HTML markup from Razor syntax Inside the second DIV, we use the html helper object and call EditorFor method passing in our model property FirstName o EditorFor is a class method for display an input text field in HTML markup from Razor syntax Lastly, we call ValidationMessageFor method, and pass in our model property FirstName, which allows us to later create validation requirements in our model that flow to our controller and back to the respective view o ValidationMessageFor is a class method for displaying error message in HTML markup from Razor syntax Razor syntax is a special type of markup in MVC that s similar to HTML and gives us many built-in features for working with a variety of controls in MVC (input, labels, validation, et al) through the use of a HTML helper object. Razor also gives us unparalleled control of the layout of a web page. Using Razor we are no longer cornered into controls that offer limited support with regard to their placement. MVC and Razor also eliminates a bloated view state from a rendered view that was present in ASP web forms.

22 Once we have all fields with the supplied data click create which executes the following: // POST: /Applicant/Create [HttpPost] public ActionResult Create(Applicants applicants) { if (ModelState.IsValid) { db.applicant.add(applicants); db.savechanges(); return RedirectToAction("Index"); } } return View(applicants); As you can see from the code: We have a method named Create, with an explicit POST command [HttpPost] which instructs MVC to post our page to the server In the method signature, we pass in our model class Inside the method: o We first check if the model state is valid, i.e., has appropriate validation on the model properties passed: If true, we use our db object, look for our applicant data context object, and use the add method, passing in our applicant object, which contains data from our form fields: We then call SaveChanges method which instructs entity framework to perform an operation against our database We redirect MVC back to our original applicant home page If false, we exit any further operations, and pass back the correct entries along with errors back to our original create applicant view If creation of applicant entries was successful, we ll see them listed in our applicant home page. In summation, MVC uses a combination of implicit GET commands to get data and return a view, while explicit POST commands set/perform operations against a razor view and accompanying database. Adding validation to create applicants view If you read the tutorial Creating an ASP.NET MVC Contact Form, then you re familiar with validation in MVC. If you haven t, let s analyze it in our create applicants view.

23 If a user leaves all fields empty, and left clicks create, MVC through various layers of abstraction translates the validity of the model state from the controller, which uses various data requirements within the model to determine what rules have passed or failed. In ASP web forms we added validation messages and requirements within a web form using out of the box validation controls whereas in MVC we add validation messages and requirements in our model class. Follow these steps to add validation: From solution explorer, expand our Models class Double click Applicant.cs In Applicant.cs, at the following validation: public class Applicants { [Key] public int ApplicantId { get; set;} [Required(ErrorMessage="First name is required")] public string FirstName { get; set; } [Required(ErrorMessage="Last name is required")] public string LastName { get; set; } [Required(ErrorMessage="City is required")] public string City { get; set; } [Required(ErrorMessage="State is required")] public string State { get; set; } [Required(ErrorMessage="Zip Code is required")] public string ZipCode { get; set; } } As you can see from the code: We add a data annotation above each public property in our model class with the necessary parameters passed in If you re familiar with validation controls in ASP web forms data annotations in MVC are a new and improved way of handling validation at the business/entity layer of an application and translating that back through associated bindings in the corresponding view. Data annotations in MVC have similar attributes that were applicable in ASP web forms. The idea in MVC is to delegate the responsibilities of behavior through layers of abstraction between the views, models, data access layer and controllers so that we don t have an application that has a mixture of these behaviors where they don t belong. Save your changes and when left clicking create from the create applicant view without entering a few input fields you ll receive the following screen:

24 If you view the source of the razor page before and after validation occurs, you ll notice MVC injects the appropriate attributes into the HTML markup to display validation messages. This is one more way MVC handles obtrusive JavaScript from being unnecessarily injected into a web page. Viewing edit, details and delete views From our applicant home page, we have links in the grid that navigates to an edit view, which takes care of performing edit operations against existing applicants, details view is a view which allows us to view a read-only version of each applicant, while the delete view is a bit more complex, which will be covered shortly. Each applicant in the grid is prefaced with a unique number generated by MVC and from a query performed by entity framework: // GET: /Applicant/ public ActionResult Index() { return View(db.Applicant.ToList()); } As you can see from the code: We have a method named Index with an implicit GET command which returns a collection of applicants using the ToList method from entity framework The link(s) for each applicant are generated by:

25 @foreach (var item in Model) { <tr> => item.firstname) </td> => item.lastname) </td> => item.city) </td> => item.state) </td> => item.zipcode) </td> "Edit", new { id=item.applicantid "Details", new { id=item.applicantid "Delete", new { id=item.applicantid }) </td> </tr> } As you can see from the code: We use a for each loop to iterate through the applicant collection and display information We use an HTML object, and call the class method action link, and pass in an appropriate action behaviors while setting a new applicant id for each When using action links, MVC uses a default configuration to determine how to create the link with parameters as well as how to route the request within an application. Configuring routing can be a complex topic. If you need to create links with different parameters you want to view RouteConfig.cs. From solution explorer navigate to: App_Start o RouteConfig.cs With regards to deleting applicants we have two delete views. The link from the applicant home page is similar to view detail functionality. We send a user to a confirmation page asking them if this is the correct record to delete. The code used for this is: // GET: /Applicant/Delete/5 public ActionResult Delete(int? id) { Applicants applicants = db.applicant.find(id); return View(applicants); } As you can see from the code:

26 We have an implicit GET command named Delete We re expecting a id from the address bar, if found: o We create an object from our applicants model named applicants and call the Find method from our data context class: As long as the id exists in the database, we ll return the specific user requested back to our view When the user presses delete from this web page, we have another method which executes the desired action against the database: // POST: /Applicant/Delete/5 [HttpPost] public ActionResult Delete(int id) { Applicants applicants = db.applicant.find(id); db.applicant.remove(applicants); db.savechanges(); return RedirectToAction("Index"); } As you can see from the code: We have an explicit POST command named Delete We re expecting a id from the address bar, if found: o We create an object from our applicants model named applicants and call the Find method from our data context class: As long as the id exists in the database, we ll remove the desired applicant from the database We ll call SaveChanges to perform the operation against the database via entity framework Redirect our user to the home page A few caveats The application as it stands uses MVC s native routing structure to define how uniform resource locators (URL s) are created. In other words, our URL s look as below: Depending on the uses of this application, this may/may be desired to pass an easily identifiable indexer as part of the URL string. If this is the case, you ll want to look into passing a global unique identifier (GUID) instead.

27 Also, as the application stands, anyone can add, update, remove applicant records from this system. Depending on the uses of this application, that may/may not be the desired approach. Summary In this tutorial we learned how to create a simple create, read, update and delete (CRUD) application using Visual Studio, MS SQL Server, MVC and Entity Framework. Specifically we learned: How to create the solution in Visual Studio How to create the database, and table in MS SQL Server Management Studio Approaches to creating entity framework within MVC Creation of our model, data context and controller classes and associated keys in web.config Understanding the differences between traditional ASP web forms and ASP MVC Understanding how validation works in MVC Creation, editing, viewing and deleting applicant records using our Razor web pages With the information learned in this tutorial, you can create, customize and put a small medium large scale administrative system in place rather easily and quickly with ASP MVC. If you have questions, please contact me.