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

How Do I: Work with Data in ASP.NET MVC Partial Views?

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] [Chris Pels] Hi, this is Chris Pels. In this video we are going to see how to work with data in partial views in an MVC application. So, let me get started—we'll set up a sample application here. And let's just call this partial view data. And we're going to do the sample in the VB, so let's put a little VB extension, so when you get the sample code it will be clear which one this is. And let's just go down here, and we'll put this in a folder called, "VB." And we're not going to create a unit test project for the demos. So let's say no there. Now, we need a little data to work with. So, what I'm going to do is quickly set up a couple classes in our model and also set up what's called a view model for a sample view we're going to use. So, let me go down into the controllers—here we go. And let's just create a new controller. And we're going to call this, "Demo." And add that, and then we'll need to go over and add a corresponding view for this. And so we'll go down here into the views, and let's add a new folder. And we'll just call that, "Demo." And then let's add an index view into the demo folder. And that will match the index action that you see here in our controller. And to do it we'll just add that. But we're going to strongly type it; we'll come back and do that in a moment. So, now we have the controller in the view, and let's go over here into the model and create a few quick classes. So, let's first create a little customer class. So, we'll add a class in here, and we'll call it, "customer." And—there we go—customer. And inside this let's just quickly put a couple properties in here. Let's put the customer name. And we'll put that as a string, and let's put the city. And we'll put a city as a string as well. And let's just put 1 more out— almost got the property there; let's just add that in—PROP. There we go, and now let's just add the state. And we'll put the state, and we'll put that as the string as well. And the purpose there is just to have a couple pieces of data that we can work with. We're going to go down and create our view in partial views and so forth. And let's—okay—there's one set—let's just add 1 other class into this. And let's just call this in order. And inside the order—let's just put an order date. And date—so let's just make this a date. Okay—and what else—? Let's just put another string—we'll call it order status. And we'll just call it status as a string. Now, I know normally we might make this a look up table on the light, but, as I said, all we're trying to do is set up data here. And let's just make 1 more, and we'll call this—let's call this order detail. And inside this—a couple properties—let's just put one called description. Description as a string. And last, but not least, let's just put quantity. And we'll make this an integer. All right, so now we have a couple classes in our model. And what I want to also set up in here is what we call a view model. Now, if you're not familiar with the concept of a view model, there's another video in this section that covers the concept of the view model, but, essentially, it's in that layer of abstraction between your models and your view. So, I'm just going to put these in a separate folder. And, let's see, this is called demo, so if the view is called demo that is— so let's name our model so it's something similar to our view names that we can make that connection. And we'll just call this demo view model. Okay—we'll add that one in. So now we need a couple properties in here that will contain the data that we'd be passing from our controller down to our view and partial views, which we're going to create in a few minutes. So let's put a couple properties in here. And, see the first one we'll put in her as—we'll call it customer as a customer. And, let's see, then we'll have 1 order as well—we'll just make it public property for the order. And then the order would have some order detail, but I have multiple order details. So let's just make that a list. And we'll put order detail as in this one—we'll make a list of order detail. Okay—so, as I said, this is just going to provide a layer of abstraction between the data, in this case, 3 classes in our model and the view where we're going to use it. And we have a nice little package that contains all of the data that need to pass down. All right—so let's just save this, and I'm going to close out a few of these windows here. We won't need to look at these—at least not right away. So, I'll just clean up the screen a little bit more for you. And now let's go down and start to work with our view a bit and create some data. So, in order to work with a view we need some data, so let's go over here in our controller. And normally we would get the data from the database—maybe using the entity framework or link to SQL or whatever and retrieving the data, but we're just going to hard code a few instances of our classes from our model here so we can keep it simple for the level. So, let's see, we need a customer, so let's just—dimension. Let's just call it "cust" as a new customer. And then we need to set some values in there—the customer name, and let's make this— let's see—we'll call it Guinness—N-E-S-S—there we go. And the city, and we'll put that equal to Dublin. And, let's see, what else do we have in there? We have the state—there is no state; it's really a province. For lack of a better—we are just going to put Ireland. It's not really the state, but you know what I mean for this. Okay—now, what else do we have? They had the order, so let's just dimension an order. So, we got—oops—there we go—order. Okay, let's just extenuate a new instance with that right there. And then we have our order, and what do we have in here? We had the order date, so let's just set that equal to date.now— actually we'll make it UTC.now, so there's the order date. And we have the status, and let's just make that pending. All right, now what else did we have there? We have the order details, so let's create that— 1 as a new order detail—there we go. Oops—there we go. Say order, detail, 1, dot—we have description. And we had this, and we'll have 6-pack. And, what else did we have—quantity in there, I believe. There is is—quantity. And we're having a big party, so let's order 100 or 1,000—1,000—yeah, 1,000 6-packs. And that's for this week's party, so we want to have a 2nd line item in here. So let me just copy and paste to speed up things for us. And this—we're going to make this one—put cans in here. And in this one—this is a little smaller party—so let's just have 50 6-packs. So, now we need to put that data in our view model. So now we need to go down to here—dimension—and we'll just call it view model. That's new, and let me go with demo, view model—there we go. There's a new instance of that. Now we take our view model, and we have our customer. And we're going to set that equal to our "cust," and we have our view model dot— let's see—we had our order. We'll set that equal to our order. And last we had our order detail. Now, here—this is a list—so we need to add both our order detail items. So there is number 1. And then we go view model. And there's our order detail, add, and let's add our second order detail item. Okay—and now we need to return this or pass this to our view. There are a couple ways we can do that; we could assign it to the viewdata.modelproperty, or we can pass it here—one-way return—new view. Let me just scroll down the intellisense, and there you can see you can pasture a model as an object. You know—you can also pass the name of the view, but we're using index which matches the name of the actions, so it will automatically go down to our index view. So, what we want to do is—there's our view model. WE want to pass our view model down to our view. So now we have the data all set up, and let's go over here to that view and take a look at how we would work with that data here in the view. And now the first thing we need to do with our view is to strongly type it based upon our view model that we just created, and we're going to do that manually. Let me show you how you would do that just in case you're not familiar with this. If we were to use the little wizard now—if we were creating another page we can check this box, create a strongly typed view, and then we can select which type we want to base the view on. And in this case we need to do our demo view model. And, in fact, while we're here let me just copy this. It will save a little typing. We're going to cancel out of this because we're not going to create another view right now. We already have our index view. But I also wanted to show you how you do this manually so to speak. And what you do is up here we type it by the—in the instance of the view page class— we say what type of data there is in the model. So we just put up our demo view model class. So, that strongly types our index ASPX view. So, I'll save that, and now we need to create several partial views. So, let me go over here to the demo folder. And I'm just going to put them in a different folder called partial— You don't need to do this—this is just a little organizational issue in terms of keeping them separate. Now we're going to create 3 partial views—1 for each type of data in our model up here— customer, order, and order detail. So, we'll go in here to create a new view. We'll check partial view, and let's just call this one customer. And we'll want to strongly type this based upon the customer class. So, we'll go down in here and pick that. And let's just have it create a little details—content. That will just save us some typing because we're really interested in focusing on the data here. We'll add that in here—you can see it's displayed our data. And now let's go over, and we'll create 2 more—1 for the order. So in here we'll call this one order. And we want to strongly type it as well. And it's a partial. And there's the order. Let's just—also, let's just do a details. Add that in, and then the 3rd one we're going to create is for the order detail. In here, we'll just call it order detail. And partials for type, order detail, and this will be a list because remember there are one too many order details. So I'll just add that in. And then we should have all 3 partial views, and we need to go back over here. Now we need to put those partial views inside of our index page. So, now we need to render our partial views with inside our main views. So, let me just first give us a little different title. And we haven't—let's just open up the webpage. We haven't done that yet; let's just make sure everything is working so far. So, we're going to open up the demo page. And in this page we should just see our title order information—which we do. So—okay—so far so good. Now we need to have the 3 partial views. So let's do the customer information first. Let's create a <div>. And inside here we need to render that partial view. So, we'll go HTML.renderpartial. And then it first needs the name of the partial view. So, let's see—go to the root, and it's in views/demo/partial. And its name is customer.ASCX. So that's the name of the view, and now we have to pass the data for the customer down to that partial view. Remember that we strongly type the customer partial view with our customer object from our models, so now we need to make use of the second parameter that you can pass to a partial view. And down here you can see that's the model as an object. Now, this is where our approach with the view model comes in and makes it really easy to do. So we need to go to the model, which is an inherent object here in our view. And then inside that model, which represents the demo view model class— because remember we strongly typed this view— you can see we have easy access to our 3 sets of data. In this case we want to pass the customer data down to our partial view. So, let's take a look at the page. And we should be getting that customer data passed right down to our customer partial view. And page rendering—it opens up here. And, indeed, there we do have our customer information being passed down to our partial view, so you can see that's a very clean little design here. And it allows us to get the data down to each of our partial views pretty easily. So let's go ahead and put in the other 2 partial views. And let's do HTML.renderpartial. And let's see what—we'll put the order information next. So we go to views/demo/partial, and order.ASCX. Now we need to pass down the data for that. So we'll just take the order. And—actually I am just going to copy and paste this one because order detail—saves us some typing. We'll just put detail in here. And we also want to pass down the order detail. So now let's take another look at our page now that we've added the other 2 partial views. And we are getting here our order information from our order and the order detail down below. Now 1 thing we're pointing out is that you can use the principle we have here of packaging up the data in our view model class— in this case the demo view model class—strongly typing our view. And then inside of the view, passing the appropriate sets of data down to our partial views can be applied if you even have nested partial views. So, let's say, for example—the order detail has some child partial views, we could package up the data, pass down the order detail data through the model as we've done here to the order detail partial view. And then, in turn, the order detail view could pass pieces of data or sets of data down to child partial views within that. So it's really a hierarchal model that can go on as much as you need to depending upon how you have your site set up. So, I encourage you to download the SA-MP source code that comes with the video. There's a C-sharp version in addition to the VB we did here in the demo. And then we can use that as a basis for working with data in your own partial views. This is Chris Pels. Thanks for watching this video on working with data in partial views in an MVC application. [Microsoft ASP.net] [www.ASP.net]

Video Details

Duration: 20 minutes and 56 seconds
Country: United States
Language: English
License: All rights reserved
Genre: None
Views: 5
Posted by: neudesicasp on Sep 16, 2013

In this video Chris Pels shows how to organize and pass data to partial views in an MVC application. A sample MVC application is created that contains domain models for several business entities as well as a view model that packages instances of the classes. A demo view is then created along with several partial views, all of which are strongly typed and make use of the view model class. The partial views are then added to the demo view and the instance of the view model is used to easily pass the appropriate data down to the partial views. Finally, the uses of the concepts implemented in the sample in a more extensive MVC application are discussed.

Caption and Translate

    Sign In/Register for Dotsub to translate this video.