by

AJAX with ASP.Net MVC – Part 1

Hi Friends,

In today’s discussion we’ll be looking @ Ajax implementation with ASP.Net MVC. So, before jumping to these let’s see the script organization which in our visual studio solution tree.

103th

 

Now, here by default Visual Studio put all the scripts under one Scripts folder, so obviously you could go ahead and organize the same as your way. you could update the versions of default scripts provided in there with the help of powershell command. Now, let’s start ajaxify our home page. currently, as shown below the search is pretty simple and synchronous.

104th

Currently i have limited set of movie data, now let’s go ahead and seed data with anonymous movie and director, just to have a hefty set of dataset. so for doing this i’ll go to configuration file and simple run a loop 100 times and populate the data in the db, thats it as shown below

105th

 

Now, i just need to update the database using powershell command as shown below

106th

Now, i should be able to see more data on my home page.

107th

 

Now, currently as per query my home page is listing only 10 records, but thats ok if go and search with anony_movie_5

108th

this is listing the correct record, but the fact is am losing the scroll position completely because it’s re-drawing the complete page rather than that searched portion. So, to fix this we’ll be using Ajax.BeginForm, Ajax.BeginForm() is very similar to HTML.BeginForm(). It writes out the form tag and we can instruct what controller, actions and route.

109th

so, here with that ajax options we can tell what actually we want to do, here i have also specified the div to be updated, so that it will draw only that portion which is required. So, basically this div will delimit the area which we want to update.

110th

Now, when i do the above changes and refresh the page, search seems to work but, page gets broken, because entire page is getting redrawn means page is getting embedded inside a page, and this will keep going on. so, basically here what happened is client side worked perfectly, but server side didn’t work appropriately, so server side should know how to respond to respond ajax request, and in case of ajax request how to render the view.

114th

so, to fix the same, i need to do below mentioned changes, 1st i need to do make a partial view and render the same from index view as shown below.

115th

Now, in order to decide from the server side, whether it’s an ajax request or not, one small change i need to do in the home controller as shown below:

116th

Now, with this code in place, let me just go ahead and refresh the page.

117th

However, we could go ahead and do the same async search with our custom script with the form tag. so, if you see the page source of the page, you will find data- attribute which is basically html 5 specifications,  so i could go ahead and add as many data- attribute as shown below. so, this will also work when java script is disabled.

111th

112th

 

so, here i have added some of my custom data- attribute and and action method just to make sure that this form has an action attribute, so am using the url helper to generate a url to a controller action. Now, we need our custom script to read these data- attributes. so, for that i’ll simply add one javascript file in the scripts folder and call it movies. so, this javascript file i’ll be using everywhere so i’ll include the same in layout page. However, there are other ways also to include javascript in the pages like with bundling and minification. But, am skipping that topic for now. I’ll cover the same in different segment. so, below is the custom script doing the same job. Why used is this, because it’s easy to extend and update the same.

118th

so, with this i would like to wrap, in the next session, we’ll see more ajaxification and more about using paging and all. Till then, stay tuned and happy coding.

Thanks,
Rahul
Happy Coding