0

次のようなファイル構造があります。

/root
  /images
    image1.png
    image2.png
    button1.png
    button2.png
  /css
    app.css
    core.css
  /scripts
    jquery-1.6.4.min.js
    jquery.mobile-1.1.0.min.js
  /path1
    /pathA
      index.cshtml
      page1.cshtml
    index.cshtml
  /path2
    /pathA
      index.cshtml
      page1.cshtml
    /pathB
      index.cshtml
      page1.cshtml
    index.cshtml
  index.cshtml
  _layout.cshtml

すべての .cshtml ファイルは、共有コンテンツの _layout.cshtml に依存しています。私の _layout.cshtml ファイルは次のようになります。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">

    <link rel="stylesheet" href="/css/core.css" />    
    <link rel="stylesheet" href="/css/app.css" />

    <script src="/scripts/jquery-1.6.4.min.js" type="text/javascript"></script> 
    <script src="/scripts/jquery.mobile-1.1.0.min.js" type="text/javascript"></script>

    <style type="text/css">
        #button1 .ui-icon { background: url(/images/button1.png) }
        #button2 .ui-icon { background: url(/images/button2.png)  }     
    </style>

</head>
<body>
    @RenderBody()
</body>
</html>

このファイルは、「/」で始まるすべての URL を参照します。残念ながら、アプリを PhoneGap に移動すると、これは機能しません。先頭の「/」をすべて相対パスに置き換えたいと思っていました。たとえば、/path1/pathA/index.cshtml にアクセスした場合、2 つのボタンの CSS 定義は次のようになります。

  #button1 .ui-icon { background: url(../../images/button1.png) }
  #button2 .ui-icon { background: url(../../images/button2.png)  }

上記のようにパスが相対的になるようにパスを自動的に変更する方法はありますか? 私は自分が欲しいものに意味がありますか?

4

1 に答える 1

3

たとえば、組み込みの html ヘルパーを使用することをお勧めします。

<script src="@Url.Content("~/Scripts/jquery-1.6.4.min.js")" type="text/javascript"></script>

...

#button1 .ui-icon { background: url(@Url.Content("~/Content/images/button1.png")) }
于 2012-07-20T14:51:59.727 に答える