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?

Please find a tutorial on ASP.Net MVC/Razor yourself and check it out... Asking for links to guides/sites/tutorial is off-topic on SO. — Alexei Levenkov
– Alexei Levenkov, Commented Jan 7, 2015 at 20:43
Wasn't this a valid question on being able to dynamically render DIVs with certain class (and elements) through Razor pages? — Batuta
– Batuta, Commented Jan 7, 2015 at 20:56
Just to be clear: Are you asking how to loop on a collection of myService instances and output HTML for each one? — Shai Cohen
– Shai Cohen, Commented Jan 7, 2015 at 21:42
I appreciate the honesty. I think you should start off with a tutorial on MVC. It would be difficult, if not impossible, to cover everything you would need to know in order to do this. Although I agree with @AlexeiLevenkov that SO is not the place to ask for links to tutorials, I will suggest this tutorial. I'm fairly certain that nearly every MVC developer started here. asp.net/mvc/overview/older-versions/mvc-music-store/… — Shai Cohen
– Shai Cohen, Commented Jan 7, 2015 at 21:57
I've scoured most of the learning tutorials from asp.net site, but I am unable to find out how to achieve what I was looking for. If this does seem easy, why hasn't anyone took a stab of providing an answer (or even a starting point for that matter?). — Batuta
– Batuta, Commented Jan 7, 2015 at 22:58

iCollect.it Ltd · Accepted Answer · 2015-01-09 15:38:32Z

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:

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

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

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

In the view, you need to declare the type of View Model being passed
You need to loop over the Model (which is an enumerable collection)
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:

enter image description here

Collectives™ on Stack Overflow

C# Razor Page Dynamically Create Divs with Attributes

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related