Thursday, 21 March 2013

MVC 4 - Simple example how to search for some records in table

Watch this example on YouTube:
In this example I will show how you can create simple search functionality in your pages using MVC 4 with Entity Framework.  Basically, user will be able to enter text in the text box and program will retrieve corresponding records.

I have 2 related tables in my database Style and Group.
Each Group can have 0, 1 or more corresponding styles




 in my project ensure you have EF with these 2 tables (look in my older posts how to create EF connection or watch video with this example):

Rebuild solution and create new controller called StyleController


Once created - it will also create different Views that will allow you to add/edit/delete records in StyleMaster table.  Add new method to the controller called SearchForStyle:
        public ActionResult SearchForStyle(string styleName)
        {
            var styles = from s in db.StyleMasters
                         select s;
            if (!String.IsNullOrEmpty(styleName))
            {
                styles = styles.Where(c => c.StyleName.Contains(styleName));
            }

            return View(styles);
        }
This method will load all styles that have in it's name string styleName
Add new view to that method (ensure that scaffold template = list, again, all details in the video)
Go to http://localhost:33333/Style/SearchForStyle?styleName=a - and it will list all styles that have letter a in it's name.  Please note that your port number will be most likely different than 33333.

now let's modify view, so user can actually enter search string on the screen.  add the following code to SearchForStyle view somewhere on the top:
        @using (Html.BeginForm("SearchForStyle","Style",FormMethod.Get)){              
         <p> Style: @Html.TextBox("styleName")<br /> 
         <input type="submit" value="Search for this style" /></p>
        }
Now you can go to http://localhost:33333/Style/SearchForStyle and enter search string then press enter and program will display all corresponding styles.

The problem we have now is that the link doesn't show my search criteria - this can be easily fixed.
Modify @using in SearchForStyle view so it looks like this:
        @using (Html.BeginForm("SearchForStyle","Style",FormMethod.Get)){ 
         <p> Style: @Html.TextBox("styleName")<br /> 
         <input type="submit" value="Search for this style" /></p>
        }
Now run the program, go to http://localhost:33333/Style/SearchForStyle, enter something in search criteria and your link will have parameter.

OK, so now I will modify this program so user can pass 2 arguments to our search function.
First modify SearchForSchool method so it loads all groups and pass them to View using ViewBag
ViewBag.GroupId = new SelectList(db.GroupMasters, "GroupId", "GroupName");
 Whole method will look like this:
        public ActionResult SearchForStyle(string styleName)
        {
            ViewBag.GroupId = new SelectList(db.GroupMasters, "GroupId", "GroupName");
            var styles = from s in db.StyleMasters
                         select s;
            if (!String.IsNullOrEmpty(styleName))
            {
                styles = styles.Where(c => c.StyleName.Contains(styleName));
            }
            return View(styles);
        }
 Modify view add the following
 <p>Groups: @Html.DropDownList("GroupId", String.Empty)   </p>
 Run the program, go to  http://localhost:51448/Style/SearchForStyle - now you have drop down with groups.

Modify SearchForStyles method so it accepts 2 arguments:
        public ActionResult SearchForStyle(string groupId, string styleName){
                        ViewBag.GroupId = new SelectList(db.GroupMasters, "GroupId", "GroupName");

            var styles = from s in db.StyleMasters
                         select s;
            if (!String.IsNullOrEmpty(styleName)){
                styles = styles.Where( c => c.StyleName.Contains(styleName));
            }

            if (string.IsNullOrEmpty(groupId))
                return View(styles);
            else
            {
                int gr = Convert.ToInt32(groupId);
                return View(styles.Where(x => x.GroupMaster.GroupId == gr ));
            }
        }
That's it.  Now user can also pass group id - program will load only records that belong to that group and have name like search string.

1 comment:

  1. hello how i can redirect user if the seach not return data ?
    tiaogmx@outlook.com

    ReplyDelete