C＃Razor頁面使用屬性動態創建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中，如何在Razor頁面上生成具有從硬編碼HTML提供的屬性的DIV？

Answer 1

我為此構建了一個工作原型，並將逐步指導您完成每個部分的步驟。 然后，我建議您找到一些有關MVC Razor編程的不錯的基礎書籍，並從頭開始，因為有很多細節需要學習：

1. 對任何類使用單獨的文件，然后將模型放在models文件夾中。
2. 使用適當的基於標准的屬性命名/正確的外殼（屬性和類的領先上限，通常為“ CamelCase”）

例如Models \\ 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; }
    }
}

3. 您的Home控制器需要“ Services操作，因此URL路由來自有意義的/Home/Services

Controllers \\ 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());
        }
    }
}

4. 在視圖中，您需要聲明要傳遞的視圖模型的類型
5. 您需要遍歷模型（一個可枚舉的集合）
6. 使用Razor語法注入模型元素的屬性

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>

所有這些工作的最終結果如下所示：