C＃剃刀頁面動態與屬性創建的div

Question

我有以下CSHTML代碼：

<div class="container-fluid projects padding-top-small"> 
    <div class="row"> 
    <div class="col-sm-6 col-md-3"> 
    <div class="project-inner"> 
     <a href="service1.html">  
      <img src="assets/img/portfolio/image1.jpg" alt=""> 
      <div class="project-caption"> 
       <div class="project-details"> 
        <p><i class="fa fa-plus fa-lg"></i></p> 
        <h3>Service 1</h3> 
        <p><small>Short Description 1</small></p> 
       </div> 
      </div> 
     </a> 
    </div> 
</div> 

<div class="col-sm-6 col-md-3"> 
    <div class="project-inner"> 
     <a href="service2.html">  
      <img src="assets/img/portfolio/image2.jpg" alt=""> 
      <div class="project-caption"> 
       <div class="project-details"> 
        <p><i class="fa fa-plus fa-lg"></i></p> 
        <h3>Service 2</h3> 
        <p><small>Short Description 2</small></p> 
       </div> 
      </div> 
     </a> 
    </div> 
</div> 

<div class="col-sm-6 col-md-3"> 
    <div class="project-inner"> 
     <a href="service1.html">  
      <img src="assets/img/portfolio/image3.jpg" alt=""> 
      <div class="project-caption"> 
       <div class="project-details"> 
        <p><i class="fa fa-plus fa-lg"></i></p> 
        <h3>Service 3</h3> 
        <p><small>Short Description 3</small></p> 
       </div> 
      </div> 
     </a> 
    </div> 
</div> 

<div class="col-sm-6 col-md-3"> 
    <div class="project-inner"> 
     <a href="service1.html">  
      <img src="assets/img/portfolio/image4.jpg" alt=""> 
      <div class="project-caption"> 
       <div class="project-details"> 
        <p><i class="fa fa-plus fa-lg"></i></p> 
        <h3>Service 4</h3> 
        <p><small>Short Description 4</small></p> 
       </div> 
      </div> 
     </a> 
    </div> 
</div> 
    </div> 
</div> 

幾乎一切是硬編碼的HTML標籤。

我想能夠動態呈現它們。

在我的控制器中，我檢索由以下項目組成的服務對象列表：SERVICE_URL，SERVICE_IMAGE_URL，SERVICE_NAME和SERVICE_DESCRIPTION。這些列表存儲在ViewBag中（不確定viewbag是否是最好的佔位符）。

<div class="col-sm-6 col-md-3"> 
    <div class="project-inner"> 
     <a href="SERVICE_URL">  
      <img src="SERVICE_IMAGE_URL" alt=""> 
      <div class="project-caption"> 
       <div class="project-details"> 
        <p><i class="fa fa-plus fa-lg"></i></p> 
        <h3>SERVICE_NAME</h3> 
        <p><small>SERVICE_DESCRIPTION</small></p> 
       </div> 
      </div> 
     </a> 
    </div> 
</div> 

我想要實現的是讓每個div動態呈現，以便我能夠僅顯示可用的服務。

Controller.cs

public class myService 
{ 
    public string service_url { get; set; } 
    public string service_image_url { get; set; } 
    public string service_name { get; set; } 
    public string service_description { get; set; } 
} 

private void loadServices() 
{ 
    List<myService> myServices = new List<myService>(); 

    for(int i=0; i<3; i++) 
    { 
    myService msvc = new myService(); 
    msvc.service_url = "service_url" + i.ToString() + ".html"; 
    msvc.service_image_url = "image_url" + i.ToString() + ".jpg"; 
    msvc.service_name = "Service " + i.ToString(); 
    msvc.service_description = "Service Description " + i.ToString(); 

    myServices.Add(msvc); 
    } 

    ViewBag.DataServices = myServices; 
} 

public ActionResult Home() 
{ 
    loadServices(); 
    return this.RedirectToAction("Index", "Controller"); 
} 

改寫的問題： 鑑於我的控制，我有服務的列表，並將它們存儲到ViewBag，我怎麼生成與剃刀上頁的DIV從硬編碼HTML提供的屬性？

Answer 1

我構建了這個工作原型，並會運行你通過每個部分的步驟。那麼我建議你找對MVC編程剃刀一些很好的基礎書籍，從頭開始是有很多細節的學習：

1. 使用任何類單獨的文件，並把模型在模型文件夾中。
2. 使用適當的基於標準的命名/特性（導致上限特性&類，「駝峯」通常）

例如適當套管模型\ MyService.cs：

namespace WebApplication.Models 
{ 
    public class MyService 
    { 
     public string ServiceUrl { get; set; } 
     public string ServiceImageUrl { get; set; } 
     public string ServiceName { get; set; } 
     public string ServiceDescription { get; set; } 
    } 
} 

你Home控制器想要一個Services動作，因此該URL的路由是從有意義/Home/Services

控制器\ HomeController.cs：

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Mvc; 
using WebApplication5.Models; 

namespace WebApplication.Controllers 
{ 
    public class HomeController : Controller 
    { 
     private List<MyService> LoadServices() 
     { 
      List<MyService> myServices = new List<MyService>(); 

      for (int i = 0; i < 3; i++) 
      { 
       MyService msvc = new MyService(); 
       msvc.ServiceUrl = "service_url" + i.ToString() + ".html"; 
       msvc.ServiceImageUrl = "image_url" + i.ToString() + ".jpg"; 
       msvc.ServiceName = "Service " + i.ToString(); 
       msvc.ServiceDescription = "Service Description " + i.ToString(); 

       myServices.Add(msvc); 
      } 

      return myServices; 
     } 

     public ActionResult Services() 
     { 
      // return a view using the ViewModel provided by LoadServices() 
      return View(LoadServices()); 
     } 
    } 
} 

1. 在視圖中，你需要聲明視圖模型的類型傳遞
2. 您需要循環模型（這是一個枚舉集合）
3. 使用剃刀語法你注入模型的元素
的屬性

Views \ Home \ Services。CSHTML：

@model IEnumerable<WebApplication.Models.MyService> 
<div class="container-fluid projects padding-top-small"> 
    <div class="row"> 
     @foreach (var service in Model) 
     { 
      <div class="col-sm-6 col-md-3"> 
       <div class="project-inner"> 
        <a href="@service.ServiceUrl"> 
         <img src="@service.ServiceImageUrl" alt=""> 
         <div class="project-caption"> 
          <div class="project-details"> 
           <p><i class="fa fa-plus fa-lg"></i></p> 
           <h3>@service.ServiceName</h3> 
           <p><small>@service.ServiceDescription</small></p> 
          </div> 
         </div> 
        </a> 
       </div> 
      </div> 
     } 
    </div> 
</div> 

而這一切工作的最終結果是這樣的：