asp.net - HTMLとASP.NET

Question

マスターページを作成し、別のWebサイトからhtmlをコピーしましたが、そのデザインをマスターページで使用したいと思います。リンクをクリックすると問題が発生するため、デザインを順番に取得しました。アプリが起動したら、リンクをクリックすると、そのリンクに移動します。別のリンクに移動したい場合は、別のページの場所にフォルダー名が追加されます。例は打撃です：

http://mydomain.com/AdminSetup/Financial/AddIncome.aspx

ページ1-別のページに移動したい場合、これはURLで発生することです

http://mydomain.com/AdminSetup/Financial/Payroll/InitiatePayroll.aspx

この2番目のページの実際の場所は/Payroll/InitiatePayroll.aspxです。

私はこれが起こっていることを理解していません、いくつかの助けをお願いします。ありがとうございました

<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="SSP.master.vb" Inherits="SSPayroll.SSP" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Free template built by slicejack.com</title>

<link type="text/css" media="screen" rel="stylesheet" href="stylesheets/reset.css" />
<link type="text/css" media="screen" rel="stylesheet" href="stylesheets/main.css" />
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div id="header">
  <h1><a href="Default.aspx">Company logo</a></h1>
  <ul>
    <li><a href="Default.aspx" class="active">Home</a></li>
    <li><a href="Payroll/InitiatePayroll.aspx">Payroll</a></li>
    <li><a href="~/AdminSetup/Financial/AddIncome.aspx">Finance</a></li>
    <li><a href="interior.html">Testimonials</a></li>
    <li><a href="interior.html">Blog</a></li>
    <li><a href="interior.html">Contact</a>
      </li>
  </ul>
</div>
<!-- //#header -->
<div id="sub-header">
  <div id="sub-header-inner">
    <h2>Free high quality template</h2>
    <p class="highlight">The template is made by following the latest web standards.
      PSD Files are available upon request. </p>
    <p>This website is ideal for representing a product or service. Its code is descriptive so that is understandable even to those who don't have good knowledge of web technology. All of the images are optimized for web and website will display correctly in all web browsers.</p>
    <p class="learn-more"><a href="interior.html">Learn more</a></p>
    <img src="images/layout/sub_header_img.png" alt="" /> </div>
</div>
<!-- //#sub-header -->

<div id="content" class="clearfix">
  <div id="content-inner">

        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

        </asp:ContentPlaceHolder>

</div>
<!-- //#content -->

<div id="footer">
  <ul>
    <li><a href="Default.aspx" class="active">Home</a></li>
    <li><a href="Payroll/InitiatePayroll.aspx">Payroll</a></li>
    <li><a href="interior.html">Services</a></li>
    <li><a href="interior.html">Testimonials</a></li>
    <li><a href="interior.html">Blog</a></li>
    <li><a href="interior.html">Contact</a></li>
  </ul>
  <p>Website designed by: <a href="http://www.agilo.hr">Agilo</a>, Code: <a href="http://www.slicejack.com" title="PSD to (X)HTML service">Slicejack</a></p>
</div>
<!-- //#footer -->

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

これは私のマスターページです。

