65.9K
CodeProject 正在变化。 阅读更多。
Home

将图像滑块与带有图像上传面板的 ASP.NET 绑定

dpalash
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.98/5 (28投票s)

2013年1月26日

CPOL

4分钟阅读

viewsIcon

141230

downloadIcon

10830

本文旨在将后端图像与您喜欢的图像滑块绑定。

引言

我们每天构建的网站在大多数情况下都包含主页上的图像滑块。 此项是当今客户最常见的需求之一。 今天，我将分享一种令人兴奋的方式，将图像与您最喜欢的图像滑块 Flex Slider 和图像上传面板绑定。

背景

由于此功能对于我们日常的网站构建工作最常见，因此我们发现了一个常见的需求，即经常更改主页图像滑块。 这意味着如果我们有一个图像滑块，我们需要更改代码以添加更多图像，或者如果需要替换图像，则需要重命名它们。 对于程序员来说，这是一项相当无聊的工作。 所以我决定从后端上传图像，然后将所有图像绑定到图像幻灯片。 今天，我将展示我解决这类问题的方法。

使用代码

以下是解决问题的简单步骤。

首先，我们需要集成图像滑块。 您有很多流行的图像滑块。 其中我喜欢 FlexSlider，因为它具有响应性，而且易于实现。

请按照以下步骤将 FlexSlider 与您的 ASP.NET Web 项目集成。

步骤 1： 在 .aspx 页面的标题部分添加以下文件。

<link href="css/flexslider.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.8.2-min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.flexslider.js"></script>

zip 文件包含以下文件。 有一个图像文件用于图像的方向（左/右）。 将此文件与图像文件夹一起复制。

步骤 2： 现在在上面的代码下面添加这些代码行

<script type="text/javascript">
    $(document).ready(function () {
        InitializeImageSlider();
    });
    function InitializeImageSlider() {
        $('.flexslider').flexslider({
            animation: "slide",
            controlNav: true,
            directionNav: true,
            itemWidth: "100%",
            itemHeight: 400
        });
    }
</script>

以下是现在 .aspx 页面标题部分的场景。

 

现在我们已经将图像滑块附加到我们的项目。 现在我们需要将图像文件放在正文中，以使滑块正常工作。

步骤 3： 现在在正文部分的 form 标记内添加这些代码块。

<div>
     <div id="divImageSlider" class="flexslider" runat="server">
     </div>
</div>

在这里我们可以看到 div 包含一个类名“flexslider”，它是 Flex 图像滑块的默认名称。 我们还获得了 ID，通过该 ID 我们将从代码隐藏绑定图像。 因此，我们需要添加 runat="server" 以从 .cs 页面访问该 div。

步骤 4： 现在向您的项目添加一个新文件夹，然后将其命名为 Upload 或您喜欢的名称，然后在此文件夹内添加另一个文件夹，并根据需要命名。 在这里，我将其命名为 BannerImage。

我们快完成了。 现在我们需要从 .cs 页面添加代码以激活滑块。

步骤 5： 在 .cs 页面中添加以下代码块。

在此代码块中，我附加了来自“Upload/BannerImage/”目录的可用图像。 在我的文章中，我使用了 FlexImage 滑块。 我们必须记住我们使用的滑块的形成方式。 对于 FlexSlider，它使用 <ul><li></li></ul> 结构。 这意味着如果它得到这种结构，它就会起作用。 因此，我们只是制作了一个这样的字符串，并将此字符串作为 ID 为 div 的 InnerHtml 插入。

在此代码中，我们首先搜索图像目录，然后我们将可用的图像附加到 <li> 标记内的 <img /> 标记。 相应地，我们将为每个图像获得 <li><img /></li> 结构。 我们只需要在上述结构之前添加一个 <ul> 标签。 所以我们在这里完成了。 图像滑块已准备就绪！

private void LoadImage()
{
    try
    {
        string imagePath = "~/Upload/BannerImage/";
        string imageSource = SiteBaseUrl + "Upload/BannerImage/";
        string PhotoFilePath = Server.MapPath(imagePath);
        string divSlider = @"<ul class='slides'>";
        string fileSlide = string.Empty;
        string fileName = string.Empty;

        DirectoryInfo di = new DirectoryInfo(PhotoFilePath);
        FileInfo[] rgFiles = di.GetFiles("*.*");
        foreach (FileInfo fi in rgFiles)
        {
            fileSlide = @"<li><img src='";

            fileSlide += imageSource + fi + "' /></li>";

            divSlider += fileSlide;
        }

        divImageSlider.InnerHtml = divSlider + "</ul>";

    }
    catch (Exception ex)
    {
        //ShowErrorMsg("error", ex.Message);
    }
}

此方法将配置 baseUrl，我们可以使用此方法来定位图像滑块的图像目录。 如果我们不使用此方法，我们可以硬编码图像目录，但如果我们更改项目文件夹的目录，我们又需要修改代码 Frown | <img src=。

public static string SiteBaseUrl
{
   get
   {
       //return ConfigurationManager.AppSettings["RootPath"].ToString(); 
        string orginalUrl = HttpContext.Current.Request.Url.AbsoluteUri;
        if (HttpContext.Current.Request.Url.Query.Length > 0)
            orginalUrl = orginalUrl.Replace(HttpContext.Current.Request.Url.Query, string.Empty);

        return orginalUrl.Replace(HttpContext.Current.Request.Url.AbsolutePath, string.Empty) + 
          ((HttpContext.Current.Request.ApplicationPath == "/" ? 
          "" : HttpContext.Current.Request.ApplicationPath)) + '/';
   }

}

本节用于检查我们要添加到横幅图像文件夹的有效图像文件，并将其与实际目录进行映射。

protected void btnUpload(object sender, EventArgs e)
{
  if(CheckValidImage(fluImage))
   {
     fluImage.PostedFile.SaveAs(MapPath("~") + "/Upload/BannerImage/" + fluImage.FileName);
     ShowErrorMsg("success", "Image Uploaded Successfully");
   }
}

private bool CheckValidImage(FileUpload FileUploadImage)
{
 string contentType;

 contentType = FileUploadImage.PostedFile.ContentType.ToLower();

 if (contentType == "image/jpg" || contentType == "image/png" || contentType == "image/jpeg")
  {
  }
 else
 {
  ShowErrorMsg("error", "Image format is not valid. Valid image formats are ( jpg, png, jpeg).");
  return false;
 }

 return true;
}

如果您想在上传图像文件时显示成功/错误消息，则此部分用于添加该消息。

private void ShowErrorMsg(string _class, string _msg)
{
    divMessage.Style.Value = "display:block;";
    divMessage.Attributes.Add("class", _class);
    divMessage.InnerHtml = _msg;
}

关注点

我认为，对于网站的快速开发和修改，这个概念或开发过程将有所帮助。

© . All rights reserved.