Fatal编程技术网
  • jquery/
  • 如何使用jQuery在ASP.NET-MVC3中动态加载图像

如何使用jQuery在ASP.NET-MVC3中动态加载图像

jquery image asp.net-mvc-3 content-management-system

如何使用jQuery在ASP.NET-MVC3中动态加载图像,jquery,image,asp.net-mvc-3,content-management-system,Jquery,Image,Asp.net Mvc 3,Content Management System,在我的MVC3 _Layout.cshtml页面上，我显示了这样一个横幅图像 <body> <div id="page"> <div id="nonFooter"> <div id="header"> <img id="headerBanner" src="@Url.Content("~/Content/Images/banner.jpg")" alt="B

在我的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> ....

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


....
很简单

我想做的是为使用该站点的每个客户端显示不同的图像，这很可能由url决定，例如：www.mysite.com/clientA/Home（clientA决定使用哪个图像）

本质上，我们想要的功能有点像CMS，但我们不需要一个完整的CMS，我们只需要更换一些图像和颜色

所以问题是什么是最好的方法

到目前为止，我的想法是使用jQuery像这样更新src

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

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


$（文档）.ready（函数（）{
$（#headerBanner'）.attr（'src'，whatToPutHere？）；
});

但是我一直坚持使用“最佳实践”来解决什么问题

应该是

  • 在服务器端代码（例如@ViewBag.BannerImage）中的ViewBag中放置的图像
  • 是否将图像放入ViewModel
  • 获取/加载映像的某种服务器调用（确定要使用哪个映像的逻辑必须是服务器端）…（这是另一个往返吗？）
  • …另一种方法
非常感谢任何帮助：-）

我不会用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" />
}

@if（ViewBag.ImagePath！=null）
{
}
其他的
{
}
也许你可以用一个动作过滤器将这个属性添加到你的ViewBag中，并用这个动作过滤器装饰你的控制器…

我不会用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" />
}

@if（ViewBag.ImagePath！=null）
{
}
其他的
{
}
也许您可以使用一个操作过滤器将此属性添加到您的ViewBag中，并使用此操作过滤器装饰控制器…

我只使用服务器端代码生成用户特定的图像URL。我不会使用ViewBag或model来传递要查看的数据，因为它位于_布局页面中。在下面的示例中，为了简单起见，有一些静态方法。如果您为单元测试而烦恼，那么需要使用非静态方法进行重构

在_Layout.cshtml中：

<img src="@AccountServices.BannerUrl" alt="Banner" />
获取横幅HTML的另一种方法是@HTML.RenderAction（“您的操作”、“您的控制器”）。

我只使用服务器端代码生成用户特定的图像URL。我不会使用ViewBag或model来传递要查看的数据，因为它位于_布局页面中。在下面的示例中，为了简单起见，有一些静态方法。如果您为单元测试而烦恼，那么需要使用非静态方法进行重构

在_Layout.cshtml中：

<img src="@AccountServices.BannerUrl" alt="Banner" />
获取横幅HTML的另一种方法是@HTML.RenderAction（“您的操作”、“您的控制器”）。

使用哪个图像取决于服务器，对吗？对因此，这里不需要javascript。您可以在服务器上的ViewBag中确定映像路径，或者您的ViewModel可能包含映像路径（）。您可以像在第一个示例中一样呈现路径，但将
@Url.Content（“~/Content/Images/banner.jpg”）
替换为 
@Url.Content（Model.HeaderBannerImagePath）
或
@Url.Content（ViewBag.HeaderBannerImagePath）

使用哪个图像取决于服务器，对吗？对因此，这里不需要javascript。您可以在服务器上的ViewBag中确定映像路径，或者您的ViewModel可能包含映像路径（）。您可以像在第一个示例中一样呈现路径，但将
@Url.Content（“~/Content/Images/banner.jpg”）
替换为 
@Url.Content（Model.HeaderBannerImagePath）
或
@Url.Content（ViewBag.HeaderBannerImagePath）