You are here: Home / Advance ASP.NET WebForms in Hindi / Master Page and Content Page in ASP.NET
by on January 6, 2015

Master Page and Content Page in ASP.NET

Master Page and Content Page: हम समझ सकते हैं कि हालांकि हमने हमारे Newly Content Page में कोई Header, Footer Specify नहीं किया है, बल्कि हमने इस Header, Footer को अपने Master Page में Specify किया था, फिर भी हमें हमारे Content Page पर Header, Footer दिखाई दे रहा है और ऐसा इसीलिए हो रहा है क्‍योंकि हमने अपने Content-Page को Master-Page Template के आधार पर Create किया है।

जबकि हमारे Content-Page में Master-Page के Contents का Inherit होना, एक प्रकार से Visual Inheritance का उदाहरण है। यानी हम उपरोक्तानुसार Visual Studio के Design View का प्रयोग करते हुए Master-Page के Content को Content-Page में Visually Inherit होते हुए देख सकते हैं। इतना ही नहीं, अपने Content Page पर हम जिस Content Placeholder के Content को Edit करना चाहते हैं, उसके लिए <asp:Content> Server Control को भी हम इस Visual Designer द्वारा Create कर सकते हैं।

यानी जिस Code को हमने Delete कर दिया था, उसे इसी Editor में निम्न चित्रानुसार Visually दिखाई देने वाले Control Customization Button पर Click करने पर दिखाई देने वाले “Create Custom Content” Hyperlink को Click करके फिर से Recreate कर सकते हैं:

Master Page and Content Page

जैसे ही हम इस “Create Custom Content” Hyperlink को Click करते हैं, उससे सम्बंधित Code Automatically Generate हो जाता है, जिसे हम फिर से Source-Mode में Switch करके देख सकते हैं। जैसे:

Master Page and Content Page

इस प्रकार से हमारे Master Page पर हमने जितने Content Placeholder Controls को Place किया होता है, उन्हें अपनी जरूरत के अनुसार Content-Page पर Edit करने के लिए इस तरीके का प्रयोग कर सकते हैं।

साथ ही जब हम Visual Studio का प्रयोग करते हुए Web Application Project Create करते हैं, तब भी Content Page में Content को Add करने हेतु Place किए जाने वाले <asp:Content> Control को इसी तरीके का प्रयोग करते हुए Visually Auto-Generate कर सकते हैं।

यानी हम Master Page में जिन <asp:ContentPlaceHolder> Web Controls को Place करते हैं, Content-Page में हमें उन Controls के स्थान पर Content Place करने के लिए उनसे Associated <asp:Content> Web Controls को Specify करना होता है और contentplaceholderid Attribute के माध्‍यम से ये बताना होता है कि हम किस Master Page Content Placeholder के स्थान पर Content को Place करना चाहते हैं।

उदाहरण के लिए Master Page पर हमने अपने Content Placeholder Web Control को निम्नानुसार Specify किया था, जिसका ID cphLeft था:

<asp:ContentPlaceHolder ID="cphLeft" runat="server"></asp:ContentPlaceHolder>

इसलिए Content-Page पर इस Control की Position पर Dynamic Content को Place करने के लिए हमने निम्नानुसार <asp:Content> Web Control को Specify किया है:

<asp:Content ID="Content1" runat="server" contentplaceholderid="cphLeft">

</asp:Content>

जिसमें contentplaceholderid Attribute की Value के रूप में हमने “cphLeft” Specify करते हुए Master-Page पर Specify किए गए Content Placeholder Control के साथ Associate किया है। ताकि इस Control के बीच जो भी Content Specify किया जाए, Output में वह Content उस Location पर दिखाई दे, जिसे Master-Page में तय किया गया होता है।

Master-Page व Content-Page की इस Working को बेहतर तरीके से समझने के लिए हम इन दोनों Pages के Markups को निम्नानुसार Modify कर सकते हैं, जहां हमने हमारे Master-Page को Visually बेहतर Render करने के लिए इसमें कुछ Inline CSS Styling को भी Use किया है, ताकि इन्हें Practically Implement करने व उपयोग में लेने के बारे में जान सकें:

