SujataJK Ответов: 1

Как создать contentplaceholder на левой стороне с помощью master page in ASP.NET

Привет,
В настоящее время я работаю с главной страницей.Я хочу отобразить 3 ContentPlaceHolder, то есть 1 для HeaderContent,LeftContent и MainContent.Проблема в том, что когда я собираюсь добавить какую-то метку или контент в LeftContentPlaceHolder, то его содержимое не отображается на дочерних страницах.Я хочу фиксированное содержимое Leftcontent PlaceHoder на всей его дочерней странице.


Пожалуйста, проверьте мой код.
Спасибо.

Что я уже пробовал:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="PayrollContributionDemo.SiteMaster" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
    <title></title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
 <asp:ContentPlaceHolder ID="HeadContent" runat="server">
   
    </asp:ContentPlaceHolder>
      <style type="text/css">
        div.page
        {
            float: left;
            width: 100%;
            background:#ffc;
            margin-left:30PX;
        }
        div#main
        {
            float: left;
          
            width:  100%;
            position: relative;
            margin-left:30PX;
            text-align:center;
            height:150PX;
        }
        div#page-left
        {
            float: left;
            width: 30%;
             margin-left:30PX;
             position:;
            
        }
        div#page-right
        {
            float: left;
            width: 0PX;
           
        }
        div#page-middle
        {
            float: left;
            margin: 0 auto;
            width: 60%;
            
        }
          #form1
          {
              width: 1018px;
          }
    </style>
</head>
<Body>
 <div class="page">
            <div id="main">
            <div style="border-style: Solid; border-color: inherit; border-width: 1PX; width:80%; float:left;height:146px; margin-right: 0px;">
           
                <h1>
                    J.Kumar InfraProjects Ltd.
                </h1>
                </div>
               
               <div style="border-style: Solid; border-color: inherit; border-width: 1PX;padding-top:100PX;width:15%; float:left;height:48px;">
                <asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
                    <AnonymousTemplate>
                        [ <a href="~/Account/Login.aspx" ID="HeadLoginStatus" runat="server">Log In</a> ]
                    </AnonymousTemplate>
                    <LoggedInTemplate>
                        Welcome <span class="bold"><asp:LoginName ID="HeadLoginName" runat="server" /></span>!
                        [ <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/"/> ]
                    </LoggedInTemplate>
                </asp:LoginView>
                </div>
         
           </div>
          
        </div>
                <form id="form1" runat="server">
                <div id="page-left">
                   <asp:ContentPlaceHolder ID="leftContent" runat="server">
                       
                       This is My Left Page
                       </asp:ContentPlaceHolder>
                </div>
                <div id="page-middle">
                    <asp:ContentPlaceHolder ID="MainContent" runat="server">Body</asp:ContentPlaceHolder>
                </div>

  </form>
       </body>
</html>

1 Ответов

Рейтинг:
2

Thomas Nielsen - getCore

Это содержимое не отображается?
Заполнитель содержимого не должен содержать содержимого на вашей главной странице.

Вам нужно назначить идентификатор вашим заполнителям, как вы это сделали, а затем использовать его на своих дочерних страницах, чтобы определить, какой заполнитель заменить

на главной странице вы все поняли правильно, так что я подозреваю, что это ваша страница сведений, которые не включены, и именно в этом заключается проблема

<div id="page-left">
   <asp:ContentPlaceHolder ID="leftContent" runat="server">
       
       This text will be replaced
   </asp:ContentPlaceHolder>
</div>

А затем на страницах ваших сведений укажите, к какому заполнителю обратиться

<asp:Content runat="server" ContentPlaceHolderID="leftContent">
   <p>I'm showing in the left placeholder!</p>
</asp:Content>


Обновление, основанное на комментариях, поскольку то, что вы хотите сделать, - это заполнить левое боковое меню на основе ajax, вам действительно нечего делать на стороне сервера, по крайней мере на уровне страницы. Итак, первый шаг - удалить contentplaceholder и решить не использовать серверную технологию с клиентской таким образом.

Затем, когда DOM загрузится, Запустите свой ajax-вызов к вашему предположительно api-контроллеру в теге scripts в нижней части главной страницы (так как это загрузит последний)

function TheResultReadyFunction(data){
    var menuSource = 'No really here you construct the menu based on menu data';
    //Construct your menu based on data returned and assign it to menuSource
    $("#page-left").html(menuSource);
}

$(document).ready(function(){
//I Presume you're good with ajax as your question is not about that and you know where to get your data so this is just an example
var menupagecontext = "<%: ProtectedStringWithWhatDefinesMenuViewToGet %>";
     $.getJSON("API/GetAMenu/?request=" + menupagecontext)
               .done(TheResultReadyFunction);


Помните, что Ajax - это клиентская технология для выдачи http get и сообщений вне жизненного цикла вашей страницы. Asp.Net технология master/ detail - это абстракция на стороне сервера, позволяющая повторно использовать код на страницах (details).

Вы также можете ввести меню в элементы управления masterpage страницы сведений, но тогда вам не понадобится ajax, и он не будет динамичным по своей сути без объединения технологий, что по разным причинам не рекомендуется imo.

Suvendu Shekhar Giri

5ед!

SujataJK

Спасибо @Thomas
Но здесь у меня есть вертикальная строка меню (созданная с помощью ajax), которую я хочу показать в левой части каждой страницы .

Thomas Nielsen - getCore

О если вы используете ajax для меню просто отбросьте заполнитель содержимого все вместе так как вам ничего не нужно на стороне сервера или просто верните html с div в который вы собираетесь загрузить данные

SujataJK

Хорошо

Thomas Nielsen - getCore

см. обновленный пример, я предполагаю, что вам понадобится защищенное свойство страницы, содержащее информацию о том, как меню должно выглядеть по-другому на текущей странице, но это все, что вам нужно сделать на стороне сервера imo, с меню, обслуживаемым асинхронными клиентскими запросами

Karthik_Mahalingam

5