Skip to main content

How to Create a ASP.NET Site using Master Pages

Lets begin with a example.

image   This is a typical site layout that you might need to  your web site. Imagine that you are going to create a this type of layout for your pages. In the traditional way you need to create this layout for your every pages. Then imagine  if you need to change it later .. oops.. then you  need to change all the pages you have done.

 

But if you use master page concept it is much more easy, because you can only design the content while keeping the others static (Of cause you can also change the others too. )

In the run time master page and content are merged and will display the page.

image How to do this

STEP 1 : First of all you need a Web Project or a Web Application. Thus Open the visual studio and go and create a new web project.

STEP 2: Then you need to add a master page to the project . thus Goto –> Add New Item and select the master page and click add button.

image

STEP 3 : The Design your master page.





  1. <head runat="server">
  2.     <title></title>
  3.     <asp:ContentPlaceHolder ID="head" runat="server">
  4.     </asp:ContentPlaceHolder>
  5. </head>
  6. <body>
  7.     <form id="form1" runat="server">
  8.     <table>
  9.         <tr>
  10.             <td colspan="3">
  11.                 Header</td>
  12.         </tr>
  13.         <tr>
  14.             <td rowspan="2">
  15.                 Menu</td>
  16.             <td rowspan="2">
  17.                     <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
  18.                     </asp:ContentPlaceHolder>
  19.             </td>
  20.             <td >
  21.                 Banner</td>
  22.         </tr>
  23.         <tr>
  24.             <td >
  25.                 Adverticement</td>
  26.         </tr>
  27.         <tr>
  28.             <td colspan="3">
  29.                 Footer</td>
  30.         </tr>
  31.     </table>
  33.     </form>
  34. </body>
  35. </html>



Step 4 : Now you want to add a content page (web form)  to the project. thus GOTO –> add new item and select web form. In here don’t forget to check the select master page. It will list down available master pages and you should select what you want. Then It will automatically generate code segment to place your content.

image

image

Step 5: Now you can code your content page.





  1. <%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
  3. <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
  4. </asp:Content>
  5. <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
  6.     <div>Place your content here</div>
  7. </asp:Content>




Labels:

Comments

Post a Comment

Popular posts from this blog

Complete guide to Install SharePoint in a Three Server Farm using AutpSPInstaller

This article will be divided to three sections Setting up the Environment and Service Accounts Getting Ready with AutoSPInstaller Online Configuring the XML using Online Editor and Installation Setting up the Environment and Service Accounts AutoSPInstaller Online is one of a great project that facilitate Automated SharePoint installation including Sharepoint 2010, 2013 and 2016. Auto SP Installer provides a powerful way to deploy and configure a single-server development environment to multiple-server SharePoint farm. Reference: https://autospinstaller.com/ Before doing anything we will set up the environment for SharePoint three server Farm. Will name these servers as SPWFE - Share Point Front End Server SPAPP - Share Point App server SPDB - DB server Please find the reference for SharePoint minimum requirement and practices from https://docs.microsoft.com/en-us/SharePoint/install/install-sharepoint-server-2016-across-multiple-servers For the the medium segregation, we have to create...
Post a Comment
Read more

How to Customize New Item Form to take parameters from Query String in the SharePoint 2010

In here I'm going to explain how to customize the SharePoint Item From to take parameters from Query String and set them as default values using SharePoint designer. Using this you can open a new Item From by providing parameters as query string. For an example you can customize one item Display form and taking query String Parameter from that and view New Item view for another list by providing default values using the Query String.     Steps Open the SharePoint designer and go to list and libraries and open the list that you want. Click the New and create a New Insert View by providing the name of the view.   Then created one will come to the list. then click and open the view. Then default New Item Screen will be loaded as follows. Then Delete the default list view and make that empty. You can delete the controls by selecting the area in the design view, If it fully cleared you can view the following message from the designer. Then go to SharePoint...
6 comments
Read more

Motion Eye Docker compose File

Docker compose files are comes in handy when considering container orchestration. Below example shows my docker compose files and folder structure. ---- Your Folder (motioneye)   -- etc   -- lib   -- docker-compose.yaml You can run the docker compose file using docker-compose -d , and etc and lib folder will be automatically populated in the initiation. --- Below shows the content of the docker-compose.yaml file. version: '3' services:   nodered:    image: "ccrisan/motioneye:master-amd64"    container_name: motioneye    restart: always    user: root    ports:      - 8765:8765    volumes:      - "/etc/localtime:/etc/localtime:ro"      - "./etc:/etc/motioneye"      - "./lib:/var/lib/motioneye"
Post a Comment
Read more