データベースのデータを使用して、cshtml ページに複数の jquery スライダーを追加したいと考えています。基本的に、アクティブなときにデータベースからのデータを含むスライダーに動的にデータを入力するタブのコレクションがあります。
Razor C# フックを使用した cshtml コード:
<div class="tabbable">
<ul id="myTab" class="nav nav-tabs">
@foreach(var row in db.Query(queryCategory))
{
<li><a href="#@row.Food_Category" data-toggle="tab">@row.Food_Category</a></li>
}
</ul>
<div class="tab-content">
@{bool first = true;}
@foreach(var row in db.Query(queryCategory))
{
var ids= @row.Food_Category;
<div class="@{if (first){<text>tab-pane active</text> first = false;}else{<text>tab-pane</text>}}" id=@ids>
<p>I'm in @row.Food_Category.</p>
<div class="list_carousel">
<ul id="foo">
@foreach(var row1 in db.Query("SELECT * FROM Food WHERE Food_Category = @0", ids))
{
<li>@row1.Food_ID</li>
}
</ul>
<div class="clearfix"></div>
<a id="prev2" class="prev" href="#"><</a>
<a id="next2" class="next" href="#">></a>
<div id="pager2" class="pager"></div>
</div>
</div>
}
</div>
</div><!--tabbable-->
焦点を当てる必要があると思われるビット: コードの残りの部分は、このビットを除いて動的です。データベース列の項目数に応じて、順序付けされていないリスト (foo1、foo2、foo3 など) ごとに一意の ID を取得する方法がわかりません。
<ul id="foo">
@foreach(var row1 in db.Query("SELECT * FROM Food WHERE Food_Category = @0", ids))
{
<li>@row1.Food_ID</li>
}
</ul>
Jquery ビット: ここではわかりませんが、動的に指定された #id の範囲に対してこのオプションを true に設定する必要があると思います。
<script>
//Carousel
$('#foo').carouFredSel({
width: '100%',
scroll: 2,
auto: false,
prev: '#prev2',
next: '#next2',
pagination: "#pager2",
mousewheel: true,
swipe: {onTouch: true}
});
</script>
私はwebmatrixとjqueryを使い始めたばかりですが、ご容赦ください。ありがとう