Watch videos with subtitles in your language, upload your videos, create your own subtitles! Click here to learn more on "how to Dotsub"

Creating a Tasklist Application with ASP.NET MVC

0 (0 Likes / 0 Dislikes)
  • Embed Video

  • Embed normal player Copy to Clipboard
  • Embed a smaller player Copy to Clipboard
  • Advanced Embedding Options
  • Embed Video With Transcription

  • Embed with transcription beside video Copy to Clipboard
  • Embed with transcription below video Copy to Clipboard
  • Embed transcript

  • Embed transcript in:
    Copy to Clipboard
  • Invite a user to Dotsub
[Microsoft ASP.net] [www.ASP.net] Hi, my name is Stephen Walther, and today I'm going to show you how to build an entire ASP.NET MVC application from start to finish. The goal here is to keep things as simple as possible. I just want to blast through building an application so you can get a sense of what's involved when you're building an MVC application. Really what I want to do is convey a sense of what's it like. What's it like when you're building an MVC application? We are going to be doing things like we're not going to be using test-driven development, we're not going to be using helper methods; we're going to keep things as simple as possible. I hope I can convey to you just how simple it is to build an MVC application. If you're an existing ASP.NET developer who's been using Web Forms or you've been using classic Active Server Pages, I think you'll find all this stuff very familiar and very easy. And you might discover that you'd like getting your hands dirty again by playing with HTML, by typing out those angle brackets. So what we'll be doing is we'll be creating a task list application, a really, really simple task list application. This application will allow us to do 3 things. It will allow us first to list a set of tasks. It will allow us to create new tasks. And finally—you have to do this in a task list application— it allows you to mark a task as completed. So that's what we're going to do. We're just going to build a simple MVC application that allows us to do these 3 things. Let's go ahead and get started. I'm going to switch over to Visual Studio. I'm going to be using Visual Studio to create the application. The first thing I want to do is I need to create a new project, so I'm going to go up to the File menu and select New Project. I'm going to want to create a new ASP.NET MVC project. One of the things that I found confusing when I first started to use MVC is you can't create a new web site. I'm used to selecting this option right here when I create an ASP.NET application. You can't do that when you're building an MVC application because you actually have to create something called a web application project in the background, and that's different from a normal web site. So make sure you select New Project up here. Okay. In the New Project dialog, I'm going to go ahead and select Visual Basic as my project type because that's the language I'm going to be using. You can of course use C# if you prefer. That's fine. Over here in Templates I'm going to select ASP.NET MVC Web Application. Let's give our new project a good name. I'm going to call it TaskList, click OK, and you'll notice I get this dialog box right here. What is this dialog box for? If you want to add unit tests into your solution, this is going to create a second project where you can add unit tests so you can test your MVC application. We're not going to do that just because we want to keep things really simple. I'm going to select No and click OK. Okay, great. You'll see that we have a bunch of files over here. These are the basic folders that you need in an MVC application. One nice thing about working in MVC is there is known locations for sticking your files. There's 3 folders that you need to be concerned about when you're working in an MVC application. The 3 main folders you're always worried about is this folder called Models, this folder called Views, and this folder called Controllers. We'll start creating some controllers and views, and we'll create a model in a little bit. One thing I do want to point out is when you create a new MVC application in Visual Studio, it does give you some default content. It gives you a default controller, and it gives you some default views. We're going to start from scratch, so I'm going to go ahead and delete that default content just so we can start from ground zero. Let me go ahead and delete the Home folder from Views, and now we're starting from scratch. When I start building an MVC application, typically the first thing I do is I start by creating a controller. A controller is responsible for grabbing a request, a browser request, and doing something with it. So that's a logical place to start because that's when you'll want to decide whether to show a view or redirect them to another action or whatever you want to do. So I'm going to start by going up to my Controllers folder. I'm going to add a new controller into it. So I'm going to go to Add, New Item, and you'll notice that one of the items I can add here is an MVC Controller Class. I'm going to go ahead and add it in. The name here is important. I'm going to call it HomeController. What that will do is it will enable me to handle any requests that go to the Index page of the web site. I'm going to go ahead and add that in. There's my controller. You'll notice that a controller is really just a Visual Basic.NET class, just a VB.NET class that inherits from System.Web.Mvc.Controller. So it's just a class that inherits from the base controller class, and they give us one function in this class by default. This function corresponds to an action that the controller can take. Any public functions that you create in Controller become actions of the controller. So each of these functions return something called an ActionResult. Let's be explicit about that. And typically what you do inside an action is you return a view. I'm just going to return a view here. What this is going to do is a view is the equivalent of a page. It's the actual markup and content you want to fire back at the browser when the browser makes the request. Because I haven't specified the name of the view, it's just going to infer it for the name of the controller action, so this is going to return a view called Index back from this. We're going to create that in a moment over here in the Views folder, but for right now let's just go ahead and create each of our actions. This first action, this Index action, is going to be called— If you just go to the web site and you don't specify any particular page in your URL, it's just going to go to this Index action. What we're going to do in this Index action is we're going to display a list of tasks. But we need to create some more actions here. We're also going to want an action that we're going to use to display a form for creating a new task. We're going to go ahead and call that action the Create action. We're also going to want an action that we call for actually adding a new task to the database, and we're going to call this one CreateNew. This action here actually displays the form for adding a new task to the database. This action down here is going to go ahead and add the new task to the database. And then after it finishes adding, I want it to not show another view; I want it to go ahead and redirect back to the Index action, this guy up here, and just display the list of tasks, including the new tasks. And the final action that we're going to need to create is I want to create an action for marking a task as complete. Oops, I misspelled complete. That's not good. I want to go ahead and be able to mark a task as complete. Again, I'm going to have to have some database logic here to do that. But after you mark something as complete, I want to go ahead and do another RedirectToAction and go back to the Index action again because really what I want to do here is after you mark something as complete, I don't want to show something new; I just want to show the list of tasks again. So that's pretty much it. We've created our basic set of controller actions. Now that we've created our controller actions, the next step for us is we need to create some views. The view contains the actual HTML that's sent out to the browser. You have to follow certain conventions here. You want to add your views into the Views folder, and the way you go about organizing the Views folder is you create a subfolder that corresponds to each of your controllers. We're going to be creating views that correspond to the HomeController, so what we want to do is add another subfolder into the Views folder and just call it Home. And then what we want to do is we want to create 2 views. We want to create a view that first corresponds to this Index action method in the HomeController. So we're going to create an Index view, and we're also going to create a second one, a Create view, that will allow us to show a form for adding a new task, and so it needs to be called Create because it needs to correspond to this action method. Let's go ahead and add those views right now. Right click, Add, New Item, and I need to find the MVC View Page. There it is. It's right there. I need to name this guy Index. There we go. And here it is. Notice that this is more or less just a standard HTML page. In fact, it's an XHTML page. You can go ahead and just treat it like a normal HTML page and throw in all your standard tags. You'll notice that it is a code-behind page, so it does have a code-behind file. We'll get to that a little later on, but mostly it's just an HTML page. In our Index page what we're going to do is we're going to list our existing tasks. I'm just going to put a header in here that says My Tasks. In a moment what we're going to do is we're going to add some logic for displaying all tasks. The other thing that we want to do on this Index page is we want to allow a user to link to the Create view so that the user can add a new task. So I'm going to add a link. I'm going to add a link and label it Add new Task. The URL here is interesting. The URL here needs to correspond to the actions that I want to call. You'll remember that I created an action on the HomeController called Create, and so this URL will automatically invoke—switch back over here for a second—this guy because this is the Create method on the HomeController. Let me go back over here. So that's exactly what we want. Okay. We have our first view done, kind of, almost. We've still got to do this part. The next thing we have to do is create the Create view. I'm going to add another item in here, and this is going to be another MVC View page, and I'm just going to name this guy Create. The purpose of this view is to allow us to add a new task. So let me put in a header that says that, Add New Task. This view is going to contain a form. This isn't a server-side form; this is just going to be an HTML form. I'm going to specify a method. I'm just going to use post, and action is going to be the page that it posts the form data to. I'm going to be posting it to Home/CreateNew. Where did I come up with that URL? This is going to go to the HomeController right there, and then it's going to call the CreateNew method in the HomeController. Let me go back for a second to the HomeController. That's this guy right here. This is where we're going to stick the data in the database and then redirect them back to the Index action after we're done with that. So we want them to submit the form, get the form data in the database, and then we're going to show the list of tasks. So let's finish off this form. The form is going to contain one text box. I'm going to create a label for that text box. Here's the actual text box right here. I better give it a name. Finally, I need a submit button. Add Task. Fantastic. There we go. So we have our 2 views. We have the view for listing the tasks, and we have a view for adding new tasks. So I think we're ready to try this stuff out. I'm going to go ahead and run this. I'm going to go up to the VCR-like run button up here, click it, and let's see what we get. Notice it's going to warn us that we can't run it in the debugger unless it turns on debugging in the Web.config file. We want to go ahead and say OK. Just remember once you go into production, make sure you turn off debugging. Hey! That's great. So we got our page here, and this is the page that corresponds to the Index controller action. Notice the URL up here. It just says Home, so it's defaulting over to the Index method. There's not a lot going on here, but we do have our link, so we can go ahead and click on this link and get over to our form for adding a new task. Notice the URL for this page. This is going to Home/Create, so it's going to the HomeController and the Create method on the HomeController. Right now of course it doesn't do anything. I can type something in—I don't know—Get something important done, and click Add Task, and notice it does redirect us back again to our Index view, which is what we wanted. But of course we haven't done anything with our database yet, so nothing is actually happening except for we're moving around between the views. The next thing we want to do is we need to add some database stuff, and we need to get the database stuff going so that we can store our tasks and retrieve them and show them. How are we going to do that? I'm going to take advantage of LINQ to SQL. I personally really like LINQ to SQL. You can use any technology that you want with MVC. If you prefer, you could use NHibernate, you could use the Entity Framework. It's really up to you. You could even work directly with ADO.NET classes if you wanted to. I personally wouldn't want to do that, but you could do that if you really felt like doing it. What I need to do before we do anything else is actually create the database now where we're going to store the tasks. I'm going to create the database in our App_Data folder over here inside of App_Data. I'm going to right click and add a new item. I'm going to add in a SQL Server Database. I'm just going to go ahead and call the new database TaskListDB, click Add, and now we have a new user database right here, TaskListDB. Now I want to go ahead and add a table into this database for storing our tasks. So I'm going to double click on TaskListDB, I'm going to right click on this Tables folder right here, and I'm going to add in a new table. All right. Our new table is going to have 4 columns. I'm going to give it an Id column that's going to be our identity column. It's going to be an integer column, not allow null values. Since I'm using LINQ to SQL, I'm going to be very careful about specifying my primary keys. LINQ to SQL needs to know the primary key. And I want to mark this as an identity column, so I'm going to go down here to Column Properties and scroll down. to Identity Specification, expand that out, and mark this as an identity column. Next I'm going to create a column for the actual description of the tasks. This needs to be a big column because this is going to have the actual task description inside of it. Let's make it 300 characters. I'm going to need a column that represents whether a task has been completed or not, so I'm going to make that a bit column because it's going to act as a Boolean column. It's either going to hold the value 0, 1 or, in other words, true or false. I always like to know the entry dates for the tasks so I know whether or not I'm procrastinating. So I'm going to add an entry date column, make that a datetime column, and again I'm not going to allow nulls. Let me save this. I'm going to hit the floppy up here, and I'm going to name the database table Tasks and click OK, and we have our new database table. It should show up over here. There we go, Tasks. The next step is now that we've got the database done, now it's time to use LINQ to SQL and have a way of representing our Tasks database table. To do that with LINQ to SQL, what I need to do is create some LINQ to SQL classes, and that's a good example of something that you want to put in the Models folder. We've already used the Controllers folder, we've used the Views folder, the last letter in MVC. One thing we haven't used is the first letter, the Models folder. That's where you put all your application logic and your database logic. I'm going to right click on the Models folder and I'm going to add a new item. In this case I'm going to add LINQ to SQL Classes. You'll find that if you scroll down to here. For my LINQ to SQL classes I'm going to go ahead and name it TaskList. That's going to create a task list data context. Click Add. This opens up the Object Relational Designer. When you add LINQ to SQL classes in your project, you get this designer. The nice thing about this designer is it allows you to very quickly create classes in your application that correspond to your database tables. I need to represent the Tasks database table, so I'm going to go over to this table right here. If I want to create a class now that corresponds to this database table right here, all I have to do is drag this table onto the Object Relational Designer. So I'm going to do that. There we go. We have now our class that has 4 properties that correspond to the 4 columns inside our Tasks database. That was really, really easy. Right click, Save, make sure everything gets saved, and now we're ready to start writing our database logic. Let's go back to our HomeController. The database logic I'm going to add into the CreateNew action method right here. We need to do this bit of logic right here where it says Add the new task to database. We're going to want to grab the form data that they submitted and actually submit that form data using the LINQ to SQL classes into our Tasks database table. How do we do that? The first thing you want to do whenever you're working with LINQ to SQL is you always want to start by creating something called a data context. A data context works as the gateway between your application logic and the database. Since I know I'm going to need to interact with my database from multiple controller actions— for example, down here on the Complete action I'm also going to need to interact with the database and in fact even in the Index action I'm going to have to do it— I better make that a class level build, the data context. So I'm going to go ahead and add it up here. I'm going to create a private field. By convention, most people call this variable db, and I'm going to create a New TaskListDataContext. Now that I have this private field called db, I can start interacting with my database. So down here in CreateNew the first thing I want to do is I'm going to create a new instance of a task entity and then I can assign the values from the form and then save that to the database. I get a task class for free from LINQ to SQL, so I'm going to go ahead and create an instance of that right now. There we go. This class has properties that correspond to all the columns in the database. The first thing I want to do is I want to assign the task, and this is the point now where I want to get the value from that form field in the view. In the view I had a form that had one text box for the tasks. In fact, let me show that to you. Going back over here, remember we had this Create view, and here's our form, and we had this input text box right here, and the name of this text box is task. So what we want to do right now is we want to take the value of this input field which is being submitted to the CreateNew action method and we want to save that into the database. So how do we do that? This is one of the nice things about using this MVC framework. All the form fields that you get when you submit to a controller action, they automatically get converted into parameters. So since that form field was called Task, I named the input field in the form Task, I can just put in a parameter here, task As String. Yeah, you can strongly type it. Notice that I'm actually specifying the string here. It's going to pass it in as a string. Now I can just grab that value out and assign it, and I've now set up the value of the Task property for that entity. Let's go ahead and finish off the rest of the properties. There's an IsCompleted property. This is a new task so it's not going to be completed. And there is also the EntryDate property, and I'm just going to assign DateTime.Now, the current date and time, EntryDate. Now that we've created our entity, we're ready to take advantage of the data context and get that new entity into the database. I'm going to say db.Tasks.InsertOnSubmit this new entity. So that says go ahead and take this newTask entity that we created and stick it in the database when you submit all changes from your data context. I'm ready to submit all changes right now, so I'm going to do that on the next line. What the SubmitChanges method does is it takes all the queued changes, all the changes that have been queued up to happen to the database, and it just goes ahead and makes the modifications to the database. So that should work. We should be done in terms of the database logic we need to write for this particular controller action. So let's go ahead and try it out and make sure it works. I'm going to run my application again. I'm going to click on Add new Task, and my new task is going to be Complete sample app. I'm going to click on Add Task. We shouldn't expect it to show up here because we still haven't written the stuff to show the list of items here. But at this point I'm hoping they'll actually be in the database. Let's find out if we got the data in the database. I'm going to shut down the browser window and go directly to the database, and I'm going to right click on Tasks and go to Show Table Data. Cross my fingers. Please be there. And there we go. We got the one task in the database, Complete sample app. We managed to successfully submit our form data into the database. So what's the next thing we need to do here? We've been able to stick a new task in the database. The next thing we need to do is be able to show all the existing tasks in the database. To do that, I'm going to go back to my HomeController. In my HomeController I'm going to work on this first method right here, the Index method. Inside of here I want to be able to take advantage of the data context again, grab all the tasks that exist in the database, and then pass them over to the view so I can display them all on the view. The first thing I'm going to do is I'm going to create a variable called tasks, and that variable is going to be equal to—I'm going to grab all the existing tasks from the database. I'm going to use a LINQ to SQL expression to be able to get those variables out. I'm going to say From t In db.Tasks where—actually, I don't need where because I want all of them. I want to order them in a particular way. I want to order the tasks by their entry date, descending. This grabs all the tasks out in descending order from the database. And then I want to be able to pass the tasks over to the view. The easiest way of doing that is just to type in tasks., and I'm going to go ahead and convert them to a list, a generic list, just so we have a nice clean collection. So this is going to grab all the tasks out of the database, it's going to create a list out of them and pass them over to the view. Not bad. I just had to add one line of code in there to grab the stuff from the database. Okay. So what we want to do now in the view is we want to modify the view to show that list of tasks. We're going to create something called a typed view, and in a typed view what you do is you specify the type of information that expects to be passed to it. So in this case it's expecting a list of tasks to be passed to it. Let me go over to the Index view, and I'm actually going to go to the code-behind page for the Index view. I can get to that by clicking on this Show All Files. You'll notice now that I can expand Index.aspx and I can get back to this VB class, which represents the code-behind class for that view. What I want to do inside of here is I need to modify this class so it's expecting that list of tasks back. To do that, I'm going to type in Of List (Of Task) ). That's all I have to do, and now it's going to expect the view data to contain a particular type of data. Now we're ready to start writing the actual view, so let me switch back to the Index page. In this view what we want to do is we want to replace this comment right here, displaying all tasks, we want to replace that with actually doing it, displaying all the tasks. What I'm going to do is I'm going to add a For Each loop. I'm going to say For Each task As TaskList.Task In.ViewData.Model, and this is a For Each loop, so I do need to put a Next in there to close this off. What this will do is this Model property of ViewData represents that list of tasks that were passed over to this view. So what this does is it steps through each of the tasks by grabbing them from the model, and now we can do stuff with it. We can start displaying the tasks if we want to. So what I'm going to do is I'm going to put an unordered list around this because I want to show the tasks in a list. I'll put in an li for a list item. The first thing I want to do is I want to show the date that corresponds to each of the tasks, the entry date, so I'm going to say task.— Isn't this beautiful? We get IntelliSense right here, so we get the entry date. I'm going to go ahead and I don't want to show the full date. I'm going to convert that into a short DateTime string. That will look nice. Just put a couple dashes in there. Let's show the actual text of the task. Here I'm going to type task.Task, and that should show the actual text of the task. This should loop through, show all the tasks. I think that we are done. So let's go ahead and try this. Let's see if this actually shows the tasks. And there we go. We got our first task from the database. Let's see if we can add another task. Another task. Click Add Task. Hey, it's working. We even got the order right. So now we're able to create a task and we're able to list all of our existing tasks. The only thing we have to do, the final thing we have to do, is we need some way of marking a task as completed. So that's what we're going to tackle next. I'm going to close the browser window and switch back to Visual Studio. I'm back now at the Index view, and what I want to do inside the Index view is there's 2 cases. If the task has not been completed yet, I want to show a link where someone can click the link and mark the task as completed. If a task is already completed, I want to show the task but I want to show it with a line through it, I want to show the task crossed out. I'm going to go ahead and stick a conditional right here inside each of the list items. Let me put in the logic here. If task.IsCompleted Then show one thing; otherwise, show something else. If the task is completed, I still want to show the task, but I want to show the task as crossed out. How am I going to do that? I had to actually look this up. There's the delete tag in HTML. That will show some content with a line through it, as struck out. There we go. That takes care of one case. The other case down here is where a task has not been completed and you want to show a link so that you can click on it and then mark the task as something that can be completed. I'm going to go ahead and show the task down here again, but I also want to show a link for the task. So I'm going to throw in an a href and I'm going to call it Complete. This is where things get a little complicated because I need to call the Complete method on the HomeController, the Complete action. The other little thing I want to do here is I want to pass the ID of the task that's being marked for Complete. So I need a little bit of script right here. Let me just close this part right here. Inside of the script what I'm going to do is I want to pass the ID of the task. Let me convert that to a string. Let me save that. And let me go ahead and try that and let's see what we get here. Okay. So now we have our 2 tasks showing. We haven't marked anything as completed yet. If I hover over these guys, notice down here—actually, let me right click and show you— we're actually passing the ID of the task over as part of the URL. That's kind of nice. This first one has an ID of 2. This one right here has an ID of 1 because that's the first and second task. Now the last step that we have to take here is we have to write the logic so that when you click on this it updates the task as completed in the database. Let me close this browser window. When you click the Complete link, the Complete action on the HomeController is going to be invoked. So what we want to do now is go back to that HomeController and I'm going to scroll down to the Complete action down here, and what I want to do here is this is where I actually want to update the database and mark a task as complete. So right where it says database logic, that's where I need to add my additional database logic. You can get the ID of the task that the person clicked on because that's automatically going to be passed over as an ID parameter to this Complete method. I'm going to pass it as an integer. Now what I want to do is I want to go out to the database and grab any tasks that match the ID being passed over here. I'm going to create a variable called tasks, and that's going to be equal to this lambda expression From t In db.Tasks Where t.Id = the ID being passed over. I'm actually getting a set of tasks back. While it's true in this case there's only going to be one task that matches the ID, the expression here is going to return a set of things. So I need to loop through all of the matching tasks and then update the IsCompleted property. So I'm going to say For Each Match In tasks I'm going to say match.IsCompleted = True. So now we've updated all those tasks. Now the very last thing we need to do here is since we've made changes to these things, we need to call SubmitChanges on the data context so that those changes are actually preserved in the database. And then notice the last thing that we're doing is we're redirecting back to the Index method so the Index method will redisplay the Index view and that view should show the task as crossed out. Let's go ahead and try that. Let me save it. And I'm going to run it. I'm going to click on this one right here. Oh, that's beautiful. Look, it crossed it right out. Let's just try adding a new task. I'm just going to call it Some new task. Click Add Task. There it is. Let's say that I complete it. Oh, that's beautiful. That's exactly what we want to happen here. And in fact, at this point our simple application is complete. We've managed to build an entire ASP.NET MVC application. We've managed to do the 3 things that we said we would do at the beginning of this video. We've managed to create new tasks, list tasks, and we can mark tasks complete. [Microsoft ASP.net] [www.ASP.net]

Video Details

Duration: 38 minutes and 25 seconds
Country: United States
Language: English
License: All rights reserved
Genre: None
Views: 6
Posted by: neudesicasp on Sep 6, 2013

Stephen Walther builds an entire ASP.NET MVC application from start to finish. This tutorial is a great introduction for people who are new to the ASP.NET MVC Framework and who want to get a sense of the process of building an ASP.NET MVC application.

Caption and Translate

    Sign In/Register for Dotsub to translate this video.