This article explains how to implement carousel image gallery with AngularJS UI Bootstrap and Entitiy Framework database first approach in ASP.NET MVC. Angular UI Bootstrap repository contains a set of native AngularJS directives based on Twitter Bootstrap’s markup and CSS. As a result NO dependency on jQuery or Bootstrap’s JavaScript is required.
We will follow these steps to implement carousel:
1. Create a method to get image path, title and summary from database using EF.
2. Call the above method in AngularJS and set response to property.
3. Use <carousel>,<slide> elements with the bindings in the view to display carousel.
Tag: twitter bootstrap
Responsive ASP.NET Menu Control With Twitter Bootstrap
In this tutorial, We will implement collapsing responsive navigation bar using ASP.NET menu control and Twitter Bootstrap. Lets start with the default view of ASP.NET Menu control as follows:
Responsive ASP.NET GridView With Twitter Bootstrap
In my recent post, Responsive ASP.NET GridView is implemented using jQuery FooTable plugin. If you are using Twitter Bootstrap framework, you can easily show hide elements based on characteristics of the device the site is being displayed on, most commonly the width of the browser using the inbuilt CSS classes.