I have an image on my master page like this:
<img src="../Images/logo.jpg" />
The master page lies in Root/MasterPages/masterpage.master
Now this image is displayed in a content page which is in Root/SomeDir/ContentPage.aspx,
but it doesn't work in a content page which is in Root/SomeDir1/SomeDir2/ContentPage.aspx. Why?
Master Page HTML
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<style type="text/css">
#div_Main
{
height: 825px;
width: 1022px;
top: 16px;
left: 77px;
position: absolute;
margin-left: 14px;
}
#div_LeftPanel
{
width: 299px;
top: 179px;
left: 2px;
position: absolute;
height: 641px;
background-color: #7E8387;
}
#div_Content
{
width: 716px;
top: 180px;
left: 303px;
position: absolute;
height: 638px;
}
#div_Header
{
top: 0px;
left: 0px;
position: absolute;
height: 176px;
width: 1022px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="div_Main">
<div id="div_Header">
<img src="../Images/logo.jpg" />
</div>
<div id="div_Content">
<asp:ContentPlaceHolder ID="cph_WorkingArea" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="div_LeftPanel">
<br />
<br />
<br />
<br />
<br />
<asp:LinkButton
ID="lnkbtn_JObAspirantsList" runat="server"
style="color: #CFCFF3; font-size: xx-large"
onclick="lnkbtn_JObAspirantsList_Click">Job Aspirants List</asp:LinkButton>
<br />
<br />
<br />
<br />
<br />
<br />
<asp:LinkButton ID="lnkbtn_ERFList" runat="server"
style="color: #CFCFF3; font-size: xx-large" onclick="lnkbtn_ERFList_Click">ERF List</asp:LinkButton>
<br />
<br />
<br />
<br />
<br />
<br />
<asp:LinkButton ID="lnkbtn_InterviewFeedbackList" runat="server"
style="color: #CFCFF3; font-size: xx-large"
onclick="lnkbtn_InterviewFeedbackList_Click">Interview FeedbackList</asp:LinkButton>
<br />
<br />
<br />
<br />
<br />
<br />
<asp:LinkButton ID="lnkbtn_NewEmployeeList" runat="server"
style="color: #CFCFF3; font-size: xx-large"
onclick="lnkbtn_NewEmployeeList_Click">New Employees List</asp:LinkButton>
<br />
<br />
<br />
<asp:LinkButton ID="LinkButton1" runat="server" style="color: #CFCFF3; font-size: xx-large" onclick="LinkButton1_Click">LogOut</asp:LinkButton>
<br />
<br />
</div>
</div>
</form>
</body>
</html>
Content Page HTML
<%# Page Language="C#" MasterPageFile="~/MasterPages/HRMaster.Master" AutoEventWireup="true" CodeBehind="ERF.aspx.cs" Inherits="StarTechnologies.ERF" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cph_WorkingArea" runat="server">
<p>
<br />
<asp:GridView ID="GridView1" runat="server" Height="212px"
onselectedindexchanged="GridView1_SelectedIndexChanged" Width="434px">
</asp:GridView>
</p>
<br />
</asp:Content>
RPM1984 is almost right. You should use ~ to indicate a path relative to the root of your application. You should however translate that to a path the browser understands. If you are using ASP.NET controls like Image that is done automatically. If you're using HTML tags (without runat="server") you have to translate the path manually using Page.ResolveClientUrl().
For example:
<img src="<%= ResolveClientUrl( "~/Images/logo.jpg" ) %>"/>
In this case however, you're probably better off using the Image control:
<asp:Image runat="server" ImageUrl="~/Images/logo.jpg"/>
Try not to use relative paths.
Use absolute:
<img src="~/Images/logo.jpg" />
That is assuming "Images" is a folder underneath the root of your web application.
The thing to remember about Master Pages is that they really are syntactic sugar in a way (similar to partial classes) That is, when you put an image inside a MasterPage, the .NET CLR will create the content page with the Master info - so the image reference will be unchanged.
It's not ../Images from the Master, its ../Images from the Content it's placed upon.
In other words, to the client, there is only ONE page (ASPX - content page), it's not like a magical parent page has been created which holds onto URL references.
HTH
I had the same problem.
My master page's content didn't display but the Web Form content did.
What happens is that the content page is overwritting the master page's content.
I solved it creating a new ContentPlaceHolder in the MasterPage with ID="Example".
Then in the Web Form, I changed ContentPlaceholderID="OlderID" to ContentPlacerHolderID="Example".
Related
I currently create a wizard and its steps programmatically and I am trying to show the default side bar with its links to each step on the top instead of the side. Is this possible?
Wizard wiz = new Wizard();
//Do stuff with wizard steps
It's possible with CSS
ASP.NET declarative code
<asp:Wizard ID="ApplicationWizard" runat="server" DisplaySideBar="True">
<%-- LAYOUT --%>
<LayoutTemplate>
<div>
<asp:PlaceHolder ID="headerPlaceHolder" runat="server" />
</div>
<div id="stepIndicator">
<asp:PlaceHolder ID="sideBarPlaceHolder" runat="server" />
</div>
<div>
<asp:PlaceHolder ID="WizardStepPlaceHolder" runat="server" />
</div>
<div>
<asp:PlaceHolder ID="navigationPlaceHolder" runat="server" />
</div>
</LayoutTemplate>
<%-- HEADER --%>
<HeaderTemplate>
<h1 class="text-center">My Form</h1>
<%-- TODO: Add your header elements here --%>
</HeaderTemplate>
<%-- SIDEBAR --%>
<SideBarTemplate>
<ul id="header">
<asp:ListView ID="SideBarList" runat="server">
<ItemTemplate>
<li><asp:LinkButton ID="sideBarButton" runat="server" /></li>
</ItemTemplate>
<SelectedItemTemplate>
<li><asp:LinkButton ID="sideBarButton" runat="server" CssClass="active-step" /></li>
</SelectedItemTemplate>
</asp:ListView>
</ul>
</SideBarTemplate>
<%-- Wizard Steps --%>
<WizardSteps>
<asp:TemplatedWizardStep ID="AppStep1" runat="server" Title="Step 1">
<ContentTemplate>
<%-- TODO: Add your wizard step elements here --%>
</ContentTemplate>
</asp:TemplatedWizardStep>
<asp:TemplatedWizardStep ID="AppStep2" runat="server" Title="Step 2">
<ContentTemplate></ContentTemplate>
</asp:TemplatedWizardStep>
<asp:TemplatedWizardStep ID="AppStep3" runat="server" Title="Step 3">
<ContentTemplate></ContentTemplate>
</asp:TemplatedWizardStep>
<asp:TemplatedWizardStep ID="AppStep4" runat="server" Title="Step 4">
<ContentTemplate></ContentTemplate>
</asp:TemplatedWizardStep>
<asp:TemplatedWizardStep ID="AppStep5" runat="server" Title="Step 5">
<ContentTemplate></ContentTemplate>
</asp:TemplatedWizardStep>
</WizardSteps>
</asp:Wizard>
CSS Stylesheet
#stepIndicator {
list-style: none;
margin: 0px;
padding: 0px;
text-align: center;
}
#stepIndicator li {
display: inline-block;
}
#stepIndicator li a {
text-decoration: none;
padding: 10px;
display: block;
}
But how???:
On the SideBar template, create a list element
Inside the nested lis, insert the link button you want
The output will be the default format (sidebar on the side)
Add text-align: center for #stepIndicator to center the sidebar
Add display: inline-block for #stepIndicator li to align the the elements of #stepIndicator inline.
Using ASP.Net webforms I have a pop up containing 2 tabs, which display info on a feature, 'FEATURE PROPERTIES' and 'IMAGES'. Each time a new feature is clicked the pop up is updated with the new feature details.
I was making the call back to the server where updatePanel8 was being updated. Unfortuantelly I am trying to convert my website to telerik and I am having difficulties implenting this. I have read many Q's on telerik forms some suggest trying RadAjaxPanel others suggest tryiing RadAjaxManager, but either way I cant seem to get it working as I cant use an update panel inside a panel when I am using telerik.
**MY CODE:**
<asp:Panel ID="ViewFeatureProperties" runat="server" BackColor="Snow" Width="300"
HorizontalAlign="Center">
<asp:UpdatePanel runat="server" ID="UpdatePanel8" UpdateMode="Conditional" ChildrenAsTriggers="true"
Style="position: relative; overflow: hidden; background-color: White;
width: 300px; height: 300px; margin: 5px; text-align: center; outline-style: none; overflow-y: hidden; overflow-x:hidden;">
<ContentTemplate>
<div id="DivHolding2Tabs" class="overflowcontent webkit-scrollbar webkit-scrollbar-track webkit-scrollbar-thumb" style="width:100%;border-color:Black;border-width:1px;border-style:solid;">
<ul id="tabList" style="width:100%">
<li>Info </li>
<li>Images </li>
</ul>
<div id="tabs-1" class="WorkFlowLayout">
<b><font color="FF6600">Feature Properties </font></b>
<div id="divFeatureInfo" runat="server">
</div>
</div>
<div id="tabs-2" class="WorkFlowLayout">
<b><font color="FF6600">Images</font></b>
<div id="ImagesRelatingToFeatureDIV" runat="server">
</div>
</div>
</div>
<br />
<br />
<div class="buttonwrap">
<span id="Span5" class="ActionBtns">
<asp:Button ID="ViewFeatureWorkflowImagePostBackBtn" runat="server" Style="display: none;
visibility: hidden;" OnClick="ViewFeatureWorkflowImagePostBackBtn_Click" />
</span>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ViewFeatureWorkflowImagePostBackBtn" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</asp:Panel>
**CODE BEHIND**
protected void ViewFeatureWorkflowImagePostBackBtn_Click(object sender, EventArgs e)
{
ReloadUploadedImagesForFeatureWorkflow();
}
private void ReloadUploadedImagesForFeatureWorkflow()
{
//generate the new details for the popup
UpdatePanel8.Update();
script.Append("OpenPropertiesPopUp();");
ScriptManager.RegisterClientScriptBlock(UpdatePanel8, UpdatePanel8.GetType(), "OpenPropertiesPopupCall()",
script.ToString(),
true);
}
Some exmaples I have tried are:
<telerik:radajaxmanager id="ajaxManager1" runat="server" UpdatePanelsRenderMode="Inline"><%-- defaultloadingpanelid="RadAjaxLoadingPanel1" runat="server">--%>
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="ajaxManager1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="Panel1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:radajaxmanager>
<asp:Panel ID="Panel1" runat="server">
<div id="Div1" class="overflowcontent webkit-scrollbar webkit-scrollbar-track webkit-scrollbar-thumb"
style="width: 100%; border-color: Black; border-width: 1px; border-style: solid;">
<asp:Button ID="ViewFeatureWorkflowImagePostBackBtn" runat="server" Text="Update the first Panel" OnClick="ViewFeatureWorkflowImagePostBackBtn_Click" />
<asp:Label ID="Label4" runat="server" Text="Label4"></asp:Label>
<ul id="Ul1" style="width: 100%">
<li>Info </li>
<li>Images </li>
</ul>
<div id="tabs-1" class="WorkFlowLayout">
<b><font color="FF6600">Feature Properties </font></b>
<div id="divFeatureInfo" runat="server">
</div>
</div>
<div id="tabs-2" class="WorkFlowLayout">
<b><font color="FF6600">Images</font></b>
<div id="ImagesRelatingToFeatureDIV" runat="server">
</div>
</div>
</div>
<br />
<br />
<div class="buttonwrap">
<span id="Span6" class="ActionBtns">
<asp:Button ID="Button2" runat="server" Style="display: none; visibility: hidden;"
OnClick="ViewFeatureWorkflowImagePostBackBtn_Click" />
</span>
</div>
</asp:Panel>
<br />
<telerik:radajaxloadingpanel id="RadAjaxLoadingPanel2" runat="server" skin="Default"></telerik:radajaxloadingpanel>
code behind
UpdatePanel8.AjaxRequest;
// UpdatePanel8.ResponseScripts.Add(String.Format("$find('{0}').ajaxRequest();", UpdatePanel8.ClientID));
If calling the Update() server method is your requirement, I do not think you will be able to migrate to RadAjax. There is no server Update() method there, because the update panels are created dynamically.
If, however, you want to update Panel1 when ViewFeatureWorkflowImagePostBackBtn is clicked, you need an AJAX setup like this:
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Black"></telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="ViewFeatureWorkflowImagePostBackBtn">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="Panel1" />
</UpdatedControls>
</telerik:AjaxSetting>
<telerik:AjaxSetting AjaxControlID="Panel1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="Panel1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
Where I am assuming that the ViewFeatureWorkflowImagePostBackBtn button is still somewhere in the code. If it was replaced by a button with ID Button2, the AjaxControlID setting should use Button2 instead.
When I click 'Share', then it opens facebook share page in a new tab. I want to show temp.jpg in left bar in this page. How to do this?
test.aspx
<div id="page-wrap">
<!-- AnythingSlider #1 -->
<ul id="slider1" style="width: 778px; height: 452px; background:#fff;">
<li>
<div style="float: left; padding-right: 35px; padding-left:50px;">
<img src="../../img/temp.jpg" style="width: 264px;
height: 377px; border: none;" />
<uc:DownloadControl ID="DownloadControl1" runat="server" PageParameters="1" />
</div>
</li>
<li>
<uc:DownloadControl ID="DownloadControl2" runat="server" PageParameters="2" />
...
DownloadControl.ascx
<div style="float: left">
<a class="icerik" id="facebookShare" runat="server" target="_blank">
<img border="0" src="images/facebook.jpg" alt="Resorts"
title="Hotels & Resortss" /> Share </a>
DownloadControl.ascx.cs
protected void Page_Load(object sender, EventArgs e)
{
facebookShare.HRef = "http://www.facebook.com/sharer.php?u=http://www.test.com/test.aspx";
}
If you want to add custom information about your page while sharing with sharer.php, you must place additional open graph meta tags in the head of your page. For this example, test.com/test.aspx contains these tags:
<head>
<meta property="og:title" content="Test" />
<meta property="og:url" content="http://www.test.com/test.aspx" />
<meta property="og:image" content="http://www.test.com/img/temp.jpg" />
// other meta tags
</head>
More information about Open Graph protocol is here
i have webpages with master page which contain my css...When i add update panel in content palce holder, css on master page are working fine but same css not working in content page holder.
<%# Page Title="District Master" Language="C#" MasterPageFile="~/webpages/MasterPage_new.master"
AutoEventWireup="true" CodeFile="frmDistrict.aspx.cs" Inherits="webpages_frmDistrict" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<asp:ScriptManager ID="ScriptManager2" EnablePartialRendering="true" runat="server">
</asp:ScriptManager>
<div id="main_div">
<asp:UpdatePanel ID="uppnl" runat="server" Mode="Conditional">
<ContentTemplate>
<table style="width: 100%; float: left;">
<tr>
<td style="height: 100px; width: 100%; float: left;">
<asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
<asp:Button ID="btnSearchOK" runat="server" Text="Ok" Font-Names="Verdana" Font-Size="11px"
Width="6%" Font-Bold="True" OnClick="btnSearchOK_OnClick" />
<asp:Button ID="btnRefresh" runat="server" Text="Refresh" Font-Names="Verdana" Font-Size="11px"
Width="11%" Font-Bold="True" OnClick="btnRefresh_OnClick" />
<asp:Button ID="btnClose" runat="server" Text="Close" Font-Names="Verdana" Font-Size="11px"
Width="9%" Font-Bold="True" OnClick="btnClose_OnClick" />
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:Content>
That is because ASP.NET changes the id of all elements in the Content Panel and prepends the name of the master like id="content" would become id="body#content". To verify check the View Source in your browser.
Solution is to update your CSS according to the generated IDs.
I'm having a problem with the AjaxControlTollkit Tabs. I want to remove the borders of the tabs since I do not really need them (display reasons). Here is a simplified sample of my code:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default-Defaut.aspx.cs"
Inherits="TinTan._Default" MasterPageFile="~/CLF20.Master" Culture="auto"
UICulture="auto" EnableEventValidation="false" %>
<%# Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentMain" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"
EnablePageMethods="True" CombineScripts="True">
<Services>
<asp:ServiceReference Path="AutoComplete.asmx" />
</Services>
</asp:ToolkitScriptManager>
<div>
<!--tabs in which all the options will be avaible (using AJAX for faster respone)-->
<asp:UpdatePanel ID="UpdatePanel" runat="server" UpdateMode="Always">
<Triggers>
<asp:PostBackTrigger ControlID="btnPostBack" />
</Triggers>
<ContentTemplate>
<asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" OnClientActiveTabChanged="CheckActiveTab" OnActiveTabChanged="TabContainer_ActiveTabChanged"
BorderWidth="0px" >
<asp:TabPanel ID="tabAddTan" runat="server" Visible="false">
<HeaderTemplate>
Add Tan (Admin)
</HeaderTemplate>
<ContentTemplate>
<div class="divTable">
<div class="divRow">
<asp:Label ID="lblAddTanTitle" runat="server" Text="Add TAN" Font-Bold="true" Font-Size="Large"></asp:Label>
</div>
</div>
<asp:UpdatePanel ID="pnlAddTan" runat="server" UpdateMode="Always">
<ContentTemplate>
<div class="divTable">
<div class="divRow">
<asp:AsyncFileUpload OnUploadComplete="UploadComplete" runat="server" OnUploadedComplete="UploadComplete"
ID="AsynchAddTan" />
</div>
<div class="divRow">
<asp:Button ID="btnAddTanClick" runat="server" Text="Upload File" OnClick="UploadComplete" />
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</asp:TabPanel>
</asp:TabContainer>
Here is what I tried and the results:
Using the BorderWidth="0px", BorderStyle="none", BorderColor="white" properties: it did not work, the borders were unchanged
adding a CSS class and linking it the the TabContainer with the CssClass property: It removed ALL the style of the tabs, the tabs Header were only plain text. The borders were not there thought
Here is the CSS I used:
<style type="text/css">
.AjaxBorder .ajax__tab_body
{
border:0;
}
.AjaxBorder .ajax__tab_tab
{
height:13px;
padding:4px;
margin:0;
background:url(Tabs/tab.gif) repeat-x;
}
</style>
It is situated in teh master page. When I was trying to link it to the AjaxTabContainer with CssClass, the .Ajaxborder class was in the choices VS2010 was offering me.
Using the style property and putting border:0 none white; in it: same result as the 1st try, there was no changes to the ajax tabs.
The closest I have been to my goal was the 2nd option. But I do not understand why it removes all the style of the tabs when I am only telling him to remove the borders. I also do not understand why the other options do not do a single thing to the tabs.
Thanks
Hugo
In application i applied the CSS in the following way
add one dummy tabcontainer after script manager
Styles used
.ajax__tab_xp .ajax__tab_tab
{
height: 21px;
}
.ajax__tab_xp .ajax__tab_header
{
border:0;
border-top:0;
border-top-color:White;
}
use cssclass="ajax__tab_xp" for tabcontainer..It works for me
Also please go through this link if it is useful http://forums.asp.net/t/1300660.aspx/1
use
outline-style:none;
to remove the box on the active tab
or
outline-color:Blue;
to get a blue color, not that nasty brownish with blue on ajaxcontroltoolkit demo
... .ajax__tab_active .ajax__tab_tab {background:url('tab-active-verticalleft_b.gif') repeat-x; outline-style:none}
add !important
<style type="text/css">
.AjaxBorder .ajax__tab_body
{
border:0 !important;
}
.AjaxBorder .ajax__tab_tab
{
height:13px;
padding:4px;
margin:0;
background:url(Tabs/tab.gif) repeat-x;
}
</style>
Simply set outline to 0;
This is how I do it
.MyTabStyle .ajax__tab_active .ajax__tab_tab
{
outline:0;
}