A Responsive Web Design is not only UI changes but also to optimize server side logic for performance. Suppose you are displaying bulk data in desktop environment. But if same data are sent to mobile device, it will make website too slow even the layout is made adaptive on client side. To implement server side logic, we need client side information like browser width and height. In this article, we will implement to get browser height and width on server side in ASP.NET.
In this article, we will implement drill down for ASP.NET 4.0 built in chart control. On the first chart the data is grouped by year. The year is divided into quarters. By clicking on an item on the chart you can get the values corresponding to the quarters of the selected year. Each quarter consists of 3 months. After choosing a quarter for the selected year you can get the values for each month of the this quarter.
Environment: VS2012,.NET Framework 4.0, ASP.NET Web Form, C#, Entity Framework
Facebook home page displays a collage of random profile photos which makes it something special. So I decided to implement the same thing in ASP.NET. In this tutorial, we will do following things:
1. To get random image names from database using Entity Framework Database First approach.
2. Calculate the total needed images for a given width and height. Assuming all profile images have same size.
3. Combine multiple images into collage using C# graphics
4. Add borders to differentiate images
5. Create linear horizontal opacity gradient for the collage and add it in a page similar to Facebook.
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:
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.
As the current trend is to make website compatible with all platforms like desktop, tablet and mobile..etc, Responsive Design technique comes into the picture. Using it, the website adapts the layout to the environment that it is being viewed in. In this post, we will make ASP.NET gridview responsive using jQuery FooTable plugin. It hides certain columns of data at different resolutions based on data-* attributes and converts hidden data to expandable rows.