C# Razor Page Dynamically Create Divs with Attributes

Question

I have the following CSHTML codes:

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

Pretty much everything is hard-coded HTML tags.

I want to be able to render them dynamically.

In my controller, I am retrieving a list of Service Object comprised of the following items: SERVICE_URL, SERVICE_IMAGE_URL, SERVICE_NAME and SERVICE_DESCRIPTION. These list is stored in the ViewBag (Not sure if the viewbag is the best placeholder).

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

What I want to achieve is to have each div rendered dynamically, so that I would be able to show up only those services available.

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

Rephrasing the question: Given on my Controller that I have a list of the services and storing them to the ViewBag, how do I generate the DIVs on the Razor Page with the attributes as provided from the hard coded HTML?

Answer 1

I built a working prototype of this and will run you through the steps of each part. I then suggest you find some good basic books on MVC Razor programming and start from the beginning as there is a lot of detail to learn:

1. Use separate files for any classes and put models in the models folder.
2. Use proper standards-based naming/proper-casing of properties (leading caps for properties & classes, "CamelCase" generally)

eg 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. Your Home controller wants a Services action so the the URL routing is from the meaningful /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. In the view, you need to declare the type of View Model being passed
5. You need to loop over the Model (which is an enumerable collection)
6. Using Razor syntax you inject the properties of the Model's elements

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>

And the end result of all this work looks like this: