Generate dynamic HTML with ASP.NET

Question

Good people, I have a project, and I need to generate a card with dynamic HTML, pulling from an sql server. The case is as follows, I have an html CARD, all stylized. Which in this case is the code below.

<hr class="separador" />
        <div class="container">
             <a href="#" class="dp1 d3 m3 s3"><div>Nome da Facudade</div></a> <!-- Campo do NOme da facuade ex: Fmu -->
             <a href="#" class="dp1 d3 m3 s3"><div>Nome do curso</div></a><!-- Compo do nome do curso EX: Analise e desenvolvimento de sistemas -->
             <div class="dp1 d3 m3 s3">nota mec</div><!-- Campo da nota do mec EX:3-->
        </div>

        <div class="container">
            <div class="dp1 d3 m3 s3">Valor do curso</div><!-- Preço do curso EX: R$250,00-->
            <div class="dp1 d3 m3 s3">Periodo</div><!-- período do curso ex: matutino -->
            <div class="dp1 d3 m3 s3">Nota dos Alunos</div><!-- Nota que o aluno da para o curso e facudade Ex: curso nota 7 , Facul nota 3 -->
        </div>

        <div class="container">
            <div class="dp1 d3 m3 s3">Tipo</div><!-- Tipo do curso ex: Presencial, semi-Presencial, Ead -->
            <div class="dp1 d3 m3 s3">Duração</div><!-- Duração do curso EX: 5 semetres  -->
            <a href="#" class="dp1 d3 m3 s3"><div>Comentarios</div></a><!-- Comentos dos alunos sobre o curso e/ou facuade  -->
        </div>
        <hr />

I need to generate this HTML, every time there is a search information inside the database, in that the database data will complete the CARD information, the one written Name College, Course Name, etc. These cards will be generated several times in a page, like a card list. I tried with String Build, but it didn’t work. Someone has a light?

Answer 1

Use Partialpage for such an operation of repeating excerpts of pages. As it would be in practice:

There are various forms of implementation:

• Form 1:

Model

public class Dados
{
    public int Id { get; set; }
    public string Nome { get; set; }
    public string Nota { get; set; }
    public decimal Valor { get; set; }
    public string Periodo { get; set; }
    public string NotaAlunos { get; set; }
    public string Tipo { get; set; }
    public string Duracao { get; set; }
    public string Comentarios { get; set; }
}

Partialview for a list of information:

_Partialpageexample

@model IEnumerable<Models.Dados>

@foreach (var m in Model)
{
    <hr class="separador"/>
    <div class="container">
        <a href="#" class="dp1 d3 m3 s3">
            <div>@m.Nome</div></a> <!-- Campo do NOme da facuade ex: Fmu -->
        <a href="#" class="dp1 d3 m3 s3">
            <div>@m.Curso</div></a><!-- Compo do nome do curso EX: Analise e desenvolvimento de sistemas -->
        <div class="dp1 d3 m3 s3">@m.NotaAlunos</div><!-- Campo da nota do mec EX:3-->
    </div>
    <div class="container">
        <div class="dp1 d3 m3 s3">@m.Valor</div><!-- Preço do curso EX: R$250,00-->
        <div class="dp1 d3 m3 s3">@m.Periodo</div><!-- período do curso ex: matutino -->
        <div class="dp1 d3 m3 s3">@m.Nota</div><!-- Nota que o aluno da para o curso e facudade Ex: curso nota 7 , Facul nota 3 -->
    </div>
    <div class="container">
        <div class="dp1 d3 m3 s3">@m.Tipo</div><!-- Tipo do curso ex: Presencial, semi-Presencial, Ead -->
        <div class="dp1 d3 m3 s3">@m.Duracao</div><!-- Duração do curso EX: 5 semetres -->
        <a href="#" class="dp1 d3 m3 s3">
            <div>@m.Comentarios</div></a><!-- Comentos dos alunos sobre o curso e/ou facuade -->
    </div>
    <hr/>
}

Controller

Create a data list and add items to that list:

