505 BIM User's Group

Central New Mexico's BIM Resource

I have recently shown you how to view and edit Revit models on the web without writing any code. I have also shown you how to filter the views using a very little SQL in your database. In this post, I will show you how, in a few lines of code, you can create a search box to filter the results in your pages.

Application Layout

In an MVC application, you have a model, controllers and views. As explained in an earlier post, The model holds the data from the table or tables selected. The controller sits between the model and view performing actions and responding to events which are sent to the model or passed to the view. The view is what you actually see when you load the page. the image below shows the layout of a simple Revit MVC Application.

Capture

I have a Revit mode, controllers for Rooms and Walls and views for the Rooms and Walls. There are separate views for each of the CRUD functions. There are other views, models and controllers that are created by .NET by default. Feel free to ignore these at the moment because we will not be using them.

To add filtering to our application, we will need to modify the Rooms View and Controller.

Rooms View

There are several views in the Rooms folder, but for our application we want to modify Index.cshtml. This is the view that returns the entire model – list of rooms in our database.  You can see in the code that the view creates a table with all the properties for each room in our model.

table

We want to limit the number of items in the Model returned from the controller using a search box. Let’s add the search box to the view. As in standard HTML, we can use a textbox and a button in a form. With MVC, however, we are using theRazor view engine so the code is slightly different.

@using (Html.BeginForm())
{
<p>
Find by name: @Html.TextBox(“SearchString”)
<input type=”submit” value=”Search” />
</p>
}

The code above should make sense if you are familiar with HTML. The only thing that stands out are the lines starting with the @ symbol. These are variables/expressions in Razor. The above code will create our search box.

box

Rooms Controller

Now that we have the form, we need to create the code in the controller that will handle the request. The first ActionResult in the code is the Get Rooms function. This is the code that returns the Index.html file we see in the view. The code below will make our search box work.

public ActionResult Index(string searchString)
{
var rooms = from r in db.Rooms
select r;
if (!String.IsNullOrEmpty(searchString))
{
rooms = rooms.Where(r => r.Name.Contains(searchString));
}

return View(rooms.ToList());
}

when we browse to the Index.html page for the first time, we will see all the rooms in the database. This is because the string searchString is empty. So rooms is equal to the contents of the entire database.

var rooms = from r in db.Rooms
select r;

Once on the page and having entered a value and clicked search, we have requested the Index.html page again, but this time with a value forsearchString. Now the controller populates the value of rooms with only those records where the string is in the name.

rooms = rooms.Where(r => r.Name.Contains(searchString));

The function always ends by returning the View (the one with the same name as the controller) and passes it the values of our rooms variable – either all of them or a filtered list.

the images below show rooms filter by the word Master and even by just two letters. The code above uses Name.Contains not Name.Equals. this allows us to get results without exact matches.

Master

ContainsEN

This little bit of code has greatly improved our application. The code can be modified to search on additional fields and added to other views – like the Walls Index.cshtml view.

Views: 40

Comment

You need to be a member of 505 BIM User's Group to add comments!

Join 505 BIM User's Group

© 2019   Created by Bruce Gunderson.   Powered by

Badges  |  Report an Issue  |  Terms of Service