C#Razor页面使用属性动态创建div_C#_Razor

C#Razor页面使用属性动态创建div

c# razor

C#Razor页面使用属性动态创建div,c#,razor,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

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

我希望能够动态渲染它们

在我的控制器中，我正在检索由以下项组成的服务对象列表：服务URL、服务图像URL、服务名称和服务描述。这些列表存储在ViewBag中（不确定ViewBag是否是最佳占位符）

我想要实现的是动态呈现每个div，这样我就能够只显示那些可用的服务

控制器

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");
}

公共类myService
{
公共字符串服务_url{get；set；}
公共字符串服务\u图像\u url{get；set；}
公共字符串服务_name{get；set；}
公共字符串服务_描述{get；set；}
}
专用void loadServices（）
{
List myServices=new List（）；
对于（int i=0；i我构建了一个工作原型，并将让您完成每个部分的步骤。然后，我建议您找到一些关于MVC Razor编程的好的基础书籍，并从头开始，因为有很多细节需要学习：
对任何类使用单独的文件，并将模型放在“模型”文件夹中
使用适当的基于标准的属性命名/适当的属性大小写（属性和类的前导大写，通常为“CamelCase”）
e、 g.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; }
    }
}

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

@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>

您的Home
控制器需要Services
操作，因此URL路由来自有意义的/Home/Services
控制器\HomeController.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; }
    }
}

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

@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>

使用系统；
使用System.Collections.Generic；
使用System.Linq；
使用System.Web；
使用System.Web.Mvc；
使用WebApplication5.Models；
命名空间WebApplication.Controllers
{
公共类HomeController:控制器
{
私有列表加载服务（）
{
List myServices=new List（）；
对于（int i=0；i<3；i++）
{
MyService msvc=newmyservice（）；
msvc.ServiceUrl=“service_url”+i.ToString（）+“.html”；
msvc.ServiceImageUrl=“image_url”+i.ToString（）+“.jpg”；
msvc.ServiceName=“Service”+i.ToString（）；
msvc.servicescription=“服务描述”+i.ToString（）；
myServices.Add（msvc）；
}
返回我的服务；
}
公共行动结果服务（）
{
//使用LoadServices（）提供的ViewModel返回视图
返回视图（LoadServices（））；
}
}
}

在视图中，需要声明要传递的视图模型的类型
您需要在模型上循环（这是一个可枚举的集合）
使用Razor语法可以注入模型元素的属性
Views\Home\Services.cshtml:
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; }
    }
}

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

@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>

@model IEnumerable
@foreach（模型中的var服务）
{
}

所有这些工作的最终结果如下：
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; }
    }
}

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

@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>

我构建了一个工作原型，并将向您介绍每个部分的步骤。然后，我建议您找到一些关于MVC Razor编程的基础书籍，并从头开始，因为有很多细节需要学习：
对任何类使用单独的文件，并将模型放在“模型”文件夹中
使用适当的基于标准的属性命名/适当的属性大小写（属性和类的前导大写，通常为“CamelCase”）
e、 g.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; }
    }
}

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

@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>

您的Home
控制器需要Services
操作，因此URL路由来自有意义的/Home/Services
控制器\HomeController.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; }
    }
}

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

@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>

使用系统；
使用System.Collections.Generic；
使用System.Linq；
使用System.Web；
使用System.Web.Mvc；
使用WebApplication5.Models；
命名空间WebApplication.Controllers
{
公共类HomeController:控制器
{
私有列表加载服务（）
{
List myServices=new List（）；
对于（int i=0；i<3；i++）
{
MyService msvc=newmyservice（）；
msvc.ServiceUrl=“service_url”+i.ToString（）+“.html”；
msvc.ServiceImageUrl=“image_url”+i.ToString（）+“.jpg”；
msvc.ServiceName=“Service”+i.ToString（）；
msvc.servicescription=“服务描述”+i.ToString（）；
myServices.Add（msvc）；
}
返回我的服务；
}
公共行动结果服务（）
{
//使用LoadServices（）提供的ViewModel返回视图
返回视图（LoadServices（））；
}
}
}

在视图中，需要声明要传递的视图模型的类型
您需要在模型上循环（这是一个可枚举的集合）
使用Razor语法可以注入模型元素的属性
Views\Home\Services.cshtml:
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; }
    }
}

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

@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>

@model IEnumerable
@foreach（模型中的var服务）
{
}

所有这些工作的最终结果如下：
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; }
    }
}

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

@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>

请自己查找关于ASP.Net MVC/Razor的教程，并查看它……要求提供指向指南/站点/教程的链接是一个离题的问题。这不是一个关于能够动态呈现具有特定类（和元素）的div的有效问题吗通过Razor页面？我想说清楚：你是在问如何循环一组myService
实例并为每个实例输出HTML吗？是的，基本上是@ShaiCohen。我不知道