How to setup Grid.Mvc to work with AJAX in your ASP.NET MVC project

Hello!

I recently had to use the free ASP.NET MVC extension Grid.MVC in a project at work. By default it doesn’t support AJAX. That is kind of restrictive if you don’t want your webpage refreshed each time you select a new page. In this guide I will show how to install and properly configure your Grid.MVC to work with AJAX. If you have previous experience setting up similar extensions, you can directly take a look at the demo HERE.

  1. Installation
    The simplest way to get the required files is by using the NuGet package manager. You are going to need three packages: Grid.Mvc (provides the core functionality), Grid.Mvc.Redux (fixes bugs) and Grid.Mvc.Ajax (builds on the core and allows the grid to work with AJAX calls). Simply look for Grid.Mvc.Ajax and install it. It will automatically install the previous two.Notice that after the installation is complete some files would’ve been added to your project. You can find them in the following folders: Content, Scripts and Views/Shared. I suggest you move the files in the first two folders to their own separate directories. Then include the scripts and styles you’re going to use in your BundleConfig.cs (you’re not required to but it certainly makes things more convenient).Because of dependencies Grid.MVC must be loaded after jQuery so make sure you render its script bundle bellow jQuery. Styles are usually loaded in the head element of your html so it’s safe to place them there.
  2. Configuration
    For convenience I’ve written a helper that handles most of the Grid.Mvc work on the server. We’re going to use it bellow.Now, to get it all going, we need:
    a) a partial view where the grid is configured;
    b) an action that returns the partial view with the grid;
    c) an action that is called by the grid for paging, sorting or filtering purposes;
    d) to „ajaxify“ the grid on the client.
    First we’re going to set up items b) and c).

    A) The Controller

    The first method we’re going to write is the one that returns the partial view (a). You can find it in the HomeController.cs inside the provided demo under the name GetGrid(). We’ll be calling it from another view so better apply a [ChildActionOnly] attribute to it. In the method’s body we need to get the data as IOrderedQueryable<YourModel>. Pass the data to the GetAjaxGrid() method of your GridMvcHelper. The resulting object of type AjaxGrid<YourModel> is the object you need to pass to the partial view where your grid is configured.

    The second method we need is the universal action your client will call on Paging/Sorting/Filtering. In the demo you can find it again in the HomeController.cs under the name GridPager(). Here we’re using the GetAjaxGrid() method again but this time with a second parameter – page. This time we will pass the result to the GetGridJasonData() method of the gridMvcHelper. The resulting json is then sent back to the client to update the view.

    B) The grid view

    Here you will configure the grid itself. In the demo you can find the corresponding file in ~/Views/Home/_FootballersGrid.cshtml. Notice the usings for GridMvc.Html and GridMvc.Sorting. The views’ model is an AjaxGrid<YourModel> – the same type we passed to the view in both actions, remember? You can find more about how to configure the grid in the Grid.Mvc documentation. It’s important to give your grid a name.

    C) The client

    In the view where your grid will be displayed (in the demo: ~/Views/Home/Index.cshtml) you need to do three things: call the action a) (look above), render the Grid.Mvc scripts (look in the BundlesConfig.cs to see which files must be included) and „ajaxify“ the grid. Now take a look at ~/Scripts/Application/home.js. The ‘pageGrids’ variable is initialized by the GridMvc plugin. To ensure it’s properly populated, we’re calling $(‘.grid-mvc’).gridmvc();  Then, after accessing the grid by the name we’ve given it in B), we will ajaxify it with an object that contains getData and getPagedData properties, each pointing to the url of the action c).

  3. Conclusion

    This is all you have to do to get the great GridMvc plugin to work with Ajax. Have fun!

  4. Resources

    The demo repository

Advertisements

„Football Stats“ – a Telerik Academy educational team project in object-oriented programming with C# and WPF

Hello, dear readers!

