2017-07-13 24 views
-3

我對我的MVConlineShop項目的工作,這是我做了什麼至今: Image如何創建一個URL鏈接的路由到一個動作(MVC)

我有類別和產品數據庫在我的SQL server,現在我想要按任何類別顯示產品在它,它會顯示他們,而不是如圖中所示的第一產品和第二產品,這是怎麼做的任何想法?已經檢查Ajax,但它會爲我做這個嗎? 這是我_Layout.cshtml

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 
    <title>OnlineShop - MVCOnlineShop</title> 
    <!-- Bootstrap Core CSS --> 
    <link href="~/Content/css/bootstrap.min.css" rel="stylesheet"> 
    <!-- Custom CSS --> 
    <link href="~/Content/css/shop-homepage.css" rel="stylesheet"> 
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
     <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
    <![endif]--> 
</head> 
<body> 
    <!-- Navigation --> 
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
     <div class="container"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="#">MVCOnlineShop</a> 
      </div> 
      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav"> 
        <li> 
         <a href="#">About</a> 
        </li> 
        <li> 
         <a href="#">Services</a> 
        </li> 
        <li> 
         <a href="#">Contact</a> 
        </li> 
       </ul> 
      </div> 
      <!-- /.navbar-collapse --> 
     </div> 
     <!-- /.container --> 
    </nav> 
    <!-- Page Content --> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-3"> 
       <p class="lead">Categories:</p> 
       <div class="list-group"> 
        @using MVCOnlineShop.Models; 

@{ 
    // stores the Session content in a var 
    var Categories = Session["Categories"] as List<Category>; 
} 

@*Checks if the Session variable is correct*@ 
@if (Categories != null) 
{ 
    <ul> 
     @*For each category in the Session var, display the link*@ 
     @foreach (var Category in Categories) 
     { 
      <li> 
       @Html.ActionLink(Category.CategoryName, "Browse", new { Category = Category.CategoryName }) 
      </li> 
     } 
    </ul> 
} 
       </div> 
      </div> 
      <div class="col-md-9"> 
       <div class="row carousel-holder"> 
        <div class="col-md-12"> 
         <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
          <ol class="carousel-indicators"> 
           <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
           <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
           <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
          </ol> 
          <div class="carousel-inner"> 
           <div class="item active"> 
            <img class="slide-image" src="http://placehold.it/800x300" alt=""> 
           </div> 
           <div class="item"> 
            <img class="slide-image" src="http://placehold.it/800x300" alt=""> 
           </div> 
           <div class="item"> 
            <img class="slide-image" src="http://placehold.it/800x300" alt=""> 
           </div> 
          </div> 
          <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> 
           <span class="glyphicon glyphicon-chevron-left"></span> 
          </a> 
          <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> 
           <span class="glyphicon glyphicon-chevron-right"></span> 
          </a> 
         </div> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="col-sm-4 col-lg-4 col-md-4"> 
         <div class="thumbnail"> 
          <img src="http://placehold.it/320x150" alt=""> 
          <div class="caption"> 
           <h4 class="pull-right">$24.99</h4> 
           <h4> 
            <a href="#">First Product</a> 
           </h4> 
           <p>See more snippets like this online store item at <a target="_blank" href="http://www.bootsnipp.com">Bootsnipp - http://bootsnipp.com</a>.</p> 
          </div> 
          <div class="ratings"> 
           <p class="pull-right">15 reviews</p> 
           <p> 
            <span class="glyphicon glyphicon-star"></span> 
            <span class="glyphicon glyphicon-star"></span> 
            <span class="glyphicon glyphicon-star"></span> 
            <span class="glyphicon glyphicon-star"></span> 
            <span class="glyphicon glyphicon-star"></span> 
           </p> 
          </div> 
         </div> 
        </div> 
        <div class="col-sm-4 col-lg-4 col-md-4"> 
         <div class="thumbnail"> 
          <img src="http://placehold.it/320x150" alt=""> 
          <div class="caption"> 
           <h4 class="pull-right">$64.99</h4> 
           <h4> 
            <a href="#">Second Product</a> 
           </h4> 
           <p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
          </div> 
          <div class="ratings"> 
           <p class="pull-right">12 reviews</p> 
           <p> 
            <span class="glyphicon glyphicon-star"></span> 
            <span class="glyphicon glyphicon-star"></span> 
            <span class="glyphicon glyphicon-star"></span> 
            <span class="glyphicon glyphicon-star"></span> 
            <span class="glyphicon glyphicon-star-empty"></span> 
           </p> 
          </div> 
         </div> 
        </div> 
        <div class="col-sm-4 col-lg-4 col-md-4"> 
         <div class="thumbnail"> 
          <img src="http://placehold.it/320x150" alt=""> 
          <div class="caption"> 
           <h4 class="pull-right">$74.99</h4> 
           <h4> 
            <a href="#">Third Product</a> 
           </h4> 
           <p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
          </div> 
          <div class="ratings"> 
           <p class="pull-right">31 reviews</p> 
           <p> 
            <span class="glyphicon glyphicon-star"></span> 
            <span class="glyphicon glyphicon-star"></span> 
            <span class="glyphicon glyphicon-star"></span> 
            <span class="glyphicon glyphicon-star"></span> 
            <span class="glyphicon glyphicon-star-empty"></span> 
           </p> 
          </div> 
         </div> 
        </div> 
        <div class="col-sm-4 col-lg-4 col-md-4"> 
         <div class="thumbnail"> 
          <img src="http://placehold.it/320x150" alt=""> 
          <div class="caption"> 
           <h4 class="pull-right">$84.99</h4> 
           <h4> 
            <a href="#">Fourth Product</a> 
           </h4> 
           <p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
          </div> 
          <div class="ratings"> 
           <p class="pull-right">6 reviews</p> 
           <p> 
            <span class="glyphicon glyphicon-star"></span> 
            <span class="glyphicon glyphicon-star"></span> 
            <span class="glyphicon glyphicon-star"></span> 
            <span class="glyphicon glyphicon-star-empty"></span> 
            <span class="glyphicon glyphicon-star-empty"></span> 
           </p> 
          </div> 
         </div> 
        </div> 
        <div class="col-sm-4 col-lg-4 col-md-4"> 
         <div class="thumbnail"> 
          <img src="http://placehold.it/320x150" alt=""> 
          <div class="caption"> 
           <h4 class="pull-right">$94.99</h4> 
           <h4> 
            <a href="#">Fifth Product</a> 
           </h4> 
           <p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
          </div> 
          <div class="ratings"> 
           <p class="pull-right">18 reviews</p> 
           <p> 
            <span class="glyphicon glyphicon-star"></span> 
            <span class="glyphicon glyphicon-star"></span> 
            <span class="glyphicon glyphicon-star"></span> 
            <span class="glyphicon glyphicon-star"></span> 
            <span class="glyphicon glyphicon-star-empty"></span> 
           </p> 
          </div> 
         </div> 
        </div> 

       </div> 
      </div> 
     </div> 
    </div> 
    <!-- /.container --> 
    <div class="container"> 
     <hr> 
     <!-- Footer --> 
     <footer> 
      <div class="row"> 
       <div class="col-lg-12"> 
        <p>Copyright &copy; My MVCOnlineShop Website 2017</p> 
       </div> 
      </div> 
     </footer> 
    </div> 

    <div> 
     @RenderBody() 
    </div> 

    <!-- /.container --> 
    <!-- jQuery --> 
    <script src="~/Scripts/js/jquery.js"></script> 
    <!-- Bootstrap Core JavaScript --> 
    <script src="~/Scripts/js/bootstrap.min.js"></script> 

