Part 92 Ajax with asp net mvc

sparked 92 of asp.net MVC tutorial in this video we'll discuss using Ajax with asp.net MVC asp.net Ajax enables a web application to retrieve data from the server asynchronously and to update portions of the existing page so these partial page updates make web application more responsive and hence improves user experience we'll be using this table TBL students in the stem home notice that we have got student ID a name of the student and the total marks they have caught here is the sequel script to create and populate this table I'll have the script available on my blog in case if you need it now this is what we want to achieve by the end of this video we want to display these three links on a view so obviously when I click all we want to retrieve all the students from the database table and then display them when I click top three then I want to retrieve only the top three students by total marks and display them bottom three should display bottom three students and when we click on these respective links we don't want the entire page to be loading again we only want that portion of the view to be updated okay so there are several advantages of these partial page updates well this is the full list in our next video session but now let's continue with this example so the first step to achieve this is to create an ad or dotnet entity data model based on this table TBL students so let's a flip to visual studio here I have a blank asp.net MVC for application so let me first right click on the models folder add a new item let's add ad or dotnet entity data model and let's call this student model we want to generate our model from the database click Next and we want our connection string to be stored as sample DB context within the web code config file click Next so this should connect to the database and retrieve all the tables views and stored procedures we are interested in table TBL students so let's go ahead and select that and we want our models to live in models namespace click finish so this should generate an entity with named TBL let student but let's change the name to student let's build a solution so that the student entity class is compiled all right the next step is to actually add a partial view in a bit we'll understand how we are going to make use of that partial view so at the moment within views I don't have anything except web config file so let me first add shade folder here and I'm going to place that partial view within this shade folder so let's right-click on the shared folder add a view and let's call this underscore student and we want to create a partial view and I want to create a strongly typed view against student model and the scaffold template is going to be list so let's add so this should create student partial view so the model for this partial view is going to be ienumerable of students meaning the list of students I don't need this create new link there and then let's get rid of this extra th and then let's get rid of this TD which displays the action links to edit to view the details and delete because in the UI you know we just want the name of the student and their total marks okay so I'm going to get rid of this TD so basically what is this doing look at this here we are going to get a list of students the first TR here this place you know the heading that's named and total marks that's what we get with this piece of HTML and then what we are doing here we are using a for each loop looping through the model what is the model here it's nothing but ienumerable of students that's list of students and for each student we are displaying their name and total marks okay and what I'm going to do here is if you look at this table here it has got a 1 pixel so black border and then the background color here is silver so let's go and set those styles for this table so let's use the style attribute and set border to one pixel solid black and background color to silver okay so this is the partial view and in a bit we'll see how we're going to use it okay so that's the second step first step is to add the area dot identity data model second step is to add a partial view which is going to display this interface for us and now let's add a controller let's add a home controller and let's select empty MVC controller okay so within this MVC controller we have index view and then the class level at the controller level I'm going to create an instance of the sample DB context class so within this entity data model we should have sample dbcontext created so this class is going to help us to connect to the database so I'm going to create an instance of that class and if you notice this class is present in MVC demo dot models namespace so let's go ahead and include that namespace right here MVC demo dot models and let's create an instance of sample DB context let's call it D be create an instance of that and then I'm going to add three action methods here okay so look at this when I click on all we want an action method to respond and return us the list of all students similarly when I click top three we need an action method and when we click on bottom three we need an action method so I'm going to add an action method here so let's make a copy of this one and let's call this action method s all you can give it any meaningful name you want but then the return type of this method is going to be a partial view result not an action result okay and why are we going to written shall be result that's because look at this when we click on this all link and we don't want the entire view to be refreshed we only want this portion of the view to be refreshed so we are going to return a partial view result okay so here what I'm going to do is basically I'm going to create list of students and let's call this model equals so this DB object has got students collection which is going to give us the list of all students so DB dot students dot tool it should give us the complete list of all the students that we have in TBL students table now what I'm going to do is look at this the return type here is partial view result and how do we return a partial view result using partial view function and when we use partial view function you know we can specify the name of the view the name of the partial view and the model it consumes and if you look at the student you know this is the partial view that's going to display the list of students and what is the model it expects ienumerable of students nothing but list of students so within our controller I'm going to specify the view name as underscore student that's the partial view and what is the model the model object that we have created here okay so similarly I'm going to have a method for returning top three students let's make another copy of this one and let's call this maybe bottom three okay so top three we don't want all the students so what I'm going to do here is I'm going to use order by descending so we want the top three students so I'm going to order by order all these students by descending order but we need to specify based on which property do we want to order them in descending I want to order them by total marks in descending order and once we have sorted them in descending order take top three students and then convert that to a list okay so simple and straightforward link methods there okay and similarly I'm going to make an exact copy of this one and paste it right here and instead of using order by descending line I'm simply going to say order by so this will sort them in ascending order and we are taking the top three so this will give us bottom three students and this is going to return as top three whereas this action method is going to return us all the students okay so the next step is to actually design our index view so let's go ahead and add an index view so I'm going to right click on this index action method add view and we want the name of the view to be index and I am going to okay we are going to make use of rays of view engine and let's not create a strongly typed view let's write the HTML ourselves so let's click Add so this should add index view within the home folder okay let's get rid of that there so h2 what do we want to display we want to display students so h2 students and then the first thing that we want is these three links okay now we are going to use Ajax action link HTML helper okay and look at this to display this length we are using actually there are several overloaded versions of this action link helper but we are going to use the overloaded version which takes the link text as a parameter so this all is the link text that you see here and this all the second parameter is the action method that we need to invoke when we click on that link and the third parameter is the Ajax options we'll understand them in just a bit but let's first write that code here so at Ajax dot action link and if you look at this look at this there are twelve overloaded versions we are going to use this overloaded version so what is the link text we want all and which action method we want to invoke we want to invoke all action method within the home controller and then Ajax options so what are our Ajax options let's specify them here okay so if you look at this now on this view I'm going to have a div tag here and I'm going to set an ID for that and let's call this maybe div students okay so what I basically want here is when we invoke that all action method so you know this is the method that gets invoked and what are we doing here we are letting the list of students and passing them to this partial view and this partial view is going to you know loop through each student generate the student table for that for us and it's going to return that so when we invoke this all method we are going to get some HTML along with the data so where do you want to place that you know basically the output of this method within the index view where do you want to place it we want to place it within this div tag okay so that is the purpose of this div tag here and if you look at the Ajax options here look at this we are using three properties of this Ajax options object HTTP method so what HTTP method do you want to use to get the data do you want to do that by using a cat request or a post request we want to do that using a get request so HTTP method is get there and what is your update target ID obviously when you invoke this method we are going to get some data back so that data where do you want to put it on your view so what is the update target ID so basically that's nothing but they element ID way you want to place the data that you get okay and then the insertion mode so how do you want to place that data do you want to remove the content that's already there and then put the new content that you get if that's the case the insertion mode should be replaced okay so let's go ahead and specify these Ajax options here so Ajax options HTTP let's actually format this properly so HTTP method is going to be get request target update target ID that's going to be the ID this divided E and then how we want the data to be basically inserted insertion mode should be replaced or you can choose these other options instead after I insert before so let's choose replace okay so this should display the all link but we want to top three and bottom three and we need that you know symbol data so let's separator and to get that pipe symbol there I'm going to use a span tag and then specify that pipe symbol there I'm also going to use this style attribute and set the color to blue okay and I'm going to make a copy of this one because we need other links as well we need top three and bottom three so let's make another copy of that and then let's put this pan tag here okay so here we want the link text as top three and the method that we want to invoke is top three so within the home controller we have top three action method and then let's copy this name finally this is the third link so here bottom three and the action method that we want to invoke is bottom three okay and then let's use another div tag here and set the font family to area so there style equals font-family:arial and let's move this closing div tag to the end all right that's solder to it and that's one more step that we need to do basically for all this Ajax to work we need script files okay so we need to script files the first one is the jQuery script file itself so let me drag and drop the jQuery file and then the second script file that we need is jQuery the Ajax jQuery file we need is unobtrusive Ajax an app to see you - Ajax so let's drag and drop this here and then let's change this path to you still okay and it's very important that these script files are referenced in this order because this one depends on jQuery so jQuery should be reference first and then the jQuery dot unobtrusive you - Ajax should be referenced after that okay so let's save everything let's build our solution and let's actually run this now so we should navigate to index view and then it should display these three links there and when it first renders we shouldn't see any data okay so there is a compliation error the name aerial does not exist in the current context let's see what does that mean oh so font-family is area let's refresh that okay so when we click all we should get all customers there are all students basically when we click top three look at that we only get top three and we click bottom three we only get bottom three all right so if I right click on this page and view page source look at this page HTML is so clean we don't have any traces of JavaScript here okay we have the script tags here and then look at what is generated here for us for example if you look at this all link so here is the HTML for the all link so we have an anchor tag there and look at this data - Ajax equals true okay and data - Ajax method equals get and look at the mood replace because we want the insertion mode to be replaced okay so basically this data - attributes are used by this unobtrusive Ajax a script file and then it is issuing that Ajax calls to the server right and this is the student partial view code that's it for today thank you for listening have a great day

Channel: kudvenkat

Views: 251,563

Keywords: ajax, asp.net, mvc, example, mvc3, mvc4, @ajax, ajaxhelper, @Ajax.ActionLink

Id: B59skvlroyc

Length: 19min 9sec (1149 seconds)

Published: Sat Sep 14 2013