Grid View With Server Side Advanced Search Using jQuery DataTables In ASP.NET MVC 5

Our modal popup will finally look like this.

Step 3 - Adding Models with Entity Framework

The next step is to create a new Model (DTO) class named FacilitySite which will be used for getting the data from FacilitySites Lookup table which we created above with the database script. So, add a new class in the Models folder in Solution Explorer named FacilitySite and following is the code for that.

Right now, we have just added the Model class which will hold data for FacilitySites table, but as we are using Entity Framework for Data Access purpose, we will have to let it know that there is new table added on which data operations can be performed.

Update the Asset model as well, by removing the FacilitySite column which was of type String before and instead, add a new column named FacilitySiteId which will be foreign key in Asset table of FacilitySite table. The updated Asset model should be.

Step 4 - ViewModel Creation

We will also need to create a ViewModel class which will be used for posting the search criteria to server-side which will be controller action for performing the search. Let’s add the ViewModel then. Following is the code for the AdvancedSearchViewModel class.

Step 5 - Advanced Search Get Implementation in Controller

Navigate to Controllers folder and expand it. Open the AssetController.cs file, we will add a new get action that will be used to populate the AdvancedSeachViewModel and we will be setting the SelectList properties with data from their respective data sources for populating the Dropdown List controls on the advanced search modal popup.

Step 6 - Advanced Searching Post Handling in Controller

Our AdvancedSearch post action will be almost same implementation wise as was the implementation of Search action for Server Side Sort, Filter and Paging one, but there will be small change in action signatures for AdvancedSearch, it will now take 2 parameters which is quite obvious, one for maintain the DataTables state which was already there before as well and the new one will be the instance of AdvancedSearchViewModel class which will have the state of controls of Advanced Search Modal popup.

We need to update the SearchAssets private method which we created in the previous post about Grid View Server Side Processing, add the advanced searching database logic in this method, so this method will not take another parameter which is we know instance of AdvancedSearchViewModel,

Step 7 - Update DataTables Call Back action method

Now update the action as well which is called for handles the grid server side processing to accept the advanced search parameter as well and pass them to the SearchAssets method for more granular filtering, here is the updated code of the action,

Step 8 - Modal Popup Implementation for Advanced Search View

Now we will move towards the view part, as you can see we have last four properties of type SelectList which are there because we will have few dropdown list controls in the advanced form which user will be selecting from pre-populated values for searching the records.

The data-target="#advancedSearchModal" which we added in the html of Index.cshtml view will be referenced in this partial view, so create a new partial view under Views >> Asset named _AdvancedSearchPartial, for that right click the Asset folder under View and navigate to Add Item, then from next Menu select MVC 5 Partial Page (Razor),

Type the partial view name which would be _AdvancedSearchPartial in this case and Click the OK button,

And then open the file _AdvancedSearchPartial.cshtml and add the html in the partial view that will be displayed as modal popup when the user will click the Advanced Search button that we created in the Index.cshtml view, following the code of the advanced search partial view,

Final Step - Passing Advanced Search Parameters in Post

Finally open the Index.cshtml located in Views >> Asset and call the AdvancedSearch get action before the @section Scripts start for adding the Advanced Search Modal popup html in the browser which will be displayed when button is triggered, another thing to note is we have not specified anywhere about how the dropdown selected values will be posted with DataTables server side processing in the same action, though we have added the parameter in action but we haven’t changed anything specific to that in View, we will have to update the jQuery datatables initialization code for that, and specify the values for posting to the AdvancedSearchViewModel using data property for which we would have to define the property, so add the following code just after the line where we are specifying url for datatable which is "url": "@Url.Action("Get","Asset")", and after adding that final Index view code should be,

Our Index View would contain following code,

You can see that above, we have added a new function in our datatable View Model named refresh, whose purpose is to reload the datatable from server side using the Model of DataTables. We have written the event handler for Advanced Search Popup button that, when pressed, causes the datatable to be reloaded and in the AJAX call of it, we are passing the user selected search criteria from advanced search view as well using that data property of jQuery datatables.

Now, build the project and run it in browse to see the working server side Advanced Search using jQuery datatables and with server side filtering, paging, and sorting as well, in action.