</body> 
</html> 
+0

S.O.不是一個人們會爲你工作的地方。你至少需要把一些努力尋求幫助,如果想以後你有問題,你可以問 –

+0

我才知道,但你可以請告訴我如何做它,我應該做的步驟的過程中,我會做他們@ Louis-RochTessier – Ahmad

+1

請根據我的最佳知識,到以下鏈接學習AjaxLink,它將完全實現您正在嘗試實現的目標。 http://www.c-sharpcorner.com/UploadFile/abhikumarvatsa/ajax-actionlink-and-html-actionlink-in-mvc/ – Blue

回答

1

您創建的路由到您的類別/產品控制器的動作(取決於你如何打破它)有一個ID,蛞蝓,或別的東西,唯一標識分類的URL鏈接。

然後,您可以使用此標識要麼查找類別或與該類別的所有產品。同樣,有多種方法可以解決這個問題,所以這取決於你想要的。如果您查看該類別,則需要使用Include同時熱切加載相關產品。

然後,您可以直接退回的產品類別/列表視圖或者您可能想要映射到一個視圖模型(一個或多個)第一。如果你走第二條路線,你只需要返回你的視圖模型。

+0

ohh ok thanksss,我會試試這個@ChrisPratt – Ahmad

1

正確的做法是

  1. 創建partialview加載類
  2. 創建一個局部視圖來加載產品
  3. 創建一個索引視圖和負載無論是在指數
  4. 更新的產品類別上單擊查看使用AJAX
+0

謝謝@krishna – Ahmad

+0

歡迎您 – Krishna

+0

只能在佈局中做所有事情都不是正確的方法。佈局是爲了頁眉,頁腳和菜單等,這是常見的應用程序 – Krishna

相關問題