Website in ASP.NET
By Jean-Claude Colette
Jun 09, 2016
Description:
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.
