2

Boa pessoal, Estou com um projeto, e preciso gerar um card com HTML dinâmico, puxando de um servidor sql. O caso é o seguinte, tenho um CARD em html, todo estilizado. Que no caso é o código abaixo.

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

Eu preciso gerar esse HTML, toda vez que existir uma informação para busca dentro do banco de dados, nisso os dados do banco completará as informações do CARD, a onde ta escrito Nome Faculdade, Nome Curso, etc. Esses cards será gerado varias vezes em uma página, como se fosse uma lista de card. Já tentei com String Build, mas não funcionou. Alguém tem uma luz?

1 Resposta 1

2

Use PartialPage para tal operação de repetição de trechos de páginas. Como seria na prática:

Existem várias formas de implementação:

  • Forma 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 para uma lista de informações:

_PartialPageExemplo

@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

Crie uma lista de dados e adicione itens a essa lista:

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

Na sua View principal escreve o código:

@Html.Partial("_PartialPageExemplo", Model)

Código completo na View Principal:

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


@Html.Partial("_PartialPageExemplo", Model)

  • Forma 2:

Esse PartialPage pode ser feito com um model simples:

_PartialPageExemplo

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

Na View principal faça:

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

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

Dentro desse for, será preenchido aquela PartialPage com os itens individualmente.


  • Forma 3:

Também pode utilizar um ActionResult do tipo PartialViewResult para renderização de trecho de html, inclusive com recurso de Cache da informação por um determinado período:

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

Na sua View principal, chama o nome do método criado que no caso é IndexPartial:

@Html.Action("IndexPartial")

Observação: para a Forma 3 utilize a View da Form 1 (_PartialPageExemplo)

Referencias:

4
  • 1
    Eu acho que você deveria deixar só um exemplo na resposta, ja que os dois são muito parecidos Commented 14/06/2016 às 15:12
  • 1
    Blz João, irei tentar. Vou só estrutura meu projeto pra MVC, pois não está. Quando eu termina, te mando um retorno. Commented 14/06/2016 às 15:31
  • Joao, não tem como fazer sem MVC? Pois meu projeto só está com web forms. Commented 14/06/2016 às 22:47
  • @LuizMiguel a sua tag está ASP NET MVC, por isso a resposta foi construida toda em MVC. Claro que dá com WebForms, mas, a sua pergunta atual as tags não condizem com o seu comentário!
    – user46523
    Commented 14/06/2016 às 22:49

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .