Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jqwidgets/asp.net-core-mvc-bootstrap-tag-helpers

ASP.NET Core MVC Bootstrap Tag Helpers
https://github.com/jqwidgets/asp.net-core-mvc-bootstrap-tag-helpers

asp-net-core asp-net-mvc aspnetcore bootstrap bootstrap-components bootstrap-modal bootstrap-popover bootstrap-tooltip bootstrap4 carousel navbar panel popover tag-helpers tooltip

Last synced: 2 months ago
JSON representation

ASP.NET Core MVC Bootstrap Tag Helpers

Awesome Lists containing this project

README 

        
# ASP .NET MVC Core Bootstrap Tag Helpers #



ASP.NET Core MVC Bootstrap tag helpers. Demo: http://aspcore.jqwidgets.com/bootstrap



This package includes tag helpers for the following bootstrap components:



- Alert 

- Badge 

- Breadcrumb 

- Button 

- Carousel 

- Collapse 

- DropDown 

- Input 

- Jumbotron 

- Label 

- ListGroup 

- Media 

- Modal 

- NavBar 

- PageHeader 

- Pagination 

- Panel 

- Popover 

- ProgressBar 

- Tabs 

- Thumbnail 

- Tooltip 

- Well 



## Installation ##



* Create a new ASP .NET Core Web Application.

* Install the Tag Helpers. To install ASP.NET Core MVC Bootstrap Tag Helpers, run the following command in the Package Manager Console

`Install-Package jQWidgets.AspNetCore.Mvc.Bootstrap.TagHelpers`.

* Update `_ViewImports.cshtml`.



    ```html

    @using jQWidgets.AspNetCore.Mvc.Bootstrap.Demos

    @using jQWidgets.AspNetCore.Mvc.Bootstrap.TagHelpers

    @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

    @addTagHelper *, jQWidgets.AspNetCore.Mvc.Bootstrap.TagHelpers

    @inject Microsoft.ApplicationInsights.Extensibility.TelemetryConfiguration TelemetryConfiguration

    ```

    

* Add a reference to `bootstrap.mvc.css` in `_Layout.cshtml`. `bootstrap.mvc.css` is included in this repository.

    

    ```html

    

        

        

        

    

    ```

    

* Build the Solution.

* Add a Bootstrap Tag Helper to a Page.

## Modal ##



To create a Bootstrap Modal, add the following Tag Helper:



```html



    

        

            ×

        

        
Sample modal header


    

    

        Sample modal body

    



```



To open the modal from a button, add the bootstrap-toggle-modal attribute to the button with the id of the modal as value:

```html



    Open sample modal



```



***Related Tag Helpers:***



* `` - denotes the Modal's header section.

* `` - denotes the Modal's content section.

* `` - denotes the Modal's footer section.



***Applicable attributes:***



Animation can be added to the Modal by adding the class "fade" to it.

* data-backdrop - true (default)/false/"static" - includes a modal-backdrop element. Specify "static" for a backdrop which doesn't close the modal on click.

* data-keyboard - true (default)/false - closes the modal when escape key is pressed.

* data-show - true (default)/false - shows the modal when initialized.

* size - "xs"/"sm"/"lg". If size is not set, the size of the widget will be normal.



***Methods:***

```javascript

$().modal('toggle')

$().modal('show')

$().modal('hide')

$().modal('handleUpdate')

```

***Events:***

```javascript

show.bs.modal

shown.bs.modal

hide.bs.modal

hidden.bs.modal

loaded.bs.modal

```

## Dropdown ##



To create a Bootstrap Dropdown, add the following Tag Helper:



```html



    

    

        Action

        Another action

        Something else here

        

        Separated link

    



```



You can add more Dropdown options by inserting more  Tag Helpers.



**Related Tag Helpers:**



* `` - denotes the Dropdown's label (button). Its content can be set via the content attribute.

* `` - denotes the container (popup) for the Dropdown's items. It has a labelledby attribute that should be set to the id of the  to denote connection between them.

* `` - denotes a Dropdown item.

* `` - denotes a separator between Dropdown items.



***Methods:***

```javascript

$().dropdown('toggle')

```

***Events:***

* show.bs.dropdown

* shown.bs.dropdown

* hide.bs.dropdown

* hidden.bs.dropdown



