Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • FarmFreshCode 225 posts 422 karma points
    Jun 10, 2011 @ 20:29
    FarmFreshCode
    0

    Front-end Search for Members & Filter Results based on a value

    Hello Everyone! (Im using umbraco 4.7)

    I am trying to make my Members Directory more user friendly. Currently I have some Razor script that spits out all of my members and their various bits of info in a list as shown below in the darkened areas. What I would like to do (shown the bright area) now is add in a Search Field, and Quick Filter drop down list (so I can quickly filter Members by "department").

    I don't need these 2 elements to work together in anyway, but I would like to be able to search for "John" and have all of those members show up. Or use the quick filter to select "Social Work" and see a list of members that are associated with that Department.

    Right now I have the following code in my Razor Script:

    <umbraco:Macro runat="server" language="cshtml">
      @using umbraco.cms.businesslogic.member
      @{
        var memberId= HttpContext.Current.Request.QueryString["id"];
      }
        @if(memberId != null) {
          var member = new Member(Convert.ToInt32(memberId));
       var facultyFname = member.getProperty("facultyFristName").Value.ToString();
          var facultyLname = member.getProperty("facultyLastName").Value.ToString();
          ...ect 
    <!--Display a Single Full Profile Page with values below-->
    <div>INSERT FULL PROFILE INFO</div>


    else {  

     <div>ADD SEARCH FIELD STUFF HERE</div>
        var members = Member.GetAll;   
        foreach(var item in members){
          var facultyFname = item.getProperty("facultyFristName").Value.ToString();
          var facultyLname = item.getProperty("facultyLastName").Value.ToString();
          ....ect
    <!--Display all the Members and Values below-->
    <div>INSERT QUICK LISTING</div>
      }
      }

    </umbraco:Macro>

    The area of importance is the second half of that script (after the "else"). Unfortunately,  I dont really know how to effect the list of Members once I have grabbed them all. Has anyone done something like this before that they wouldn't mind sharing? Help on either one would be great.

    **Minor note, I'm also having trouble getting .OrderBy to work. Is it possible to sort the list alphabetically by facultyLastName?

    Thanks!

  • Bo Damgaard Mortensen 719 posts 1207 karma points
    Jun 10, 2011 @ 20:56
    Bo Damgaard Mortensen
    0

    Hi there :-)

    In the else { } statement you can check for a postback and then grab the search querystring.

    Maybe something like this could do the trick:

    else {
     if(IsPost) {
      var searchString = HttpContext.Current.Request.QueryString["searchString"];
      foreach(var item in Member.GetAll())
      {
       if(item.getProperty("facultyFristName").Value.ToString().Contains(searchString))
       {
        // We have a match
        <p>@item.getProperty("facultyFristName").Value.ToString()</p> 
       }
      }
     }
    }

    Above code is not tested at all - written directly in the editor.

    Let me know if it works ;-)

    - Bo

    P.S: I think you may have a spelling error in Firstname (FristName)?

  • Bo Damgaard Mortensen 719 posts 1207 karma points
    Jun 10, 2011 @ 21:04
    Bo Damgaard Mortensen
    0

    Also, for the filtering, you should be able to use the ASP.NET Membership API. Here you'll find the method "GetUsersInRole()" in the Roles class. This returns a string array with all the loginnames in a given role.

    Of course, this depends on the structure of your Member section in Umbraco as "Legal studies", "Deans Office" and "Social Work" all have to seperate roles :-)

    Edit: A link to the method I mentioned: http://msdn.microsoft.com/en-us/library/system.web.security.roles.getusersinrole.aspx

  • FarmFreshCode 225 posts 422 karma points
    Jun 10, 2011 @ 21:10
    FarmFreshCode
    0

    @Bo Mortensen thanks for posting back. I'm affraid I wasn't able to get your script to work so far. I'm extremely new to Razor so I'm not sure if I'll be able to troubleshoot it very well yet myself. Thanks for pointing out the typo tho.. fixed.

  • Bo Damgaard Mortensen 719 posts 1207 karma points
    Jun 10, 2011 @ 21:13
    Bo Damgaard Mortensen
    0

    All good! :-)

    Did you get any errors when trying to save the script?

  • FarmFreshCode 225 posts 422 karma points
    Jun 10, 2011 @ 21:15
    FarmFreshCode
    0

    And yeah.. I've looked at the Roles thing.. but I wasn't really planning to have these members have any roles really at all. 99% of them won't have anything to do with the site except for updating their profile page on their own. (hopefully ;-) ) If that turns out to be my only solution then I guess I can do that.. but I was hoping to just be able to filter based on a specific value

  • Keith Jackson 183 posts 552 karma points
    Jun 10, 2011 @ 21:16
    Keith Jackson
    0

    Generic .net stuff that may or may not help here, but if GetAll() is returning an enumerable then you could use a query statement to search through the collection, for example...

    var results = for o => o.getProperty("facultyFristName").Value.ToString().Contains(searchString) in Member.GetAll() select;

    // Loop through the results collection to show on screen

    I'm writing flat from memory so please excuse bad syntactical errors.

  • FarmFreshCode 225 posts 422 karma points
    Jun 10, 2011 @ 21:18
    FarmFreshCode
    0

    No errors when I clicked "save" on my template when I tried working with your script.. just broke it when I refreshed the page on the front-end..

  • Bo Damgaard Mortensen 719 posts 1207 karma points
    Jun 10, 2011 @ 21:23
    Bo Damgaard Mortensen
    0

    Alright - did you get any errors on the front-end then?

    Working with members, I think it would be best practice to use Member Groups and Member Types to create different kinds of Members, regardless of access to Umbraco :-) I could be wrong thought. That's just how I like to work with members.

    - Bo

  • FarmFreshCode 225 posts 422 karma points
    Jun 10, 2011 @ 21:40
    FarmFreshCode
    0

    Well I have a pretty extensive list of MemberTypes set up.. and I had planned to just allow my Members to check off the "Departments" that they are associated with inside a series of checkboxes that I have set up. In my graphic you can see David Johnson shows "Dean's Office, Legal Studies" under his name.

    I'm honestly not that sure how to even set up the form fields to trigger the postback. I have included by basic form fields in the script below.. How can I intergrate this into something like your solution? I still want to show all Members at the first load of the page..

    <umbraco:Macro runat="server" language="cshtml">
      @using umbraco.cms.businesslogic.member
      @{
        var memberId= HttpContext.Current.Request.QueryString["id"];
      }
        @if(memberId != null) {
          var member = new Member(Convert.ToInt32(memberId));
          var facultyFname = member.getProperty("facultyFirstName").Value.ToString();
          var facultyLname = member.getProperty("facultyLastName").Value.ToString();
          ...ect  
    <!--Display a Single Full Profile Page with values below-->
    <div>INSERT FULL PROFILE INFO</div>
     
    }  

    else {  

    <div>
      <form action="" method="post" id="searchFaculty">
        <div id="searchField"><input name="searchdirectory" type="text" />
        <input type="submit" name="search" id="search" value="Submit" />
        </div>
      
        <div id="quickFilter">
          <select name="DepartmentListings">
            <option selected="selected">Quick Filter</option>
            <option>Dean's Office</option>
            <option>Legal Studies</option>
            <option>Social Work</option>
          </select>
        </div>
      </form>
    </div>
        var members = Member.GetAll;    
        foreach(var item in members){
          var facultyFname = item.getProperty("facultyFirstName").Value.ToString();
          var facultyLname = item.getProperty("facultyLastName").Value.ToString();
          ....ect
    <!--Display all the Members and Values below-->
    <div>INSERT QUICK LISTING</div>
      }
      }

    </umbraco:Macro>

     

  • Robert Foster 459 posts 1820 karma points MVP 2x admin c-trib
    Jun 10, 2011 @ 21:49
    Robert Foster
    0

    If you want to keep your razor script clean and move the logic and form handling to the "backend", then you may want to consider creating an MVC3 project and take advantage of the inherent form processing etc...  I did this for the last project, and used the excellent MVCBridge component to tie it in with Umbraco...

    Was a lot simpler than trying to create complex Razor scripts through the Umbraco interface... 

  • Bo Damgaard Mortensen 719 posts 1207 karma points
    Jun 10, 2011 @ 21:53
    Bo Damgaard Mortensen
    0

    Hi again,

    You need to point your form's action attribute to the page where the Macro is placed on. I.e: http://www.yoursite.com/members.aspx

    the <input name="searchdirectory" ... will be your querystring :-) You can fetch this like this:

    var searchString = HttpContext.Current.Request.QueryString["searchdirectory"];

    Best practice would be to check if this is null or empty before processing.

  • FarmFreshCode 225 posts 422 karma points
    Jun 10, 2011 @ 22:05
    FarmFreshCode
    0

    Thanks.. ok.. still getting an "Error loading Razor Script" can you show me how you would integrate your script with my current one? maybe i'm not combining it correctly..

  • FarmFreshCode 225 posts 422 karma points
    Jul 12, 2011 @ 20:38
    FarmFreshCode
    0

    Well I still haven't been able to come up with a solution for this quite yet despite everyones help. I thought I would go ahead and make a video showing you what I am trying to accomplish with Umbraco and my Members section..

    You can watch the video here: http://www.youtube.com/watch?v=GS6D1pcw-48 

    I have also included my FULL template so far here: facultyTemplate.rtf

    If anyone has code that would allow me to search and filter my members I would truely appreciate it...
    I plan to share all of the code once I get it finished.

    Thanks

  • FarmFreshCode 225 posts 422 karma points
    Jul 14, 2011 @ 15:45
    FarmFreshCode
    0

    It was suggested that I provide a less complex Template File, so I have stripped everything out but the First and Last Name values in this file:
    FacultyTemplate-Quick.rtf

    You'll see where I have added the form "place holder" in the script and I just need help figuring out how to create a razor search feature that will let me search for members and hopefully filter them by department via a dropdown list.

    You can still watch the video for a visual. http://www.youtube.com/watch?v=GS6D1pcw-48

    Thanks!

  • FarmFreshCode 225 posts 422 karma points
    Jul 29, 2011 @ 13:37
    FarmFreshCode
    0

    Hey Everyone.. I still haven't been able to make any progress on this issue myself yet.. :-(
    Would anyone out there be able to help out with a solution?

    You can view a simplified version of my template here: FacultyTemplate-Quick.rtf

    and if you need a visual then I have a screencast online here: http://www.youtube.com/watch?v=GS6D1pcw-48

  • Alex 78 posts 136 karma points
    Jul 29, 2011 @ 14:06
    Alex
    0

    Hi,

    Have you considered just doing this on the front-end using jQuery or the like?

  • FarmFreshCode 225 posts 422 karma points
    Jul 29, 2011 @ 14:22
    FarmFreshCode
    0

    Im not sure what you mean specifically, but I'm open to any solutions.
    Would you happen to be able to provide an example, or some code that I could review?

  • Alex 78 posts 136 karma points
    Jul 29, 2011 @ 15:01
    Alex
    1

    Well you already have a list of profiles that you are displaying on the page right? Using jQuery and it's "contains:" function you can filter that list based on specific criteria. Sorry I don't have time to write up a specific example but a quick Google "jQuery List Filter" threw up this page which will help to get you started http://kilianvalkhof.com/2010/javascript/how-to-build-a-fast-simple-list-filter-with-jquery/

  • FarmFreshCode 225 posts 422 karma points
    Jul 29, 2011 @ 15:05
    FarmFreshCode
    0

    @Alex - I've never seen that before.. very interesting.. I'll give that a try today.. Thanks!

  • FarmFreshCode 225 posts 422 karma points
    Jul 29, 2011 @ 17:21
    FarmFreshCode
    0

    Well I haven't been able to get the search filtering to work.. my list of data is very complicated and it seems to be having some trouble with that..
    However since you pointed me to the Google Serach term I was able to solve my "Filter by Department" issue using this link:

    http://jetlogs.org/2009/02/10/filtering-lists-using-jquery/

    So I'll keep looking and trying to figure out how to get a search field in there.. but thanks for getting me started on a new path!

     

  • keilo 568 posts 1023 karma points
    Dec 06, 2011 @ 19:31
    keilo
    0

    Hi there

    I implemented a similar page for an intranet. I've tried to download the template in your posts but the link is broken?

     

  • FarmFreshCode 225 posts 422 karma points
    Dec 06, 2011 @ 21:01
    FarmFreshCode
    0

    @keilo - I sure would apprecaite your help here.. I have a script I am using to filter my list by "Deapartment" which you will see below... however I feel like it isn't the best way. I also still haven't been able to figure out how to search for a member.... any ideas? I would love to be able to include an advanced search, where I could allow people to search not only by name.. but other features that I have included in the members info.. But first thing is first.. I need a search field based on name.

    I have trimmed down by script to just pull first and last names so it should be a little easier to see what I've done so far.

    <%@ Master Language="C#" MasterPageFile="~/masterpages/Standard.master" AutoEventWireup="true" %>

    <asp:content ContentPlaceHolderId="contentContent" runat="server">
           
    <umbraco:Macro runat="server" language="cshtml">
      
      @using umbraco.cms.businesslogic.member
      @{
        var memberId= HttpContext.Current.Request.QueryString["id"];
      }

        @if(memberId != null) {
       
            var member = new Member(Convert.ToInt32(memberId));

      var facultyFname = member.getProperty("facultyFirstName").Value.ToString();
      var facultyLname = member.getProperty("facultyLastName").Value.ToString();

    <h2>@facultyFname @facultyLname</h2>
     
      //CHANGE SCREENS HERE...
    }  
        else {  
     
      //INSERT SEARCH FIELD STUFF HERE
      
        <script type="text/javascript">    
          $(document).ready(function()
          {        
            $("#btnFilter").click(function()
            {
              var selection = $("#catSelect").val();

              if (selection == "all")
              {
                //show all items
                $(".item").show();
              }
              else
              {          
                $(".item").hide();
                $("."+selection).show();
              }
              
            });
            
          });
        </script>
      <select name="catSelect" id="catSelect">
          <option value="all">Show All</option>
        <option value="87">Department #1</option>
        <option value="66">Department #2</option>
        <option value="68">Department #3</option>
        <option value="69">Department #4</option>
        <option value="70">Department #5</option>
        <option value="71">Department #6</option>
        </select>  
      <input type="button" id="btnFilter" value="Filter the list" />

      //END HERE

        var members = Member.GetAll; 
        foreach(var item in members.OrderBy(x => x.getProperty("facultyLastName").Value.ToString())) {

          var facultyFname = item.getProperty("facultyFirstName").Value.ToString();
          var facultyLname = item.getProperty("facultyLastName").Value.ToString();
          var departments = item.getProperty("facultyDepartments").Value.ToString();

    <div class='item  @departments'>
        <a href="[email protected]" title="@facultyFname @facultyLname">@facultyFname @facultyLname</a>
    </div>
      }}

    </umbraco:Macro>
     
    </asp:content>

    Thanks in advance!

  • ashwini 43 posts 63 karma points
    May 16, 2012 @ 16:29
    ashwini
    0

    hi i tried to download the template but looks like the link is broken :(. I need to create something like what you did for my company's intranet. I have no clue as how to proceed as i am very new to .NET and umb....can u please give me some suggestions as how to proceed ?

  • FarmFreshCode 225 posts 422 karma points
    May 16, 2012 @ 16:44
    FarmFreshCode
    0

    Hello ashwini,

    The template that I talked about earlier is the same code that I posted just before your post. I am affriad I haven't made all that much progress on the whole thing. Other than that.

  • ashwini 43 posts 63 karma points
    May 16, 2012 @ 17:16
    ashwini
    0

    Thanks a lot for the code FarmFresh :). I am sure someone here will help you out with your issues :)

    Here is what i did till now:

    1] Created a new document type called profile page with properties like last name, first name, phone etc.

    2] Inserted the code you gave in the template of the profile page. I made changes to reflect the properties i have like lastname etc  

    3] When i load the profile page on the website, it says:

    Error loading Razor Script 
    Object reference not set to an instance of an object.

     

    Any suggestions ? I already have created couple of members/member groups etc....

  • ashwini 43 posts 63 karma points
    May 25, 2012 @ 20:58
    ashwini
    0

    i hate to bump this thread but i need help very badly ! and there is no documentation whatsoever to help me out ! when i use the code that farmfresh here mentioned i get :

    Error loading Razor Script 
    Object reference not set to an instance of an object.

    what am i doing wrong ? I also noticed that there was no mention of membergrouptype in the razor script....how would it work without knowing as which membergroup it needs to pull the members from ?

    Thanks !

    Ashwini

Please Sign in or register to post replies

Write your reply to:

Draft