Добавление разных фоновых изображений для каждой категории, добавленной в модель с помощью Razor - PullRequest
Новая
       12

Добавление разных фоновых изображений для каждой категории, добавленной в модель с помощью Razor

0 голосов
/ 23 октября 2011

У меня есть категория - модель, которую я использую для своей системы электронной коммерции, у меня есть фиксированное фоновое изображение для каждой добавленной категории, чего я хочу добиться, так это программно добавлять разные фоновые изображения для каждой добавленной категории. Ниже приведен код, в настоящее время я добавляю изображения через CSS. 

@using Nop.Web.Models.Catalog;
@if (Model.Count > 0)
{
<div class="home-page-category-grid">
    @(Html.DataList<CategoryModel>(Model, 5,
            @<div class="item-box">
                <div class="category-item"> @*Thats where i am adding background-images in the class category-item*@
                    <h2 class="title">
                        <a href="@Url.RouteUrl("Category", new { categoryId = item.Id, SeName = item.SeName })" title="@item.PictureModel.Title">
                            @item.Name</a>
                    </h2>
                    <div class="picture">
                        <a href="@Url.RouteUrl("Category", new { categoryId = item.Id, SeName = item.SeName })" title="@item.PictureModel.Title">
                            <img style="border-width: 0px;" alt="@item.PictureModel.AlternateText" src="@item.PictureModel.ImageUrl"
                                title="@item.PictureModel.Title" /></a>
                    </div>
                </div>
            </div>
        ))
</div>
<div class="home-page-category-grid-separator"></div>

}

Css для категории -Item 

.home-page-category-grid .category-item
{
text-align: center;
margin: 10px 0px 35px 4px; /*width: 150px;*/
width: 166px; 
height: 185px; 
background: url('images/picture-bg.png') no-repeat 0 100%;
}

Любые предложения или альтернативы будут высоко оценены, мне просто нужно добавить различные фоновые изображения для каждого элемента категории. В настоящее время фоновое изображение зафиксировано в классе элемента категории, используемом datalist.

Ответы [ 3 ]

3 голосов
/ 23 октября 2011

Вы можете сделать это, если у вас есть определение таблицы стилей в вашем представлении, а не в файле CSS.Файлы CSS - это, в основном, статические файлы, такие как HTML.Если вы хотите получить некоторые динамические вещи к этому, вы должны сделать это в коде на стороне сервера.Может быть, сбивает с толку то, что я говорю .. но проверьте мой образец, и вы поймете, что я имею в виду .... я надеюсь;) 

// Your View
<style>
    body 
    {
        background-image: url('@ViewBag.ImagePath');
    }
</style>

// your action method
public ActionResult ActionName()
{
   ViewBag.ImagePath = "<path to your image">
   return View();
}
0 голосов
/ 27 июля 2017

Используя ответ samandmoore, вы также можете сделать это полностью в представлении, с источником изображения на основе запрошенного URL (используя @ Request.RawUrl): 

<div class="parallax bg-image-@Request.RawUrl.Replace('/', '-')" >
  <section class="page-title">
    <div class="container">
      <h2>@Html.Raw(ViewBag.Title)</h2>
    </div>
  </section>
</div>
0 голосов
/ 24 октября 2011

Я бы просто использовал несколько классов CSS, один для общих стилей фонового изображения, а затем индивидуальный для каждой из категорий, для которых просто установлен определенный стиль фонового изображения с правильной ссылкой на изображение.

примерно так: 

@using Nop.Web.Models.Catalog;
@if (Model.Count > 0)
{
<div class="home-page-category-grid">
    @(Html.DataList<CategoryModel>(Model, 5,
            @<div class="item-box">
                <div class="category-item category-@item.Id"> @*Thats where i am adding background-images in the class category-item*@
                    <h2 class="title">
                        <a href="@Url.RouteUrl("Category", new { categoryId = item.Id, SeName = item.SeName })" title="@item.PictureModel.Title">
                            @item.Name</a>
                    </h2>
                    <div class="picture">
                        <a href="@Url.RouteUrl("Category", new { categoryId = item.Id, SeName = item.SeName })" title="@item.PictureModel.Title">
                            <img style="border-width: 0px;" alt="@item.PictureModel.AlternateText" src="@item.PictureModel.ImageUrl"
                                title="@item.PictureModel.Title" /></a>
                    </div>
                </div>
            </div>
        ))
</div>
<div class="home-page-category-grid-separator"></div>

Посмотрите, как я добавил category-@item.Id к тому же объявлению класса?Вы также можете использовать что-то более семантическое, например, имя категории, если оно у вас есть, и т. Д. Затем вы можете сделать это в CSS: 

.home-page-category-grid .category-item
{
    text-align: center;
    margin: 10px 0px 35px 4px; /*width: 150px;*/
    width: 166px; 
    height: 185px;
}

.home-page-category-grid .category-item .category-1
{
    background: url('images/picture-bg-1.png') no-repeat 0 100%;
}

.home-page-category-grid .category-item .category-2
{
    background: url('images/picture-bg-2.png') no-repeat 0 100%;
}

Есть и другие альтернативы, особенно если вы не используетене знаю URL изображения, пока не выполнится цикл ... в этом случае я бы просто использовал атрибут style со значением background-image:url(@item.BackgroundImage).

...