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

时间:2015-01-07 20:32:37

标签: c# razor

我有以下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?

1 个答案:

答案 0 :(得分:4)

我构建了一个工作原型,并将指导您完成每个部分的步骤。然后我建议你找一些关于MVC Razor编程的好基础书籍并从头开始,因为有很多细节需要学习:

  1. 为任何类使用单独的文件,并将模型放在models文件夹中。
  2. 使用适当的基于标准的命名/适当的属性(属性和类别的主要上限,通常是“CamelCase”)
  3. 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; }
        }
    }
    
    1. 您的Home控制器需要Services操作,因此网址路由来自有意义的/Home/Services
    2. <强>控制器\ 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. 使用Razor语法注入模型元素的属性
      4. <强>视图\主页\ 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>
        

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

        enter image description here