Website in ASP.NET
In this article, we explain how to create a responsive website in ASP.NET. We will install jQuery and we will incorporate the framework Bootstrap.
ASP.NET
ASP.NET is a server-side web application framework. With Visual Studio, ASP.NET lets you visually create dynamic sites that can communicate with the server. In an ASP.NET page (with the .aspx file extension), you can insert several object types (standard, data, navigation, etc.), but also of type HTML.
An .aspx file is always associated with an .aspx.cs file. The .aspx file contains HTML and/or JavaScript and/or Web controls and the .aspx.cs file called code-behind file, contains code in VB or CSharp associated with the objects of the page.
So server-side code is separated from content.
By double clicking a button in the ASP.NET page in design mode, toggles in the code-behind page in which a method named Button1_Click has automatically been created. As its name suggests this method will be executed in response to a button click event.
These ASP.NET pages are processed by the server in response to a query, in order to be read by Web browsers.
Creation
Before you create a new site with Visual Studio 2015, begin by identifying the version of the .NET framework installed on the hosting server. Suppose that it is version 4. Then execute Visual Studio 2015 and in the menu, select File > New > Web Site. In the dialog box that appears, select .NET Framework 4, then ASP.NET Empty Web Site.
It may be that Visual Studio has automatically created the Site.master Site.Mobile.master and ViewSwitcher.ascx files. In this case delete all these files and Default.aspx. Also delete the Account directory.
Now, create a new page Default.aspx:
The page is almost empty and looks a bit like a minimal HTML page. Add one <p>Hello World</p> between the two div:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
?
<!DOCTYPE html>
?
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<p>Hello World</p>
</div>
</form>
</body>
</html>
Try to see if everything goes well with a ctrl F5 ... Splendid!
jQuery
jQuery is a JavaScript library designed to navigate an HTML page, select DOM elements and modify their properties, handle events etc. Web developers use jQuery to add animations, special effects to their site. But jQuery is also used by frameworks like Bootstrap.
In principle jQuery is already installed. To check, take a look in the Scripts directory.
Otherwise you can go to Tools > Manage NuGet Packages and install the package.
Inspired by the contents of the master page that we removed, add to the previous page, a few lines of code to reference and load jQuery.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
?
<!DOCTYPE html>
?
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="~/Content/Site.css" rel="stylesheet" />
?
<asp:PlaceHolder runat="server">
<script src="<%: ResolveUrl("~/Scripts/modernizr-2.8.3.js") %>"></script>
</asp:PlaceHolder>
?
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
?
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server">
<Scripts>
<asp:ScriptReference Name="jquery" />
<asp:ScriptReference Name="jquery.ui.combined" />
</Scripts>
</asp:ScriptManager>
?
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title"><a runat="server" href="~/">your logo here</a></p>
</div>
<div class="float-right">
<nav>
<ul id="menu">
<li><a runat="server" href="~/">Home</a></li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
<section class="content-wrapper main-content clear-fix">
<p>Hello</p>
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>
© <%: DateTime.Now.Year %> - My ASP.NET Application
</p>
</div>
</div>
</footer>
?
</form>
?
</body>
</html>
Note that jQuery can also be useful to make adaptive pages. There are many plugins created around this library to make the pages of our site responsive.
We need plugins for menus, images, grids and carousels.
But the simplest solution is certainly to integrate the Bootstrap framework.
BootStrap
Go to Tools > Manage NuGet Packages and install the package Bootstrap.
Modify the Default.aspx page to load bootstrap in addition to jQuery.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
?
<!DOCTYPE html>
?
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="~/Content/Site.css" rel="stylesheet" />
?
<link type="text/css" rel="stylesheet" href="~/Content/bootstrap.min.css" />
?
<asp:PlaceHolder runat="server">
<script src="<%: ResolveUrl("~/Scripts/modernizr-2.8.3.js") %>"></script>
<script src='<%=ResolveClientUrl("~/Scripts/bootstrap.min.js") %>'
type="text/javascript"></script>
</asp:PlaceHolder>
?
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
?
?
</head>
<body>
<form id="form1" runat="server">
?
<asp:ScriptManager runat="server">
<Scripts>
<asp:ScriptReference Name="jquery" />
<asp:ScriptReference Name="jquery.ui.combined" />
</Scripts>
</asp:ScriptManager>
?
<div class="navbar navbar-static">
<div class="navbar-inner">
<a href="#" class="brand">Brand</a>
<ul role="navigation" class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Messages <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Inbox</a></li>
<li><a href="#">Drafts</a></li>
<li><a href="#">Sent Items</a></li>
<li class="divider"></li>
<li><a href="#">Trash</a></li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Admin <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li class="divider"></li>
<li><a href="#">Settings</a></li>
</ul>
</li>
</ul>
</div>
</div>
</form>
<script src='<%=ResolveClientUrl("~/Scripts/bootstrap.min.js") %>'
type="text/javascript"></script>
</body>
</html>
This allows us to include responsive images, grids and tables in our ASP.NET pages.