body { background: #fff url(../images/layout/body.gif) top center no-repeat; font-family: Arial, Helvetica, sans-serif; }

#header { width: 960px; margin: 0 auto; height: 118px; position: relative; }
#header h1 { padding-top: 29px; }
#header h1 a { background: url(../images/layout/logo.png) no-repeat; display: block; text-indent: -5000px; width: 156px; height: 22px; }

#header fieldset { background: url(../images/layout/search.png) no-repeat; width: 181px; height: 25px; position: absolute; right: 0; top: 26px; }
#header fieldset .search { background: none; font-size: 11px; display: block; color: #969696; border: none; padding: 0 8px 0 8px; width: 138px; margin-top: 5px;  }

#header ul { position: absolute; top: 88px; left: 0; }
#header ul li { display: inline; }
#header ul li a { font-size: 11px; text-decoration: none; text-transform: uppercase; margin-right: 20px; color: #fff; }
#header ul li a:hover, #header ul li a.active { color: #acfc5d; }


#sub-header { background: #7db63c url(../images/layout/sub_header.gif) top repeat-x; color: #fff; height: 281px; }
#sub-header-inner { width: 960px; margin: 0 auto; padding: 34px 0; position: relative; }
#sub-header h2 { background: url(../images/headings/main.png) no-repeat; width: 298px; height: 23px; margin-bottom: 12px; text-indent: -5000px; }
#sub-header p { margin-bottom: 18px; width: 610px; font-size: 13px; line-height: 1.5; }
#sub-header p.highlight { font-size: 16px; }
#sub-header p.learn-more { margin: 0; }
#sub-header p.learn-more a { display: block; text-align: center; font-size: 13px; color: #fff; background: url(../images/buttons/learn_more.png) no-repeat; height: 27px; width: 105px; text-decoration: none; padding-top: 4px; }
#sub-header p.learn-more a:hover { background-position: right; }
#sub-header img { position: absolute; right: 0; top: 30px; }

#sub-header.interior { height: 142px; background: url(../images/layout/sub_header_interior.gif) repeat-x; }
#sub-header.interior p { width: auto; }
#sub-header.interior #sub-header-inner { padding: 30px 0 0 0; }

#sub-header.interior h2 { background: url(../images/headings/interior.png) no-repeat; }


#content { background: url(../images/layout/content.gif) top repeat-x; margin-bottom: 20px; }
#content-inner { width: 960px; margin: 0 auto; padding: 30px 0; }
#content .column { width: 305px; float: left; margin-right: 20px; }
#content .column.last { margin-right: 0; }
#content .column h3 { text-indent: -5000px; height: 16px; width: 300px; margin-bottom: 8px; }
#content .column h3#about { background: url(../images/headings/about.png) no-repeat; }
#content .column h3#services { background: url(../images/headings/services.png) no-repeat; }
#content .column h3#connect { background: url(../images/headings/connect.png) no-repeat; }
#content .column p { font-size: 11px; line-height: 1.6; margin-bottom: 12px; color: #333; }
#content .column a { color: #6fa235; }
#content .column a:hover { color: #527628; }
#content .column p.read-more a { display: block; width: 95px; height: 23px; font-size: 11px; text-decoration: none; color: #360; background: url(../images/buttons/read_more.gif) left no-repeat; text-align: center; padding-top: 5px; }
#content .column p.read-more a:hover { background-position: right; }
#content .column img.left { float: left; margin: 3px 10px 0 0; padding: 1px; background: #fff; border: 2px solid #ececec; }
#content .column strong { font-weight: bold; }
#content .column em { font-style: italic; }

#content .column.main { width: 600px; }
#content .column.main h2, #content .column.main h3, #content .column.main h4, #content .column.main h5 { margin-bottom: 12px; font-weight: bold; color: #333; }
#content .column.main h2 { text-indent: -5000px; height: 15px; width: 590px; }
#content .column.main h2#lorem { background: url(../images/headings/lorem.png) no-repeat; }
#content .column.main h3 { text-indent: 0; font-size: 14px; }
#content .column.main h4 { font-size: 12px; }
#content .column.main h5 { font-size: 11px; }
#content .column.main table { width: 100%; border: 1px solid #e3e3e3; font-size: 11px; margin-bottom: 12px; }
#content .column.main table th { padding: 6px 10px; border: 1px solid #e3e3e3; font-weight: bold; color: #6fa235; }
#content .column.main table td { padding: 6px 10px; border: 1px solid #e3e3e3; color: #333; }
#content .column.main table .odd { background: #fafafa; }
#content .column.main ul li { font-size: 11px; margin-left: 25px; list-style: disc; }

#content .column.sidebar { width: 310px; float: right; margin-right: 0; }
#content .column.sidebar h3 { text-indent: -5000px; height: 15px; width: 310px; }
#content .column.sidebar h3#example { background: url(../images/headings/example.png) no-repeat; }
#content .column.sidebar h3#touch { background: url(../images/headings/touch.png) no-repeat; }
#content .column.sidebar p { color: #666; }
#content .column.sidebar p.read-more { margin-bottom: 20px; }
#content .column.sidebar fieldset label { font-size: 11px; display: block; margin-bottom: 5px; color: #666; }
#content .column.sidebar fieldset li { margin-bottom: 10px; }
#content .column.sidebar fieldset .text, #content .column.sidebar fieldset textarea { border: 1px solid #e3e3e3; -webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px; padding: 3px; font-size: 11px; color: #666; width: 202px; }
#content .column.sidebar fieldset .text:hover, #content .column.sidebar fieldset textarea:hover { border: 1px solid #c5c4c4; }
#content .column.sidebar fieldset textarea { height: 90px; width: 302px; }
#content .column.sidebar fieldset .button { background: url(../images/buttons/read_more.gif) no-repeat; width: 95px; height: 28px; text-align: center; color: #360; font-size: 11px; border: none; cursor: pointer; }
#content .column.sidebar fieldset .button:hover { background-position: right; }


#footer { clear: both; margin: 0 auto; width: 940px; padding: 6px 10px 12px 10px; border-top: 1px solid #e5e5e5; position: relative; }
#footer ul li { display: inline; }
#footer ul li a { font-size: 11px; text-decoration: none; color: #b5b5b5; margin-right: 12px; }
#footer ul li a.active, #footer ul li a:hover { color: #6b9f3c; }
#footer p { position: absolute; right: 10px; top: 10px; font-size: 11px; color: #b5b5b5; }
#footer p a { text-decoration: none; color: #6b9f3c; }

これは私のCSSクラスです

score 1 · Accepted Answer

他の人が示唆するチルダ ~ は、サーバーコントロールでのみ使用して、ルートに対して相対的にレンダリングできます。サーバーコントロールへのリンクを変更してみてください

<asp:HyperLink ID="myId" CssClass="active" NavigateUrl="~/Default.aspx" runat="server">Home</asp:HyperLink>

score 0 · Accepted Answer

asp:HyperLinkただの s の代わりに sを使ってみてくださいa:

<asp:HyperLink id="hlPayroll" runat="server" 
    NavigateUrl="~/Payroll/InitiatePayroll.aspx"
    Text="Payroll"></asp:HyperLink>

サーバーコントロールは、チルダがあるルートでクライアント URL を解決します。

score 0 · Accepted Answer

URL は、現在のフォルダーに対して相対的に解決されています。

給与リンクを次のいずれかに変更します。

<li><a href="~/Payroll/InitiatePayroll.aspx">Payroll</a></li> (ルートに対して相対的に解決)

<li><a href="../Payroll/InitiatePayroll.aspx">Payroll</a></li> (現在のフォルダの兄弟として解決)

asp.net - HTMLとASP.NET

3 に答える 3

Related

Reference