2010-12-29 6 views
3

まず、mvc3プロジェクトにjquery UIがありますが、テーマのCSSファイルはありません。jquery ui css asp.net mvc3ページでの読み込みと作成に問題がありません(予期しないトークンエラー)

EditorFor DateTimeをオーバーライドするために必要な日付を選んでいました。私は今日、スクリプトでプロジェクトに付属しているデフォルトのjquery UIファイルを使用して始めました。日付ピッカーは、Site.cssに基づいて完成した混乱したUIでのみ正常に表示されます。

これで、jquery(の開始テーマ)のビルドをダウンロードして、それをまとめる方法についてthis pageに続きました。

私は私のページはこのようになりますT4MVCを使用しています:
Layout.cshtml

<script src="@Links.Scripts.jquery_1_4_4_js" type="text/javascript"></script> 
<link href="@Links.Content.Site_css" rel="stylesheet" type="text/css" /> 
<script src="@Links.Content.start.jquery_ui_1_8_7_custom_css" type="text/javascript"></script> 

Create.cshtml

<script src="@Links.Scripts.jquery_validate_min_js" type="text/javascript"></script> 
    <script src="@Links.Scripts.jquery_validate_unobtrusive_min_js" type="text/javascript"></script> 
    <script src="@Links.Scripts.jquery_ui_1_8_7_custom_min_js" type="text/javascript"></script> 

そして、これが結果です:
alt text

どのようなアイデアでも、私はスクリプトとCSSのタグを別の場所に置く場所の組み合わせを試しましたが、何も動作していないようです。


更新:だから私が代わりにレイアウトで<link>タグの<script>を持っているとんまでした!しかし、まだ問題があります。日付ピッカーは、CSSとSite.cssから表示します。
alt text


アップデート2:ソリューション

でだから私はクロームをチェックし、リソースの下で、私はjqueryのCSSファイルを参照することはできません。私はfiddlerを発射し、私はcssファイルのための要求を見ない。

私はそれを見ます!

<link href="@Links.Content.start.jquery_ui_1_8_7_custom_css" **rel="Stylesheet"** type="text/css" />

はい!そうです、私はrelを追加しませんでした!

+0

これはおそらくjavascriptエラーです。あなたはあなたのJavaScriptを投稿できますか? – jfar

+0

@jfar updated answer。 – gideon

答えて

3

Layout.cshtmlでは、スクリプトタグを使用してCSSファイルを組み込みます。 変更:あなたは日付ピッカーの周りに包装容器を配置する必要があります

<link href="@Links.Content.start.jquery_ui_1_8_7_custom_css" rel="stylesheet"></link> 
+0

甘い主よ!これはリリース3日後のリリース(プレビューリリース= P)のときの状況です。ありがとう..しかし、まだ問題があります。回答を更新しています... – gideon

+0

jsfiddle.netにhtml/css/jsを投稿できますか? – Chandu

+1

ありがとうサイバネーション!!私は今停止して映画を見るつもりです!! – gideon

1

<script src="@Links.Content.start.jquery_ui_1_8_7_custom_css" type="text/javascript"><script>。これを行うために2つのステップを取るよ:

  1. jqueryのUIファイルをダウンロードし、「高度なテーマ設定」をクリックして「CSSのスコープ」のためのフィールドがよ。これにより、datepickerのcssを特定のクラス/スコープにローカライズすることができます。この例では、 "jqueryui_element"と呼ぶことにしましょう。

  2. 新しいcssファイルを接続したら、定義したcssクラス/スコープでそれをラップする必要があります。

    $('#ui-datepicker-div').wrap('<div class="jqueryui_element"></div>');

#ui-datepicker-divは、DatePickerの要素に適用されますデフォルトのIDです:私はこれを行うために見つけた最も簡単な方法は、javascriptの次の行です。何らかの理由でこれを変更した場合は、ここでも更新する必要があります。

希望に役立ちます!

+0

+1非常に面白いです。これはいつか後で私のために便利になるかもしれない=) – gideon

関連する問題