Render MVC partial view inside bootstrap modal dialog

In this article, I am going to show you how to create a modal dialog using bootstrap and then load a MVC partial view in the dialog.

The steps are explained below with screenshots.

1. We need to have a modal container in the main layout page. All the dialogs will be loaded inside this container. I have hardcoded the styles for now. It is recommended that all the styles be put in a separate stylesheet file.

11

2. Now, we need to add the needed javascript. This script will make an internal Ajax call and will inject the content of the partial view inside the modal container div.

22

Continue reading

Let’s Learn Ember – Installation and Bootstrap

This is the second post in my “Let’s Learn Ember” series. In this post, I will provide an overview on how easy it is to install and bootstrap to get the Ember up and running, without any hassle. That’s the only easy part though!. 😉

Here are the steps that you need to do in order to bootstrap Ember.

  1. Download the dependencies.
    • Get the latest version of JQuery from here, preferably the compressed production version.
    • Get the handlebars from its official website here.
    • Get ember from its official website here. Get the full version for development purposes which contains development helpers that give helpful information if anything goes wrong. You can opt for the minified version for the production.
  2. Bootstrap simple code. In other words, let’s create a “Hello World” for ember. Continue reading

Twitter Bootstrap : My salvation for UI hell

In my 5+ years experience in .NET development, I could never make myself fond of creating those “pretty” .aspx pages. But I need not stress myself over this anymore. Thanks to the Twitter Bootstrap – “A full featured CSS framework with added javascript plugins, html scaffolding and components”.

As per Wikipedia, “Twitter Bootstrap is a free collection of tools for creating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, charts, navigation and other interface components, as well as optional Javascript extensions.”

Originally, Bootstrap was developed by Mark Otto and Jacob Thomson at Twitter as a framework to encourage consistency across internal tools. Seeing this framework as a potential tool for accelerated project development, it gained popularity and was released as open-source in August, 2011 and has been the most popular GitHub development project as of February 2012.

It is really east to get started with bootstrap. One just needs to download the compiled and minified version available at http://twitter.github.io/bootstrap/assets/bootstrap.zip . The following files will be added to the project.

Image

Once this is done, just include these CSS and JS files in your HTML or aspx file to make it a boostrapped file.

Image

There are a couple of sample templates that help create the needed layout in a snap, available @ http://twitter.github.io/bootstrap/getting-started.html#examples .

This framework has helped me create “pretty” HTML pages on a fly, without worrying about any CSS hassles, literally saving me the UI hell.

Reference: http://twitter.github.io/bootstrap/index.html