Orchard Create Projection or Search Based on Filtered Dropdown Selections

Question

I have, what I think is, a simple feature that I am trying to add to my Orchard (1.6) site, but I can't find any tutorials or instructions on how to do it. I have a custom type called "Office" and each office has a custom field called "State" indicating which state the office is in. I actually designed my Offices as a custom part in code with specific properties such as State on it, but I "think" it's the same as if I added the State through the Admin interface as a field on the Office content part.

Now, I can create a basic projection to show all the offices with a simple filter of "Content with type Office" to display all offices. However, what I want to do now is to have a drop down list at the top of the page that says "Filter by: [-SELECT STATE-]" with a list of all 50 states. When the user selects a state, the page should refresh and display just the offices in that state.

This is where I'm stuck. Should I do this through the code, or can I do this through the Admin UI? If through the code, should I model it after the Orchard.Search module (which I tried to do, but I am completely lost). If I can do it through the UI, do I use projections? If so, do I have to create 50 separate projections (one for each state)? That seems extremely time consuming to create and maintain.

Any help is GREATLY appreciated!

FYI, the site at http://ktowneric.com/listings/search (which uses Orchard) is very similar what I am looking for, and the developer stated he used projections, but I can't seem to figure out how he did it.

Answer 1

You can definitely use a projection. If you notice when you use the search function on the page you referenced, the inputs are formed into query string values. You can use tokens to grab the values from query strings to use in your projection filter. For example, if you're using fields as you stated, then you just add a filter for that field and in the value field use {Request.QueryString:State}. Or, replace "State" with whatever key you're using for the query string value.

That solves your projection issue. You will need to build a search form that would look something like this...

<form action="/search-results" method="Get">
  <select name="State">
     <option value="OH">Ohio</option>
     ...all the states...
  </select>
  <input type="submit" value="Search" />
</form>

"/search-results" could be a projection page or any content that has the projection widget present. You could build the form as a widget that you can place somewhere, or for testing purposes, you could just paste this html into an html widget to try it out.