How to Create Responsive Website Using ASP.Net

Sesuraj
10y
253.5k
0
5

Article

Introduction

This article will help you to create a responsive website using ASP.NET. Learn more about responsive from What is Foundation?.

Step 1

Download the responsive CSS and JavaScript files from Download Foundation 5 (you can customize your download).

Step 2

Open your Visual Studio then add your downloaded file into your project then add a default.aspx page and call your necessary files within the head tag from that downloaded folder.

<head runat="server">
<title></title>
<script src="Foundation/js/foundation.min.js" type="text/javascript"></script>
<link href="Foundation/css/foundation.min.css" rel="stylesheet" type="text/css" />
</head>

Step 3

Foundation zurb provides so many functions in responsive. You can learn about it from my previous link :(http://foundation.zurb.com/docs/index.html) .

Now I will explain how to create a simple signup form with a responsive page. Once you add foundation.min.js and foundation.min.css you can get very many classes.

Before starting a responsive design you must specify <div class="row"></div>. Here the class row is a new line (for example: <tr></tr> in the table tag).

<div class="row">
</div>

Then you need to assign your space for specific content through the class large; class large-12 is 100% width. We can share 100% width to every object, for example:

<div class="row">
<div class="large-4 columns">...</div>
<div class="large-4 columns">...</div>
<div class="large-4 columns">...</div>
</div>

Full Example

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="Responsive_Site.Index" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Foundation/js/foundation.min.js" type="text/javascript"></script>
<link href="Foundation/css/foundation.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<br /><br />
<div class="row" style="border:2px solid blue">
<div class="large-12 columns">
<br /><br />
<div class="row">
<div class="large-12 columns text-center">
<b>Signup Form</b>
</div>
</div><br /><br />
<div class="row">
<div class="large-12 columns">
Name:
</div>
</div>
<div class="row">
<div class="large-12 columns">
<asp:TextBox ID="txtUName" runat="server" placeholder="User name"></asp:TextBox>
</div>
</div>
<br /><br />
<div class="row">
<div class="large-12 columns">
Email id:
</div>
</div>
<div class="row">
<div class="large-12 columns">
<asp:TextBox ID="txtEmail" runat="server" placeholder="Email id"></asp:TextBox>
</div>
</div>
<br /><br />
<div class="row">
<div class="large-12 columns">
Phone no:
</div>
</div>
<div class="row">
<div class="large-12 columns">
<asp:TextBox ID="txtPhone" runat="server" placeholder="Phone number"></asp:TextBox>
</div>
</div>
<br /><br />
<div class="row">
<div class="large-12 columns">
Address:
</div>
</div>
<div class="row">
<div class="large-12 columns">
<asp:TextBox ID="txtAddress" runat="server" placeholder="Address" TextMode="MultiLine"></asp:TextBox>
</div>
</div>
<br /><br />
<div class="row">
<div class="large-6 columns">
<asp:Button ID="btnSubmit" runat="server" Text="Submit"></asp:Button>
</div>
<div class="large-6 columns">
<asp:Button ID="btnCancel" runat="server" Text="Cancel"></asp:Button>
</div>
</div>
</div>
</div>
</form>
</body>
</html>

Output (on large screens)

Output (on small screens)

Up Next

Ebook Download

View all

Hands on ASP.NET GridView

Read by 12k people

Download Now!

Learn

View all