## Tab ##



To create a Bootstrap togglable Tab, add the following Tag Helper:



```html



    

        Home

        Profile

        

            

                

                

                    fat

                    mdo

                

            

        

    

    

        Content 1.

        Content 2.

        Content 3.

        Content 4.

    



````



To add more tabs to this sample Tab, insert  Tag Helpers in `` and `` Tag Helpers to ``. These act as tab header and tab content sections respectively.



***Related Tag Helpers:***

*  - denotes the Tab's header section.

*  - denotes a Tab's tab in the header section. The attribute active denotes if the tab is selected.

*  - denotes the Tab's content section.

*  - denotes a Tab's content panel in the content section. The attribute active denotes if the content panel is visible. If the class "fade" is added, selection animation will be enabled.



***Methods:***

```javascript

$().tab('show')

```

***Events:***

```javascript

hide.bs.tab

show.bs.tab

hidden.bs.tab

shown.bs.tab

```

## Tooltip ##



To create a Bootstrap Tooltip, add the attribute bootstrap-tooltip to an existing tag or Tag Helper. The value of the attribute specifies the tooltip's content. Supported tags are: `
, , , , , , 
, 


, 
, 
, 
, 
 and 
`



`Tooltip on top`



***Applicable attributes:***

* data-animation - true (default)/false - apply a CSS fade transition to the tooltip.

* data-container - string/false - appends the tooltip to a specific element. Example: data-container="body".

* data-delay - number/object - delay showing and hiding the tooltip (ms) - does not apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is: delay: { "show": 500, "hide": 100 }.

* data-html - true/false (default) - insert HTML into the tooltip. If false, jQuery's text method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.

* data-placement - "top" (default)/"left"/"right"/"bottom"/"auto"/function - sets the tooltip's position relative to the host element. When "auto" is specified, it will dynamically reorient the tooltip. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right. When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second. The this context is set to the tooltip instance.

* data-selector - string/false (default) - if a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have tooltips added.

* data-trigger - "click"/"hover"/"focus"/"manual" (default is "hover focus") - how tooltip is triggered. You may pass multiple triggers; separate them with a space. "manual" cannot be combined with any other trigger.

* data-viewport - string/object/function (default is { selector: 'body', padding: 0 }) - keeps the tooltip within the bounds of this element. Example: viewport: '#viewport' or { "selector": "#viewport", "padding": 0 }. If a function is given, it is called with the triggering element DOM node as its only argument. The this context is set to the tooltip instance.



***Methods:***

```javascript

$().tooltip('show')

$().tooltip('hide')

$().tooltipal('toggle')

$().tooltip('destroy')

```

***Events:***

```javascript

show.bs.tooltip

shown.bs.tooltip

hide.bs.tooltip

hidden.bs.tooltip

inserted.bs.tooltip

```

## Popover ##



To create a Bootstrap Popover, add the attribute bootstrap-popover to an existing tag or Tag Helper. Supported tags are: `
, , , , , , 
, 


, 
, 
, 
, 
 and 
`



```javascript

`

    Click to toggle popover



```



***Applicable attributes:***

* data-animation - true (default)/false - apply a CSS fade transition to the popover.

* data-container - string/false - appends the popover to a specific element. Example: data-container="body".

* data-content - string (default is "")/function - sets the popover's content. If a function is given, it will be called with its this reference set to the element that the popover is attached to.

* data-delay - number/object - delay showing and hiding the popover (ms) - does not apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is: delay: { "show": 500, "hide": 100 }.

* data-html - true/false (default) - insert HTML into the popover. If false, jQuery's text method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.

* data-placement - "top" (default)/"left"/"right"/"bottom"/"auto"/function - sets the popover's position relative to the host element. When "auto" is specified, it will dynamically reorient the popover. For example, if placement is "auto left", the popover will display to the left when possible, otherwise it will display right. When a function is used to determine the placement, it is called with the popover DOM node as its first argument and the triggering element DOM node as its second. The this context is set to the popover instance.

* data-selector - string/false (default) - if a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have tooltips added.

* data-title (alternative to title) - string (default is "")/function - sets the popover's title. If a function is given, it will be called with its this reference set to the element that the popover is attached to.

