How to assemble a foreach list at different positions

Asked

Viewed 49 times

0

How to assemble a list using foreach to change the positioning of the image. If my Count is 1, position the image on the left side, if my Count is 2 position the image on the right side, follow my code.

<div class="container">
@foreach (var item in Model.DadosEmpresa)
{

    @if (Model.DadosEmpresa.Count == 1)
    {
        <section class="row align-items-center padding-bottom-2x">

            <div class="col-md-5"><img class="d-block w-270 m-auto" src="@item.Imagem" alt="Foto Empresa"></div>
            <div class="col-md-7 text-md-left text-center">
                <div class="mt-30 hidden-md-up"></div>
                <h2>@Html.Raw(item.Texto)</h2>
                <p class="text-sm">
                    @Html.Raw(item.TextoDestaque)
                </p>
            </div>



        </section>

    }
    @if (Model.DadosEmpresa.Count == 2)
    {
        <section class="row align-items-center padding-bottom-2x">

            <div class="col-md-7 text-md-left text-center">
                <div class="mt-30 hidden-md-up"></div>
                <h2>@Html.Raw(item.Texto)</h2>
                <p class="text-sm">
                    @Html.Raw(item.TextoDestaque)
                </p>
            </div>

            <div class="col-md-5"><img class="d-block w-270 m-auto" src="@item.Imagem" alt="Foto Empresa"></div>



        </section>

    }



    @if (Model.DadosEmpresa.Count == 3)
    {
        <section class="row align-items-center padding-bottom-2x">

            <div class="col-md-5"><img class="d-block w-270 m-auto" src="@item.Imagem" alt="Foto Empresa"></div>
            <div class="col-md-7 text-md-left text-center">
                <div class="mt-30 hidden-md-up"></div>
                <h2>@Html.Raw(item.Texto)</h2>
                <p class="text-sm">
                    @Html.Raw(item.TextoDestaque)
                </p>
            </div>



        </section>

    }

    @if (Model.DadosEmpresa.Count == 4)
    {
        <section class="row align-items-center padding-bottom-2x">

            <div class="col-md-7 text-md-left text-center">
                <div class="mt-30 hidden-md-up"></div>
                <h2>@Html.Raw(item.Texto)</h2>
                <p class="text-sm">
                    @Html.Raw(item.TextoDestaque)
                </p>
            </div>
            <div class="col-md-5"><img class="d-block w-270 m-auto" src="@item.Imagem" alt="Foto Empresa"></div>



        </section>

    }

}

c# asp.net-core logic

  • It seems that two items are the same can already refactor this.

1 answer

0

There seems to be no error in the presented code, although it can be rewritten. Apparently it is a problem in your data: Model.DadosEmpresa.Count You must always have the same value. In this fiddle you can see that the HTML code works as described: https://jsfiddle.net/snd57jtg/

Regarding refactoring, looking very quickly, it would be possible to reduce the code to something like

<div class="container">
@foreach (var item in Model.DadosEmpresa)
{
  <section class="row align-items-center padding-bottom-2x">
    @if (Model.DadosEmpresa.Count % 2 == 1)
    {
      <div class="col-md-5"><img class="d-block w-270 m-auto" src="@item.Imagem" alt="Foto Empresa"></div>
    }
            <div class="col-md-7 text-md-left text-center">
                <div class="mt-30 hidden-md-up"></div>
                <h2>@Html.Raw(item.Texto)</h2>
                <p class="text-sm">
                    @Html.Raw(item.TextoDestaque)
                </p>
            </div>
    @if (Model.DadosEmpresa.Count % 2 == 0)
    {
      <div class="col-md-5"><img class="d-block w-270 m-auto" src="@item.Imagem" alt="Foto Empresa"></div>
    }
  </section>
}

Browser other questions tagged c# asp.net-core logic

You are not signed in. Login or sign up in order to post.