Microsoft Visual Studio is composed of different suites of programming languages. However, the most interesting to learn from this language is for creating website which is ASP.NET because you’ll only doesn’t have lot of effort building simple and complex website. In this language, you don’t need far away for some flat form in order to make a beautiful and flexible website because it is already in the package of Visual Studio VS and the .Net Framework. The advantages why ASP.Net is being popular it’s because, you can write least of codes and a lot more. Unfortunately, it depends for the programmer side which programming languages they are going to choice because it has their own advantages.
The most exciting part of ASP.Net Web programming is the used of Master Page. The master page is the template for how your pages will looks like. It enables you to store the same content among multiple content pages in a website.
The most exciting part of ASP.Net Web programming is the used of Master Page. The master page is the template for how your pages will looks like. It enables you to store the same content among multiple content pages in a website.
For instance, if you would like to display standard header and footer in each page in your website, then you can generate the standard header and footer in a Master Page. That’s how powerful master page to handle multiple form and easier to maintain. Take note, the ID attribute uniquely identifies the placeholder, allowing you to put more than one placeholder in a master page.
To start - open your Visual Studio 2010, File and choose New Web Site, choose C#
Choose ASP.NET Empty Web Site. Make the default File System; you can change the file directory of your file. Just simply browse and name your folder where your file are being saved and click Ok.
When you notice there’s nothing display. We are going to Add Master Page. To do that, in your Solution Explorer right click the name of your website and choose Add new item. Choose MasterPage.master, the default name is MasterPage. Make sure that the check box Check, only the place code in separate file not the select master page.
This is the master page build in code:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!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>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Under the code, either you can choose Source, Split, and Design. In order to show only the code, used Source just like above example code, Split show both source and design, and Design show only a design.
Now, we are going to use design in order to see the full design of our Master Page. Click design; first delete the current placeholder because we are going to create a new one. Right click to the place holder and select delete.
The above menu, click Table and insert table:
Click Ok, we are going to merge cells the header and footer. Highlight the entire first row, right click and choose Modify merge cells. Expand the height it looks like a website and filled some color to make as interesting site, look at the properties settings to do that. If you want to add color for header and footer, click the cells and locate the properties and choose Bgcolor.
In toolbox, choose Hyperlink and drag in your Page. Make a 3 copy and name it Home, About, and Settings.
So, this is looks like your Master Page. In order to make a multiple Web Forms, in your Solution Explorer click your web site name, right click and Add new item. Choose C# and click Web Form. The default name is default, change it Home to make it more meaningful. Remember; make sure to check the select master page and Add. When you notice another dialog box appear, it means that you are in the Master Page control. Click MasterPage.master then Ok.
This is the page build in code.
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Home.aspx.cs" Inherits="Home" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
Do the same procedure like what you've created in Home web form and name it About and Setting. Now you’ve already created 3 Web Forms.
Back to the Master Page, drag Content PlaceHolder from your Toolbox in your Master Page.
Now, the ContentPlaceHolder is in your Master Page. Click Home menu hyperlinks, in your properties setting, locate Navigate Url, click … and choose Home Web Form that corresponds to your menu. Do the same procedure when you link About and Settings Menu.
In Solution Explorer double click Home Web Form. When you notice your cursor, only ContentPlaceHolder is active, it means you could not write anything except the place holder itself. Now, we are going to put something in the place holder. Type “This is my Home Page”, do the same as what you created in your Home web form and type that relate in every pages.
Note: if you couldn’t write in the place holder, click the place holder and click the greater than arrow >.
Save your work.
Now, click debug to start debugging or press F5 to run you program. The first time you run your program it shows dialog box, click ok to continue. Then the output of your program looks like.
Try to navigate your HOME, ABOUT, and SETTINGS menus if it is work!
Thank you for your this type of informative post, really helpful for us.
ReplyDeleteReference: https://webdesignvalley.com/