Wojdav Bootstrap Mvc Short Tips (Yeti Theme)

Back To Main Website

Table #1

Creating a table from object.

Component generates cells from public property which is: primitive, string, struct or nullable.

                    
                        @{
                            var obj = new object[]
                            {
                                new { Id = 1, Name = "W" },
                                new { Id = 2, Name = "K" },
                                new { Id = 3, Name = "Z" }
                            };
                        }
                        @Html.WB().Table().Bordered().AddRows(obj)
                    
                
Razor Code
1W
2K
3Z
Html Result

Table #2

Adding a cell to existing row.

Content in additional cell depends on other model property.

                    
                        @{
                            var obj2 = new User[]
                            {
                                new User(1, "W", true),
                                new User(2, "K", false),
                                new User(3, "Z", false),
                            };
                        }

                        @(Html.WB().Table().Bordered().AddRows(obj2, (m, row) =>
                        {
                            var wb = row.MvcService.WB;
                            var button = wb.LinkButton("Admin Panel", "#").Style(ButtonStyle.Primary).Size(ButtonSize.Sm);
                            return row.AddCell(cell => m.IsAdmin ? cell.Html(button) : cell);
                        }))
                    
                
Razor Code
1WTrueAdmin Panel
2KFalse
3ZFalse
Html Result

Table #3

Configuring existing cell.

Third parameter allows configured content of every cell.

                    
                        @{
                            var obj3 = new User[]
                            {
                                new User(1, "W", true),
                                new User(2, "K", false),
                                new User(3, "Z", false),
                            };
                        }

                        @Html.WB().Table().Bordered().AddRows(obj3, (m, row) => row, (info, o, cell) =>
                        {
                            // info = PropertyInfo class of each property.
                            // o = actual cell property value.
                            // cell = cell to return.

                            if (o is bool b)
                            {
                                return b ? cell.Text("Yes") : cell.Text("No");
                            }

                            return cell.Text(o);
                        });
                    
                
Razor Code
1WYes
2KNo
3ZNo
Html Result

Table #4

Excluding certain property from table row.

If method returns null instead cell, cell will not display.

                    
                        @{
                            var obj4 = new User[]
                            {
                                new User(1, "W", true),
                                new User(2, "K", false),
                                new User(3, "Z", false),
                            };
                        }

                        @Html.WB().Table().Bordered().AddRows(obj4, (m, row) => row, (info, o, cell) =>
                        {
                            if (o is bool b)
                            {
                                return null; // Cell will not display.
                            }

                            return cell.Text(o);
                        })
                    
                
Razor Code
1W
2K
3Z
Html Result

Button #1

Creating a simple button with text as content.

                    
                        @Html.WB().Button("Yes")
                    
                
Razor Code
Html Result

Button #2

Creating a small, warning style button with submit type attribute.

                    
                        @(Html.WB().Button("Yes")
                             .Style(ButtonStyle.Warning)
                             .Size(ButtonSize.Sm)
                             .Type(ButtonType.Submit))
                    
                
Razor Code
Html Result

Button #3

Creating a simple button with icon.

Font Awesome 4 and 5 are support.

                    
                        @(Html.WB().Button("User")
                             .Icon(FA4.User))
                    
                
Razor Code
Html Result

Button #4

Creating a simple button with configured icon.

                    
                        @(Html.WB().Button("User")
                             .Icon(FA4.User, x => x.FA4Rotate(FA4Rotate._180)
                                 .Color(FA4IconColor.Warning)
                                 .FA4Size(FA4Size._4x)))
                    
                
Razor Code
Html Result

DropDownButton #1

Creating a simple dropdown button.

                    
                        @(Html.WB().DropdownButton(x => x.Style(ButtonStyle.Success)
                             .Text("Yes DropDown"))
                             .AddH5Header("Header")
                             .AddLink("Link", "#"))
                    
                
Razor Code
Html Result

Image #1

Creating a image.

                    
                        @Html.WB().Image("https://placehold.it/100x100", "Alternate Text")
                    
                
Razor Code
Alternate Text
Html Result

LinkButton #1

Creating a simple link button with text and href attribute.

                    
                        @Html.WB().LinkButton("Yes", "#")
                    
                
Razor Code
Yes
Html Result

Margins #1

Creating a button with margin on all sides.

                    
                        @Html.WB().Button("Margins").M(3)
                    
                
Razor Code
Html Result

Margins #2

Creating a button with right and left margin.

                    
                        @Html.WB().Button("Margins").MR(3).ML(2)
                    
                
Razor Code
Html Result

Pagination #1

Creating a button with pagination on all sides.

                    
                        @Html.WB().Button("Pagination").P(5)
                    
                
Razor Code
Html Result