Как динамически загрузить изображение в ASP.NET-MVC3 с помощью jQuery - PullRequest
Новая
       4

Как динамически загрузить изображение в ASP.NET-MVC3 с помощью jQuery

1 голос
/ 11 апреля 2011

На моей странице MVC3 _Layout.cshtml я показываю изображение баннера, подобное этому 

    <body>
    <div id="page">
        <div id="nonFooter">
            <div id="header">
               <img id="headerBanner" src="@Url.Content("~/Content/Images/banner.jpg")" alt="Banner" />
            </div> ....

Достаточно просто.

То, что я хочу сделать, это отображать разные изображения для каждого клиента, использующего сайт, скорее всего, это будет определяться URL-адресом, например: www.mysite.com/clientA/Home (clientA определяет, какое изображение использовать)

По сути, желаемая функциональность немного похожа на CMS, но нам не нужна полноценная CMS, нам просто нужно заменить несколько изображений и цветов.

Итак, вопрос в том, как лучше всего это сделать?

До сих пор я думал об использовании jQuery для обновления src следующим образом 

<script type="text/javascript">
$(document).ready(function () {
    $('#headerBanner').attr('src', whatToPutHere? );
});

Но я застрял на «наилучшей практике» для whatToPutHere .

Должно ли это быть ...

  • Изображение, помещенное в ViewBag в коде сервера (например, @ ViewBag.BannerImage)?
  • Изображение, помещенное в ViewModel?
  • Какой-то серверный вызов для получения / загрузки изображения (логика для определения того, какое изображение использовать, должно быть на стороне сервера) ... (хотя это был бы еще один прием в оба конца?)?
  • ... другой подход?

Любая помощь высоко ценится: -)

Ответы [ 3 ]

2 голосов
/ 11 апреля 2011

Я бы использовал только код на стороне сервера для генерации пользовательского URL изображения.Я бы не использовал ViewBag или модель для передачи данных в View, поскольку они находятся на странице _Layout.В приведенном ниже примере есть статические методы для простоты.Если вы беспокоитесь о модульном тестировании, то вместо этого нужно выполнить рефакторинг нестатическими методами.

In _Layout.cshtml: 

<img src="@AccountServices.BannerUrl" alt="Banner" />

In AccountServices.cs 

public class AccountServices
{
   public static string BannerUrl
   {
      get{
          // Your code to form the image URL, may be the following:
          var bannerPathTemplate = "/images/banners/user-{0}.jpg";
          var user = CurrentUser;              
          if (user != null)
          {
              return string.Format(bannerPathTemplate, user.Id);
          }
          return string.Format(bannerPathTemplate, "unauthorized");              
      }
   }

   const string sessionKeyUser = "session-current-user";

   public static User CurrentUser
   {
       get{
           if (HttpContext.Current.Session[sessionKeyUser]==null){
               // HERE insert code to get the current **user** object from db                   
               HttpContext.Current.Session[sessionKeyUser] = user;
           }
           return (User)HttpContext.Current.Session[sessionKeyUser];
       }
   }

}

ДругойЯ хотел бы использовать HTML-баннер для баннера: @ Html.RenderAction («ваше действие», «ваш контроллер»).

1 голос
/ 11 апреля 2011

Определение того, какое изображение использовать, зависит от сервера, верно? Да. Таким образом, нет необходимости в JavaScript здесь. Вы можете определить путь к изображению на сервере, в ViewBag или, возможно, ваша ViewModel будет содержать путь к изображению (). И вы бы отобразили свой путь, как в первом примере, но замените @Url.Content("~/Content/Images/banner.jpg") чем-то вроде @Url.Content(Model.HeaderBannerImagePath) или @Url.Content(ViewBag.HeaderBannerImagePath)

1 голос
/ 11 апреля 2011

Я бы не стал делать это с JavaScript. Почему бы вам просто не пройти путь через de ViewBag? 

@if(ViewBag.ImagePath!=null)
{
    <img id="headerBanner" src="@Url.Content(ViewBag.ImagePath)" alt="Banner" />
}
else
{
    <img id="headerBanner" src="@Url.Content("~/Content/Images/default-banner.jpg")" alt="Banner" />
}

Возможно, у вас может быть фильтр действий, чтобы добавить это свойство в ViewBag и украсить контроллеры этим фильтром действий ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...