* data-trigger - "click"/"hover"/"focus"/"manual" (default is "hover focus") - how popover is triggered. You may pass multiple triggers; separate them with a space. "manual" cannot be combined with any other trigger.

* data-viewport - string/object/function (default is { selector: 'body', padding: 0 }) - keeps the popover within the bounds of this element. Example: viewport: '#viewport' or { "selector": "#viewport", "padding": 0 }. If a function is given, it is called with the triggering element DOM node as its only argument. The this context is set to the popover instance.

* title (alternative to data-title) - string (default is "")/function - sets the popover's title. If a function is given, it will be called with its this reference set to the element that the popover is attached to.



***Methods:***

```javascript

$().popover(show)

$().popover(hide)

$().popover(toggle)

$().popover(destroy)

```

***Events:***

```javascript

show.bs.popover

shown.bs.popover

hide.bs.popover

hidden.bs.popover

inserted.bs.popover

```

## Alert ##



To create a Bootstrap Alert, add the following Tag Helper:



```html



    ×

    Holy guacamole! Best check yo self, you're not looking too good.



```

***Related Tag Helpers:***



`` - denotes the Alert's close button.



***Applicable attributes:***



*  The color scheme of the Alert can be changed by adding the class "alert-success", "alert-info", "alert-warning" or "alert-danger".

*  To denote that the Alert can be closed, add the "alert-dismissible" class.

*  Enable animation by adding the classes "fade", "in" and/or "out". 



***Methods:***

```javascript

$().alert('close')

```

***Events:***

```javascript

close.bs.alert

closed.bs.alert

```

## Button ##



To create a Bootstrap Button, add the following Tag Helper:

```html

Bootstrap Button

```



***Related Tag Helpers:***



`` - enclose several  Tag Helpers in this Tag Helper to create a button group.



***Applicable attributes:***

* autocomplete - set this attribute to "off" for cross-browser compatibility.

* data-toggle - "button" (for a single button)/"buttons" (for a button group).

* The class "active" has to be applied to pre-toggled buttons. To change the button's color scheme (template), add the class "btn-default", "btn-primary", "btn-success", "btn-info", "btn-warning", "btn-danger" or "btn-link".



***Methods:***

```javascript

$().button('toggle')

$().button('reset')

```

## Collapse ##



To create a Bootstrap Collapse, add the following Tag Helper:



```html



    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.



```



***Applicable attributes:***

* data-parent - false (default)/selector - if a selector is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown.

* data-toggle - toggles the collapsible element on invocation.

* trigger - selector - denotes the element that toggles the Collapse.



***Methods:***

```javascript

$().collapse('toggle')

$().collapse('show')

$().collapse('hide')

```

***Events:***

```javascript

show.bs.collapse

shown.bs.collapse

hide.bs.collapse

hidden.bs.collapse

```

## Carousel ##



To create a Bootstrap Carousel, add the following Tag Helper:



```html



    

        

        

        

    

    

        

        

        

    

    

         

        Previous

    

    

         

        Next 

    



```



***Related Tag Helpers:***



* `` - denotes the container of Carousel's indicators.

* `` - denotes a Carousel indicator. Applicable attributes:

◦active - denotes the initially selected indicator.

◦target - has to be set to the selector of the Carousel that the indicator controls.



* `

    https://example.com/users/

    



```



***Applicable classes:***

* input-group-sm, input-group-lg 



***Related Tag Helpers:***

*  - denotes an Input group addon.



To denote that the input and the  Tag Helper in the Input group are connected, set the input's "aria-describedby" attribute to the id of the addon.



## Nav ##



To create a Bootstrap Nav, add the following Tag Helper:

```html



    Home

    Profile

    Messages



```



***Applicable classes:***

* `nav-tabs` (alternative to "nav-pills"), nav-pills (alternative to "nav-tabs"), nav-justified, "nav-stacked 



***Related Tag Helpers:***

*   - denotes a Nav item.

Applicable classes: active - if added, the item will be initially selected, disabled - if added, the item selection will be disabled. 



## Navbar ##



To create a Bootstrap Navbar, add the following Tag Helper:



```html



    

        

            Toggle navigation

            

            

            

        

        Brand

    

    

        
Signed in as Mark Otto


    



```



***Applicable classes:***

* navbar-inverse - applies an inverted color scheme to the Navbar. 



