Resources » Tools and Utilities » ASP.NET

ASP.Net MVC 4 app using Twitter Bootstrap and Entity Framework 5.0 with Visual Studio 2012 IDE


Last Updated:   Category: ASP.NET    
Author: Member Level: Diamond    Points: 100


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.



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:
step1

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.
Step3

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:
Step4

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.
Step5

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.
Step6

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
Step7

Step #8: Choose the mdf database file and add it to the application. For the demonstration, I have addedpubs2012.mdf file
Step8

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
Step9

Step #10:Provide the Model Name e.g. BootStrapperModel and press OK
Step10

Step#11: Entity Data Model wizard will open. Select Choose from DataBase and click on next
Step11

Step #12:The default connection and Entity Name will be generated. Just press Next
Step12

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.
Step13

Step #14:A new model gets generated with all the properties. So our Model is ready now.
Step14

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
Step15

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.
Step16

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.
Step17

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


@Html.ActionLink("Add Job", "Create")


<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.
Step21

Step#22: Click on Add Job link and add a new job and click on Createbutton.
Step22a
A new job gets saved to the database.
Step22b

Step#23: Click on Edit link, it will take the user to the Edit.cshtml view to edit the job.
Step23a
Modify and save.
Step23b

Step#24: Click on Delete link, it will take the user to Delete.cshtml to delete the job.
Step24a
Click on delete will delete the job from the database.
The job get’s deleted from the list:
Step24b

Step#25: Click on the Details link, to display the detailed data
Step25

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.


Did you like this resource? Share it with your friends and show your love!

Article by Pawan Awasthi
Regards, Pawan Awasthi(DNS MVM) +91 8123489140 Bangalore, India (pawansoftit@gmail.com)

Follow Pawan Awasthi or read 20 articles authored by Pawan Awasthi
Responses to "ASP.Net MVC 4 app using Twitter Bootstrap and Entity Framework 5.0 with Visual Studio 2012 IDE"

No responses found. Be the first to respond...

Feedbacks      

Post Comment:




  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:   Sign In to fill automatically.
    Email: (Will not be published, but required to validate comment)



    Type the numbers and letters shown on the left.


    Submit Article     Return to Article Index

    Subscribe to Subscribers
    Active Members
    TodayLast 7 Daysmore...

    Awards & Gifts
    Talk to Webmaster Tony John
    Copyright © SpiderWorks Technologies Pvt Ltd., Kochi, India