ASP.Net MVC 4 app using Twitter Bootstrap and Entity Framework 5.0 with Visual Studio 2012 IDE
In this article, We will learn how the ASP.Net MVC application is integrated with the 3rd party tools for creating their Views. I will explain about the Twitter Bootstrap which is one of the Design utility and can be implemented in the Web pages to create the interactive Views. It usages the client side technologies like Ajax, JavaScript and CSS for making the web page more interactive in look and feel.
@Html.ActionLink("Add Job", "Create") ASP.Net MVC 4 application using Twitter Bootstrap and Entity Framework 5.0 with Visual Studio 2012 IDE
As we know that when we create an application by using MVC, it always a burden to us to create the view more interactive. As we can't use any server side controls, not any of the ASP.Net controls, no Grid View, No View state also etc. So it's quite difficult to create an interactive view just by using the simple HTML controls.
So here we will see that how we can use the Twitter Bootstrap in our ASP.Net MVC 4 application. The demonstration will be using the Visual Studio 2012 with ASP.Net MVC 4.
Question: What is Twitter Boot Strap? And Why Bootstrap?
Twitter Bootstrap is a 3rd arty utility to design the MVC Razor pages so that the View should look more interactive. We as a developer need not to worry about the styles, fonts, width etc. All these things will be taken care by the Bootstrap. So it's an utility which can be embed in to our application like in MVC 4 application to make our job more simple.
Steps to create an ASP.Net MVC 4 Application by using the Twitter Bootstrap:
Step #1:Open Visual Studio 2012 IDE and go to File ? New ? Project, Choose ASP.Net MVC 4 Web Application:
Step #2:Provide the name e.g. MvcBootstrapDemo and Press OK
Step#3:Choose the Empty template from the template list. As we are using Razor engine for our view so make it default as Razor for the View Engine. Press OK.
Step#4:The default solution with all the required folders and default files will be includes in the solution. Right click on the project and click on “Manage Nudget Packages…".Here Manage Nudget packages are the utility to add the extra components to our applications:
Step#5:A new window will open. Enter Bootstrap in the top right ‘Search Online' textbox and press Enter.Scroll Down; we can see 2 links-
• Twitter Bootstrap for ASP.net MVC 4
• Twitter Bootstrap for ASP.net MVC 4 Sample
Install both the utilities by clicking the install button for each of them.
Step#6: Once the installation will complete, go to solution explorer and check for the additional folder for the Bootstrap. If we can see the folder name ‘Bootstrap Support', it means the bootstrap is installed successfully. And we can start our application development.
Step #7: Now we will first start with adding the database to ourapplication. To add the database, right click on the App_Data folder and Add? Existing Item
Step #8: Choose the mdf database file and add it to the application. For the demonstration, I have addedpubs2012.mdf file
Step #9: Now create a model for the application. Here we will create the model classes using the Entity Framework 5. Go to the Model class, right click ? Add ? ADO.Net Entity Data Model
Step #10:Provide the Model Name e.g. BootStrapperModel and press OK
Step#11: Entity Data Model wizard will open. Select Choose from DataBase and click on next
Step #12:The default connection and Entity Name will be generated. Just press Next
Step#13: Choose the entities you want to work with. Like table, views, stored procedure etc. Let's say I select a table name called Jobs from the table list. Click on the Finish Button.
Step #14:A new model gets generated with all the properties. So our Model is ready now.
Step#15: Now we need to create the controller and use this model to generate the Views automatically. To do this, go to the Controllers folder? Right Click ?Add ?Controller and Provide the name of the controller. Let's say e.g. BootstrapDemoController
• Here we need to choose the scaffolding option as- Mvc Controller with Read/Write actions and views,using Entity Framework.
• We need to choose our model class which we have prepared already as Job
• Also we need to choose the DataContext class which got auto generated while creating the model as pubs2012Entities
• Click on Add button
Step #16:Automatically the Controller with all the actions(CRUD operations) and all the views for these operations will be generated. We can check the controller lass and the views in the Views folder.
Step #17:Go to the Index action method of the controller and right click inside the action method and click on Go To View. It will open the Index view.
Step#18:This view is to display the data in form of list. We can modify the View as per our display purpose as below:
Index.cshtml
@model IEnumerable<MvcBootstrapDemo.Models.job>
@{
ViewBag.Title = "List Jobs";
Layout = "~/Views/shared/_BootstrapLayout.narrow.cshtml";
}List Jobs
<tablestyle="width:100%;height:100%">
<tr>
<td>Job Id</td>
<td>Job Description</td>
<td>Min Value</td>
<td>Max Value</td>
</tr>
@foreach (var item in Model) {
<tr>
<td align="Center">
@Html.DisplayFor(modelItem => item.job_id)</td>
<td align="Center">
@Html.DisplayFor(modelItem => item.job_desc)</td>
<td align="Center">
@Html.DisplayFor(modelItem => item.min_lvl)</td>
<td align="Center">
@Html.DisplayFor(modelItem => item.max_lvl)</td>
<td>@Html.ActionLink("Edit", "Edit", new { id=item.job_id }) |
@Html.ActionLink("Details", "Details", new { id=item.job_id }) |
@Html.ActionLink("Delete", "Delete", new { id=item.job_id })
</td>
</tr>
}
Step#19: In the similar way, go to the Create, Edit, Delete and Details View and modify the View code to display the contents in a table.
Create.cshtml
@model MvcBootstrapDemo.Models.job
@{
ViewBag.Title = "Create New Job";
Layout = "~/Views/shared/_BootstrapLayout.narrow.cshtml";
}Add Job
@using (Html.BeginForm()) {
@Html.ValidationSummary(true)
<fieldset>
<legend>Job Details</legend>
<table style="width:60%;height:100%">
<tr class="editor-label">
<td>Job Id:</td>
<td class="editor-field">@Html.EditorFor(model => model.job_id)
@Html.ValidationMessageFor(model => model.job_id)</td>
</tr>
<tr class="editor-label">
<td>Job Description:</td>
<td class="editor-field">@Html.EditorFor(model => model.job_desc)
@Html.ValidationMessageFor(model => model.job_desc)</td>
</tr>
<tr class="editor-label">
<td>Min Value:</td>
<td class="editor-field">@Html.EditorFor(model => model.min_lvl)
@Html.ValidationMessageFor(model => model.min_lvl)</td>
</tr>
<tr class="editor-label">
<td>Max Value:</td>
<td class="editor-field">@Html.EditorFor(model => model.max_lvl)
@Html.ValidationMessageFor(model => model.max_lvl)</td>
</tr>
<tr align="Center">
<td><inputtype="submit"value="Create"/></td>
</tr>
</table>
</fieldset>
}
<div>
@Html.ActionLink("Back to List", "Index")
</div>
Details.cshtml
@model MvcBootstrapDemo.Models.job
@{
ViewBag.Title = "Job Details";
Layout = "~/Views/shared/_BootstrapLayout.narrow.cshtml";
}Job Details
<fieldset>
<legend>Job Details</legend>
<table style="width:60%;height:100%">
<tr class="display-label">
<td>Job Id:</td>
<td class="display-field">@Html.DisplayFor(model => model.job_id)</td>
</tr>
<tr class="display-label">
<td>Job Description:</td>
<td class="display-field">@Html.DisplayFor(model => model.job_desc)</td>
</tr>
<tr class="display-label">
<td>Min Value:</td>
<td class="display-field">@Html.DisplayFor(model => model.min_lvl)</td>
</tr>
<tr class="display-label">
<td>Max Value:</td>
<td class="display-field">@Html.DisplayFor(model => model.max_lvl)</td>
</tr>
</table>
</fieldset>
<p>
@Html.ActionLink("Edit", "Edit", new { id=Model.job_id }) |
@Html.ActionLink("Back to List", "Index")
</p>
Edit.cshtml
@model MvcBootstrapDemo.Models.job
@{
ViewBag.Title = "Edit Job";
Layout = "~/Views/shared/_BootstrapLayout.narrow.cshtml";
}Edit Job
@using (Html.BeginForm()) {
@Html.ValidationSummary(true)
<fieldset>
<legend>Job Details</legend>
<table style="width:60%;height:100%">
<tr class="editor-label">
<td>Job Id:</td>
<td class="editor-field">@Html.EditorFor(model => model.job_id)@Html.ValidationMessageFor(model => model.job_id)</td>
</tr>
<tr class="editor-label">
<td>Job Description:</td>
<td class="editor-field">@Html.EditorFor(model => model.job_desc)
@Html.ValidationMessageFor(model => model.job_desc)</td>
</tr>
<tr class="editor-label">
<td>Min Value:</td>
<td class="editor-field">@Html.EditorFor(model => model.min_lvl)@Html.ValidationMessageFor(model => model.min_lvl)</td>
</tr>
<tr class="editor-label">
<td>Max Value:</td>
<td class="editor-field">@Html.EditorFor(model => model.max_lvl)
@Html.ValidationMessageFor(model => model.max_lvl)</td>
</tr>
<tr align="Center">
<td><input type="submit"value="Save"/></td>
</tr>
</table>
</fieldset>
}
<div>
@Html.ActionLink("Back to List", "Index")
</div>;
Delete.cshtml
@model MvcBootstrapDemo.Models.job
@{
ViewBag.Title = "Delete Job";
Layout = "~/Views/shared/_BootstrapLayout.narrow.cshtml";
}Delete Job
<h4>Are you sure you want to delete the below job?</h4>
<fieldset>
<legend>Job Details</legend>
<table style="width:60%;height:100%">
<tr class="display-label">
<td>Job Id:</td>
<td class="display-field">@Html.DisplayFor(model => model.job_id)</td>
</tr>
<tr class="display-label">
<td>Job Description:</td>
<td class="display-field">@Html.DisplayFor(model => model.job_desc)</td>
</tr>
<tr class="display-label">
<td>Min Value:</td>
<td class="display-field">@Html.DisplayFor(model => model.min_lvl)</td>
</tr>
<tr class="display-label">
<td>Max Value:</td>
<td class="display-field">@Html.DisplayFor(model => model.max_lvl)</td>
</tr>
</table>
</fieldset>
@using (Html.BeginForm()) {
<p>
<input type="submit"value="Delete"/> |
@Html.ActionLink("Back to List", "Index")
</p>
}
Step#20: In each of the view, I have added the layout from the Bootstrap file and provided the path:
Layout = "~/Views/shared/_BootstrapLayout.narrow.cshtml";
So the layout will be added from the above path.
Step#21: Run the application and call the controller.
By default it will call the Index action method as per the routing mechanism.
Step#22: Click on Add Job link and add a new job and click on Createbutton. 
A new job gets saved to the database.
Step#23: Click on Edit link, it will take the user to the Edit.cshtml view to edit the job. 
Modify and save.
Step#24: Click on Delete link, it will take the user to Delete.cshtml to delete the job. 
Click on delete will delete the job from the database.
The job get's deleted from the list:
Step#25: Click on the Details link, to display the detailed data
The user can edit the records from here as well just by clicking on the Edit link.
Every view is having the back to list to take the user to the first page where are the jobs are displayed.
Hope this article will make you understand of how to use the Twitter Bootstrap in our ASP.Net MVC 4 application by using the Visual Studio 2012 as the IDE and Entity Framework 5.