List groups

List groups are flexible components that either display simple lists of elements or can be combined with other elements to create complex lists with custom content. As an example, we'll create a sample search page that will display the search results in a Bootstrap list group.

Start by completing the following steps:

  1. Add a new controller called SearchController.cs to your project.
  2. Change the Index action to the following:
            public IActionResult Index(string query) 
        { 
            ViewBag.SearchQuery = query; 
            var products = GetProducts(); 
            if (!string.IsNullOrEmpty(query)) 
            { 
              var results = products.Where(p => p.Name.Contains(query)); 
              return View(results); 
            } 
            return View(products); 
        }
  3. The preceding code retrieves a list of all products using the GetProducts method. It will then filter the list of products if the query parameter contains a value and returns the results. If the query parameter does not contain any value, it will return all the products.
  4. The code for the GetProducts method is as follows:
    private List<ProductModel> GetProducts() 
        { 
            var model = new List<ProductModel>(); 
            var product1 = new ProductModel { Name = "Chai", UnitPrice = 18, 
            UnitsInStock = 35, Discontinued = false, Id = 1, 
            Status = "active" }; 
            var product2 = new ProductModel { Name = "Chang", UnitPrice = 19, 
            UnitsInStock = 17, Discontinued = false, Id = 2,
            Status = "success" }; 
            var product3 = new ProductModel { Name = "Aniseed Syrup", UnitPrice 
            = 10, UnitsInStock = 13, Discontinued = false, Id = 3, 
            Status = "info" }; 
            var product4 = new ProductModel { Name = "Pavlova", UnitPrice = 17,
            UnitsInStock = 29, Discontinued = false, Id = 4, 
            Status = "warning" }; 
            var product5 = new ProductModel { Name = "Carnarvon Tigers", 
            UnitPrice = 62, UnitsInStock = 42, Discontinued = true, Id = 5, 
            Status = "danger" }; 
            model.AddRange(new[] 
            { product1, product2, product3, product4, product5 }); 
            return model; 
         }
  5. Next, create a new subfolder in the Views folder called Search and add a new view called Index.cshtml to it.
  6. Change the view's HTML to the following:
    @model IEnumerable<Chapter3.Models.ProductModel> 
         <div class="container" style="padding-top: 30px;"> 
           <h1> 
            Product search results 
            <small> 
            @if (ViewBag.SearchQuery != null) 
            {<text>Results for your search term: </text> @ViewBag.SearchQuery 
            } 
            </small> 
           </h1> 
           <ul class="list-group"> 
           @foreach (var item in Model) 
            { 
              <li class="list-group-item"> 
              <span class="label label-default label-pill pull-xs-right">
                @item.UnitsInStock</span> 
                @item.Name 
              </li> 
             } 
           </ul> 
           </div>
  7. In the preceding markup, the product items are loaded into an unordered list element <ul> as anchor <li> elements. Each <li> element's class name should be set to .list-group-item. The view should look like the following screenshot inside your browser:
    List groups
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.138.37.151