It’s high time I published an elaborate review of a team project I recently had the pleasure to take part in. First off, let me introduce you to the preceding events.

  1. Introduction
    Perhaps many of you already know about my current occupation as a student at Telerik Academy. In the last 10 months I had the opportunity to attend courses in computer programming along with hundreds of other students united in the effort to become skillful junior software engineers. While we had been under the impression that we were making quick progress it was not until the recent months that we finally began to see a bigger picture – one not strictly inside the world of algorithms, but rather in how one can develop software that can solve more than a few tasks and do that in a systematic way.
    The OOP team project was the third team project I had been involved in since starting my education at the Academy. Of the other two only one involved actual programming. (If you are interested you can read more about it here (in Bulgarian): LINK) So, being only the second one, it was bound to be very different than the first.
  2. Task
    Our task was to „design and implement an object-oriented application by choice.“… but not a game! We had roughly one month to complete the task and fulfil the requirements, all of which you can read here: LINK The biggest surprise came from the requirement to implement a GUI. For that we had to use XAML/WPF – a technology completely unknown to most students. As it proved later, it was  the hardest feature to implement. But now I think it’s time to introduce you to… 
  3. The team

    It was the Academy that picked the teams and the students had no controll over who they were going to work with. While not completely random, each team consisted of five students, selected by their performance in previous exams. I got picked alongside Martin Anastasov and Martin Marinov.
    Me and Martin Anastasov

    Me and Martin Anastasov

  4. The concept – what we wanted to do
    A blank sheet of paper is a dangerous adversary. The program we wanted to create had to be both impressive and relatively easy to develop, having in mind the close deadline and our own limitations as programmers. Unfortunately we went for a plan for something big, not taking into account the difficulties it posed and the sheer scale of the project we had in mind.
    The night before our first team meeting I came up with an idea after two days of fruitless thinking. Considering myself an educated football fan I spend a lot of time browsing sites and meddling with statistical data. So I told myself: „Why not try and create a software that keeps information about football competitions and displays information about players and clubs while providing the user with well presented stats?“ When I proposed it to my teammates they accepted it eagerly.
    So, to sum it up, our software was supposed to keep data about competitions, seasons, clubs, players, staff members and possibly about matches as well and at the same time provide complex stats analysis and its visualization. Perhaps you’re already getting the idea that such task could hardly be accomplished in time and competently by a team of budding programmers. Nevertheless, we managed to develop a stable program with basic functionality and some nice GUI and in the end we were fairly satisfied with our effort.
    Main Window

    The Main Window

  5. Technologies used: WPF/XAML, C#
  6. Project management
    We used SVN source control system. The project is hosted on GoogleCode. You can find the project repository here: LINK  We held a few live meetings, but used Skype as our main method of communication. To organize our work, we assigned most of the tasks in such a way that no more than one person would work on a single one. I worked on the project architecture and made extensive use of interfaces to „shape“ the project’s class hierarchy and functionality. My teammates developed some of the classes and the exception handling. I spent the biggest amount of time studying XAML as neither of us had previous experience with any kind of UI technology and GUI was a required feature of our program.
  7. Features
    The final version of „Football Stats“ has the following features:
    – creation of players, staff members and referees;
    – creation of clubs;
    – display of detailed information about players and clubs;
    – adding/removing players to/from clubs;
    – provision of statistical data for selected clubs;
    – save/load to/from text file;
    – GUI.
  8. Classes and methods
    Let me explain in short our class hierarchy.The basis of the football world are the persons – players, coaches and other members of the staff. Together they form the class hierarchy Persons. Each person has a name, date of birth and nationality. Players and coaches are club affiliated unlike referees who aren’t. They also have a wage. Each player knows the positions he can play in and each staff member knows if he is a coach, a manager, an owner etc.
    The club class is an organization of players and staff (the club affiliated persons). It holds a list of players and a list of staff. In the Club class we put the majority of methods that return statistical data – like average age, average/max/min wage, if the club has an appointed manager or the position is vacant, how many players can play in certain position and so on.
    PersonsClassDiagram

    One of the class hierarchies

  9. User experience and GUI
    The main window presents the user with four options – to create a new player, to create a new club, to show info about players and to show info about clubs. What they do is pretty self-explanatory but here are some screenshots:
    The Create Person Window

    The Create Person Window

    – The Player Creation window requires the user to fill all the fields otherwise an error message would appear instructing him to provide more information. The drop-down menus for player/staff position become enabled/disabled depending on the type of person selected through the radio buttons. After successful creation, the person is added to a static list of persons you can find in the World class. From there the person is visible to all other classes which allows easier access and manipulation;
    – The Club Creation window provides a minimalistic interface. The user is only able to enter a name and nationality for the new club. Upon creation, the club is added yet again in a static list in the World class;
    – The Show Persons window displays a list of all persons, whether club affiliated or not (referees). When selected, verbose information about them appears on the right side;

    The Show Clubs Window

    The Show Clubs Window

    – The Show Clubs window is divided into three sections. The leftmost shows a list of all Clubs currently loaded in the program. When the user makes a selection, the two other sections become active. The middle one will show comprehensive stats, displaying the name of the club, its active manager, the total number of players, average wage etc. The right section is reserved for the players currently affiliated to the club. When selected, players can simply be removed by clicking the corresponding button which will remove them from the club’s players list and change their club affiliation to „Free Agent“. The Add button opens a new window. There, all free agents are available for selection and addition to the club.
    Changes to the data are automatically saved on almost each action or on closing a window. No dedicated save command is available. The data is exported to a text file. On program initialization the data which is stored in text files is parsed into the memory.

  10. Project defense and marks
    The defense went well. The project received very good marks – 3.6 out of 4. A short note about the program was included in the Telerik Academy Newsletter.
  11. Personal satisfaction and conclusion
    The project started ambitiously, but our inexperience in software development meant that we had to abandon the initial ideas we had and cut a lot of planned features from the final product. Nevertheless, I’m very satisfied that midway through development we realized we needed to create and integrate small but functional features one by one, rather than working on many features simultaneously. Later, when I got familiar with the agile development methodologies I found out that back then we’ve been on the right track, coming to the conclusion by trial and error approach.

It has become a rather long post and I hope it didn’t bore you to death :).  Here’s the link to the repository again if you want to take a more in-depth look. Please bear in mind that „Football Stats“ is an educational project which main objective is more the promotion of teamwork skills rather than the development of high quality software. I’m well aware a lot of things could’ve been done better and I look upon this work merely as a small step on a long journey.

Till next time!

The free book „Fundamentals of Computer Programming with C#“ translated into English!

IntroProgrammingToday the programming-oriented Bulgarian literature has reached a new major milestone!

The free book „Fundamentals of Computer Programming with C#“ has finally been released in English. The combined work of over 20 authors serves as a great guide to beginners and will as well help experienced software engineers with practical advices and numerous examples. The book covers a wide area of topics starting with fundamental concepts such as Loops, Conditional Statements, Operators and Expressions and continues with Object-Oriented Programming, Data Structures and Algorithms to allow in-depth familiarization with the C# programming language and programming as a whole. The book contains 26 chapters.

Bonus materials include:
– Mind Maps;
– Presentations;
– Live Lectures Video Recordings;
– Problem solving guides;

The official site of the FREE Book: http://www.introprogramming.info/

You can download the book as PDF, DOCX or read it directly online.

As a Telerik Academy student (http://academy.telerik.com/) I highly recommend this book as it helped me make my first step into programming.