File Name: MasterPage.master 
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>BccFalna.com: Master Page</title>
    </head>
    <body>
        <table style="width:100%;" border="1">
            <tr>
                <td colspan="2" style="background:#efefef;">
                        <h1>BccFalna.com</h1>
                        <h4>TechTalks in Hindi</h4>
                </td>
            </tr>
            <tr>
                <td style="height:100px;">
                    <asp:ContentPlaceHolder ID="cphLeft" runat="server">
                    </asp:ContentPlaceHolder>
                </td>
                <td>
                    <asp:ContentPlaceHolder ID="cphRitht" runat="server">
                    </asp:ContentPlaceHolder>
                </td>
            </tr>
            <tr>
                <td colspan="2" style="background:#efefef;">
                        <h4>Copyright: 2015</h4>
                </td>
            </tr>
        </table>

    </body>
</html>


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

<script runat="server">
    protected void btnSubmit_Click(object sender, EventArgs e)
    {
        lblHello.InnerHtml = "<h3>Hello! " + txtName.Text + " How are you?</h3>";
    }
</script>

<asp:Content ID="Content1" runat="server" contentplaceholderid="cphLeft">
    <form id="form1" runat="server">
        <asp:Label ID="lblName" runat="server" Text=""></asp:Label>
        <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
        <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" />
    </form>
</asp:Content>

<asp:Content ID="Content2" runat="server" contentplaceholderid="cphRitht">
    <span id="lblHello" runat="server">Hello! How are you?</span>
</asp:Content>

जब हम हमारे Master-Page (MasterPage.master) व Content-Page (Default.aspx) को उपरोक्तानुसार Modify करते हैं, जिसमें हमने Server-Side Script को भी Current-Page में ही Specify कर दिया है, जबकि हम btnSubmit_Click() Event Handler को Default.aspx.cs Code-Behind File में भी Implement कर सकते हैं, तो इस Webpage को Run करने पर हमें निम्नानुसार Output Page प्राप्त होता है:

Master Page and Content Page in ASP.NET Example

हम देख सकते हैं कि हालांकि हमने हमारे Content-Page में Header व Footer Sections को Specify नहीं किया है, फिर भी हमें हमारे Output Page में ये Sections दिखाई दे रहे हैं, जो कि Master-Page से Inherit हो रहे हैं और हमें उसी स्थान पर दिखाई दे रहे हैं, जहां हमने Master-Page में इन्हें Specify किया था।

यानी जब हम ASP.NET के Master-Page Concept को अपने Website या Web Application Project के लिए Use करते हैं, तब हमें केवल हमारे Master-Page के Look and Feel यानी Layout को ही Define करना होता है और एक बार अपने Website के Layout से सम्बंधित Master-Page Templates को Create कर लेने के बाद हम जिस Content-Page के साथ चाहैं, उस Content-Page पर इस Template को Apply कर सकते हैं।

इतना ही नहीं, यदि हम हमारी Entire Website के Layout में किसी प्रकार का परिवर्तन करना चाहते हैं, तो हमें केवल Master-Page में ही Modification करना होता है, परिणामस्वरूप सम्पूर्ण Website के उन Content-Pages पर वह Change Apply हो जाता है, जिन पर Master-Page को Apply किया गया है।

Advance ASP.NET WebForms with C# in Hindi - BccFalna.com: TechTalks in Hindiये Article इस वेबसाईट पर Selling हेतु उपलब्‍ध EBook Advance ASP.NET WebForms with C# in Hindi से लिया गया है। इसलिए यदि ये Article आपके लिए उपयोगी रहा, तो निश्चित रूप से ये पुस्तक भी आपके लिए काफी उपयोगी साबित होगी।

Advance ASP.NET WebForms in Hindi | Page:707 | Format: PDF

BUY NOW GET DEMO REVIEWS

Filed Under: Advance ASP.NET WebForms in Hindi