Adding Search And Customizing Details View

Now, I will show you how we can add searching functionality into our application. You have to read Details and User Picture in MVC 5 before starting. We will simply add a search box into our index page of <Views\User\Index> folder, so that we can be able to search for a specific person. Then, we will try to customize the way we see our user details page.

Searching

1. Download the source code from the above link and use it.
2. Go to the Controllers folder and find UsersController.
3. Replace the Index ActionResult with this piece of code.
   
   Note that I am searching by location. You can search by other factors too.
   
   1. public ActionResult Index(string searchString)
   2. {
   4. var users = from u in db.Users
   5. select u;
   7. if (!String.IsNullOrEmpty(searchString))
   8. {
   9. users = users.Where(s => s.Location.Contains(searchString));
   10. }
   12. return View(users);
   13. }
4. Go to <Views\Users\Index> and add this code.
   
   1. @using (Html.BeginForm())
   2. {
   3. @Html.ActionLink("Create Profile", "Create", "Users")
   4. <p>
   5. Enter any location
   6. <div class="col-sm-3 col-md-3 pull-left">
   7. <div class="input-group">
   8. <input type="text" class="form-control" placeholder="Search" name="searchString">
   9. <div class="input-group-btn">
   10. <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
   11. </div>
   12. </div>
   13. </div>
   14. </p>
   15. }
   Yeah! That's it. We have finished with the search. Here is the Result.
   
   

Customizing Details View

Now, we are going to customize our details page. It looks like this now.



First, we have to add this piece of code to the details.chtml located in the <Views\Users\Details>. Next, we have to do something with CSS for animating.

Now, insert this to your site.css located at <content\site.css>.

Run your application now! Yes, we have successfully changed the details page. Stay tuned for the next article.