Master Page and Content Page in ASP.NET Example

Master Page and Content Page in ASP.NET Example: पिछले Post तक हमने देखा कि जब हम Visual Studio का प्रयोग करते हुए Web Application Project Create करते हैं, तब Master Page व Content Page Create करने के लिए हमें उपरोक्तानुसार तरीके को Follow करना होता है। लेकिन जब हम Visual Studio का प्रयोग करते हुए Website Project Create करते हैं, तब Master Page व उससे Associated Content Page Create करने का GUI तरीका तुलनात्मक रूप से थोडा आसान होता है।

उदाहरण के लिए मानलो कि हम Visual Studio के “FILE => Website…” Menu Option को Click करते हैं, जिसके परिणामस्वरूप निम्नानुसार Dialog Box Display होता है:

इस Dialog Box में चित्रानुसार “ASP.NET Empty Web Site” Option को Select करते हुए एक Empty Website Application Create करने हेतु जैसे ही हम “OK” Button पर Click करते हैं, एक नया Empty Website Application Create हो जाता है।

फिर इस Website Application में नया Master Page Create करने के लिए हम जैसे ही “WEBSITE => Add New Item…” Menu Option को Click करते हैं, हमारे सामने निम्न चित्रानुसार Dialog Box Display होता है:

इस Dialog Box में दिखाई देने अनुसार हमें “Master Page” Option को Select करके उसका एक Appropriate नाम देना होता है, जो कि उपरोक्त चित्र में “MasterPage.master” है।

इस Dialog Box पर हमें दो Checkbox भी दिखाई दे रहे हैं, जहां हमने “Place code in separate file” Checkbox को इसलिए Check किया है, ताकि इस Master Page के Program Logics लिखने के लिए एक Code-Behind File भी Create हो। जबकि इस Option को Uncheck रखने पर हमें हमारे Master Page के Program Logics को Inline Script की तरह ही लिखना पडता है।

लेकिन दूसरे Checkbox के रूप में “Select master page” Checkbox को हमने Uncheck ही रखा है, क्‍योंकि Currently हम Master Page Create कर रहे हैं, जबकि इस Checkbox को तब Check किया जाता है, जब हम किसी Master Page पर आधारित Content Page Create करना चाहते हैं।

उपरोक्त चित्रानुसार तरीके से Master Page के लिए Settings को Specify करके जैसे ही हम “Add” Button पर Click करते हैं, हमारा Master Page Create हो जाता है, जहां हम हमारे Master Page के Codes लिखते हैं।

Master Page Create करने के बाद जब हम Content Page Create करना चाहते हैं, तब हमें इस Website Project में भी “WEBSITE => Add New Item…” Option को ही Select करना होता है, जिसके परिणामस्वरूप निम्नानुसार Dialog Box Display होता है:

चूंकि हम एक Content Page Create करना चाहते हैं, जो कि Master Page पर आधारित होगा, इसलिए इस Dialog Box में हमने “Web Forms” Option को Select करने के साथ ही “Select master page” Checkbox को भी Select किया है। परिणामस्वरूप इस बार जैसे ही हम “Add” Button पर Click करते हैं, हमारे सामने “Select a Master Page” Dialog Box Display हो जाता है, जिसे Web Application Project Create करने पर हमें Manually Display करना पडता है:

इस Dialog Box में हमें हमारे Current Website Project के लिए Created सभी Master Pages दिखाई देने लगते हैं।

चूंकि हमने अभी तक केवल एक ही Master Page Create किया है, इसलिए हमें यहां एक ही Master Page दिखाई दे रहा है, जिसे Select करके “OK” Button पर Click करते ही हमारे Website Project में एक Content Page Display हो जाता है, जिसमें निम्नानुसार Predefined Codes लिखे होते हैं, जो कि हमारे Master Page में Specified Content Placeholder Server Control से ही Derived होता है:

//File Name: Default.aspx
<%@ Page 
	Title="" 
	Language="C#" 
	MasterPageFile="~/MasterPage.master" 
%>

<script runat="server">

</script>

<asp:Content ID="Content1" ContentPlaceHolderID="cphLeft" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cphRitht" Runat="Server">
</asp:Content>

इस Automatically Add होने वाले <asp:Content> Server Control में हम उस Content को Enclose कर सकते हैं, जिसे हम हमारे Current Content Page पर Content Placeholder Control के स्थान पर Render करना चाहते हैं।

हम देख सकते हैं कि इस बार Automatically Generate होने वाले Code में <script> नाम का एक Element तो Included है लेकिन Default.aspx.cs नाम की Code-Behind File नहीं है। ऐसा इसलिए है, क्‍योंकि हमने इस Content Page को Create करते सम; “Place code in separate file” नाम के Checkbox को Uncheck कर दिया था। जबकि यदि हम Master Page आधारित Content Page Create करने के लिए निम्न चित्रानुसार दोनों Checkboxes को Checked रखते:

तो उस स्थिति में “Add” Button पर Click करने पर Automatically Generate होने वाले Content Page के Auto-Generated Markup Codes निम्नानुसार होते हैं:

File Name: Default.aspx 
<%@ Page 
	Title="" 
	Language="C#" 
	MasterPageFile="~/MasterPage.master" 
	AutoEventWireup="true" 
	CodeFile="Default.aspx.cs" 
	Inherits="_Default" 
%>

<asp:Content ID="Content1" ContentPlaceHolderID="cphLeft" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cphRitht" Runat="Server">
</asp:Content>

हम देख सकते हैं कि इस बार हमारी Default.aspx Page के लिए Visual Studio द्वारा Auto-Generated Code में <script> Element नहीं है, लेकिन इस बार हमारे Page Directive में AutoEventWireup, CodeFile व Inherits नाम के तीन Extra Attributes Defined हैं, जो कि पिछले Auto-Generated Code में नहीं थे।

ऐसा इसलिए है क्‍योंकि इस बार हमारे Default.aspx के Program Logics लिखने के लिए Visual Studio ने एक Code-Behind File Default.aspx.cs भी Create किया है और उसे Default.aspx Page के साथ Associated किया है, जिसके लिए इन Extra Attributes को Specify करना जरूरी होता है।

इस Auto-Generated Code में हम एक और Special बात देख सकते हैं कि इसमें केवल <asp:Content> Server Control के रूप में cphLeft व cphRitht ID वाले Content Placeholder ही हैं, जिन्हें हमने Content Page में Editable बना, रखने के लिए Master Page में Specify किया था। लेकिन यदि हम इन्हें Code-View में Remove कर दें, और Default.aspx Page में केवल निम्नानुसार Code ही रहने दें:

File Name: Default.aspx 
<%@ Page 
	Title="" 
	Language="C#" 
	MasterPageFile="~/MasterPage.master" 
	AutoEventWireup="true" 
	CodeFile="Default.aspx.cs" 
	Inherits="_Default" 
%>

और अब Visual Studio के Design-View पर Switch करें, तो हमें हमारा Content Page निम्नानुसार दिखाई देता है:

Continue…