電子商取引のウェブサイトに表示されているように、MVCのグリッド形式の商品リストを表示する

データベースから商品のリストを取得していますが、私のeコマースプロジェクトの3x4グリッド（gridviewによるリストではありません）画像 Amazon Screenshot 電子商取引のウェブサイトに表示されているように、MVCのグリッド形式の商品リストを表示する

制限付きアイテムのみを表示するようにページングも実装したいと考えています。

出典

2017-06-20 Prasoon Deva

はStackOverflowのへようこそは、あなたの質問はあまりにもありますあなたがより具体的でなければならないより速い答えを得るためには広範囲：例えばあなたは何を試しましたか？いくつかのコードがありますか？グリッドビューの仕組みについては、たくさんの記事で説明しています。この質問を明確にする方法については、How to Askページを参照してください。 – nramirez

私はそれを達成するための手がかりを持っていないので、私はコードを持っていません。私は知ってほしいlistviewまたはapiのようなhtlmコントロールは、私が渡すリスト内のオブジェクトを反復するために使用することができますビューと各オブジェクトをグリッドに入れてください –

基本的なHTMLを使用し、シンプルなグリッドシステムを持つブートストラップのようなCSSライブラリを使用すると、http://getbootstrap.com/css/#グリッドには、bootsnippのいくつかの例があります。https://bootsnipp.com/snippets/featured/crowdfunding-gridを使用して、より多くのヘルプが必要な場合は教えてください。一般的な例を書くことができますMVC。 – nramirez

あなたが製品のリストを持っている場合は、MVCとブートストラップを使用して次のことができます。あなたがここにブートストラップで私が使用しhttp://getbootstrap.com/css/

を何ができるかについての詳細情報を見つけることができ

@model Products[] 

<div class="container-fluid"> 
    @for (var i = 0; i < Model.Length; i += 4) 
    { 
     <div class="row"> 
      @for (var j = i; j < i + 4; j++) 
      { 
       <div class="col-md-3"> 
        <div class="thumbnail"> 
         <img src="@Model[j].Url" alt="..."> 
         <div class="caption"> 
          <h3>@Model[j].Label</h3> 
          <p>@Model[j].Description</p> 
          <p> 
           <a href="#" class="btn btn-primary" role="button">Add Cart</a> <a href="#" class="btn btn-default" role="button">View</a> 
          </p> 
         </div> 
        </div> 
       </div> 
      } 
     </div> 


    } 
</div>

グリッドシステムhttp://getbootstrap.com/css/#grid

とサムネイル：http://getbootstrap.com/components/#thumbnails

出典

2017-06-20 20:32:02 nramirez

電子商取引のウェブサイトに表示されているように、MVCのグリッド形式の商品リストを表示する

答えて

関連する問題