***Related Tag Helpers:***

* `` - denotes the Navbar header.

* `` - denotes the Navbar collapse.



Classes applicable to Navbar inner elements:

navbar-brand, navbar-toggle, navbar-form, navbar-left - aligns element to the left of the Navbar, navbar-right - aligns element to the right of the Navbar, navbar-btn, navbar-text 

## Breadcrumbs ##



To create a Bootstrap Breadcrumbs, add the following Tag Helper:



```html



    Home

    Library

    Data



```



***Related Tag Helpers:***

* `` - denotes a Breadcrumb (item). 

Applicable classes: pagination-sm - if added, the item will be highlighted. 



## Pagination ##



To create a Bootstrap Pagination, add the following Tag Helper:

```html



    

        «

    

    1

    2

    3

    4

    5

    

        »

    



```



***Applicable classes:***

* pagination-sm, pagination-lg 



***Applicable attributes:***

* "type" - if set to "pager", denotes only a pager with "previous" and "next" links.



***Related Tag Helpers:***

* ` - denotes a Pagination item.

Applicable classes: active, disabled, previous, next 



## Label ##



To create a Bootstrap Label, add the following Tag Helper:



```html

New

```



***Applicable classes***

* label-default, label-primary, label-success, label-info, label-warning, label-danger 

## Badge ##



To create a Bootstrap Badge, add the following Tag Helper:



```html

42

```



## Jumbotron ##



To create a Bootstrap Jumbotron, add the following Tag Helper:



```html



    
Hello, world!


    
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.


    
Learn more



```



## Page header ##



To create a Bootstrap Page header, add the following Tag Helper:

```html



    
Example page header Subtext for header




```



## Thumbnail ##



To create a Bootstrap Thumbnail, add the following Tag Helper:



```html



    illustration

    


        
Thumbnail label


        
...


        


            Button

            Button

        


    



```



***Applicable attributes:***

* "href" (optional)

* "target" (optional)



## Progress bar ##



To create a Bootstrap Progress bar, add the following Tag Helper:



```html



    

        60%

    



```



***Related Tag Helpers:***

*  - denotes a progress bar.

Applicable classes: active - enables animation (requires "progress-bar-striped"), progress-bar-success, progress-bar-info, progress-bar-warning, progress-bar-danger, progress-bar-striped 

Applicable attributes:

◦"value"

◦"minwidth"



## Media object ##



To create a Bootstrap Media object, add the following Tag Helper:



```html



    

         

            64x64

        

    

    

        
Top aligned media


        
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante.


        
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo.


    



```



***Related Tag Helpers:***

* ``



***Applicable classes:***



* media-top, media-middle, media-middle 

* ``

* ``



***Applicable classes:***



media-top, media-middle, media-middle 

•* - wrap nested  Tag Helpers inside this Tag Helper to create a "nested list"-like structure of media objects.



The class "media-heading" should be applied to heading tags inside . The class "media-object" should be applied to images inside  and .



## List group ##



To create a Bootstrap List group, add the following Tag Helper:



```html



    Cras justo odio

    Dapibus ac facilisis in

    Morbi leo risus

    Porta ac consectetur ac



```



***Related Tag Helpers:***

*  - denotes a List group item. 

***Applicable classes:*** 

* active - if added, the item will be highlighted

* disabled - if added, the item will have a disabled visual effect, 

* list-group-item-success

* list-group-item-info

* list-group-item-warning

* list-group-item-danger 

* list-group-item-success 



## Panel ##



To create a Bootstrap Panel, add the following Tag Helper:



```html



    

        
Panel title


    

    

        Panel content

    

    Panel footer



```



***Applicable classes:***

* panel-default

* panel-primary

* panel-success

* panel-info

* panel-warning

* panel-danger 



***Related Tag Helpers:***

* `` - denotes the header section of the Panel.

* `` - denotes the content section of the Panel.

* `` - denotes the footer section of the Panel.



## Responsive embed ##



To create a Bootstrap Responsive embed, add the class "bootstrap-embed-responsive" to an iframe, embed, object or video element:



```html



```



## Well ##



To create a Bootstrap Well, add the following Tag Helper:

```html

Look, I'm in a well!

```

***Applicable classes:***

* well-sm

* well-lg