public ActionResult Index()
{
    IList<Dados> dados = new List<Dados>();
    dados.Add(new Dados
    {
        Comentarios = "c",
        Duracao = "1",
        Id = 1, 
        Nome = "N",
        Nota    ="10",
        NotaAlunos = "9.5",
        Periodo = "Integral",
        Tipo = "Tipo A",
        Valor = 250
    });
    dados.Add(new Dados
    {
        Comentarios = "b",
        Duracao = "2",
        Id = 2,
        Nome = "A",
        Nota = "9",
        NotaAlunos = "8.9",
        Periodo = "Matutino",
        Tipo = "Tipo B",
        Valor = 185.58M
    });
    return View(dados);
}

In your main View writes the code:

@Html.Partial("_PartialPageExemplo", Model)

Full code in Main View:

@model IEnumerable<Models.Dados>
@{ ViewBag.Title = "Index"; }


@Html.Partial("_PartialPageExemplo", Model)

---

• Form 2:

That one Partialpage can be done with a simple model:

_Partialpageexample

@model Models.Dados
<hr class="separador"/>
<div class="container">
    <a href="#" class="dp1 d3 m3 s3">
        <div>@Model.Nome</div></a> <!-- Campo do NOme da facuade ex: Fmu -->
    <a href="#" class="dp1 d3 m3 s3">
        <div>@Model.Curso</div></a><!-- Compo do nome do curso EX: Analise e desenvolvimento de sistemas -->
    <div class="dp1 d3 m3 s3">@Model.NotaAlunos</div><!-- Campo da nota do mec EX:3-->
</div>
<div class="container">
    <div class="dp1 d3 m3 s3">@Model.Valor</div><!-- Preço do curso EX: R$250,00-->
    <div class="dp1 d3 m3 s3">@Model.Periodo</div><!-- período do curso ex: matutino -->
    <div class="dp1 d3 m3 s3">@Model.Nota</div><!-- Nota que o aluno da para o curso e facudade Ex: curso nota 7 , Facul nota 3 -->
</div>
<div class="container">
    <div class="dp1 d3 m3 s3">@Model.Tipo</div><!-- Tipo do curso ex: Presencial, semi-Presencial, Ead -->
    <div class="dp1 d3 m3 s3">@Model.Duracao</div><!-- Duração do curso EX: 5 semetres -->
    <a href="#" class="dp1 d3 m3 s3">
        <div>@Model.Comentarios</div></a><!-- Comentos dos alunos sobre o curso e/ou facuade -->
</div>
<hr/>

In the View major do:

@model IEnumerable<Models.Dados>
@{ ViewBag.Title = "Index"; }

@foreach (var item in Model)
{
    @Html.Partial("_PartialPageExemplo", item)
}

Within that for, that will be filled in Partialpage with the items individually.

---

• Form 3:

You can also use a Actionresult of the kind Partialviewresult for rendering html snippet, including with Cache of the information for a certain period:

Controller:

[OutputCache(Duration = 600)]
public PartialViewResult IndexPartial()
{
    IList<Dados> dados = new List<Dados>();
    dados.Add(new Dados
    {
        Comentarios = "c",
        Duracao = "1",
        Id = 1,
        Nome = "N",
        Nota = "10",
        NotaAlunos = "9.5",
        Periodo = "Integral",
        Tipo = "Tipo A",
        Valor = 250
    });
    dados.Add(new Dados
    {
        Comentarios = "b",
        Duracao = "2",
        Id = 2,
        Nome = "A",
        Nota = "9",
        NotaAlunos = "8.9",
        Periodo = "Matutino",
        Tipo = "Tipo B",
        Valor = 185.58M
    });
    return PartialView("_PartialPageExemplo", dados);
}

In your Main View, call the name of the created method that in the case is IndexPartial:

@Html.Action("IndexPartial")

Observing: to the Form 3 use the View of Form 1 (_Partialpageexample)

References:

• Views and UI Rendering in ASP.NET MVC Applications
• Actionresult
• Partialviewresult
• How to: Add Items to the Cache
• Improving Performance with Output Caching (C#)
• Outputcacheattribute Class