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>

所有这些工作的最终结果如下所示：