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编程的好基础书籍并从头开始，因为有很多细节需要学习：

为任何类使用单独的文件，并将模型放在models文件夹中。
使用适当的基于标准的命名/适当的属性（属性和类别的主要上限，通常是“CamelCase”）

e.g。的模型\ 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操作，因此网址路由来自有意义的/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()); } } }

在视图中，您需要声明传递的视图模型的类型

您需要遍历模型（这是一个可枚举的集合）

使用Razor语法注入模型元素的属性

<强>视图\主页\ 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>

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

C＃Razor页面动态创建具有属性的Div

1 个答案: