none
Отображение obout:ImageZoom в новостной строке и самом тексте новости RRS feed

  • Вопрос

  • Добрый день 

    Прошу подсказать как организовать:

    1. Новостной тест в базе данных

    2. А фото по этой новости должно отображаться при помощи:

     

    <obout:ImageZoom ID="imageZoom"
            ImageUrl="20110315"
            StyleFolder="styles/dark"
            Effect="Zooming" >
    
         </obout:ImageZoom>
    

    свойство данного элемента ImageUrl должно подставляться из поля базы данных 

    Структура таблицы NEWS  в базе данных

    • ID
    • Title
    • Text
    • Date
    • numberImageZoom

    В результате хотелось получить результат подобный - www.аша-район.рф/News/default3.aspx

    С уважением  Юрий Косенко

     

    20 апреля 2011 г. 8:27

Ответы

  • Разобрался 

    тот вариант который я хотел использовать не подходит для реализации данной задачи - то есть создаем папку и в ней размещаем все изображения и потом меняем свойство ImageZoom ImageUrl - данные о нем храним в поле базы данных

    Для реализации данной задачи

    1. в Базе данных создаем отдельную таблицу для хранения данных об изображениях

    2. а на странице отображаем изображения из базы данных следующим образом

     

     

     

    <div style="width: 90%">
      <asp:SqlDataSource ID="sds1" SelectCommand="SELECT * FROM [Gallery]" runat="server"
       ConnectionString="<%$ ConnectionStrings:GalleryConnStr %>" />
      <center>
       <obout:ImageZoom ID="ImageZoom1" runat="server" DataSourceID="sds1" DataUrlField="Url"
        DataDescriptionsField="Description" StyleFolder="~/ImageZoom/styles/dark_gray"
        AllowImageSizeSelection="false" AllowPageSizeSelection="false" BackgroundOpacity="75"
        ThumbnailHeight="75" ThumbnailWidth="75" PageSize="100" ShowFooter="False"></obout:ImageZoom>
      </center>
     </div>
    

     

    путь к изображениям в поле таблицы Url указываю полный - ~/ImageZoom/0001/image1.jpg

    P.S. DAL - необходимо дорабатывать под конкретные условия 

     


    • Помечено в качестве ответа Abolmasov Dmitry 19 мая 2011 г. 4:51
  • хотелось бы продолжить 

    вот так реализовал это решение

     

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using DSTableAdapters;
    using Obout.Interface;
    using OboutInc.ImageZoom;
    using OboutInc.ImageZoom.Encryption;
    using OboutInc.ImageZoom.Enums;
    using OboutInc.ImageZoom.Handlers;
    using Obout.Interface;
    using System.Web.Configuration;
    using System.IO;
    using System.Drawing;
    
    public partial class View : System.Web.UI.Page
    {
      
     protected void Page_Load(object sender, EventArgs e)
     {
     
     int ID = Convert.ToInt32(Request.QueryString["ID"]);
     NewsTableAdapter newsID = new NewsTableAdapter();
     fvNews.DataSource = newsID.GetDataID(ID);
     fvNews.DataBind();
     fvPath.DataSource = newsID.GetDataID(ID);
     fvPath.DataBind();
     dlNews.DataSource = newsID.GetDataID(ID);
     dlNews.DataBind();
    
    
     string conn = WebConfigurationManager.ConnectionStrings["..."].ConnectionString;
     System.Data.SqlClient.SqlConnection con =
     new System.Data.SqlClient.SqlConnection(conn);
     // Создали и настроили объект Command
     System.Data.SqlClient.SqlCommand cmd =
      new System.Data.SqlClient.SqlCommand("SELECT numberImageZoom FROM News WHERE (ID = " + ID + ")", con);
     
     // Открыли соединение
     con.Open();
    
     // Выполняем команду и получаем результирующий набор данных
    
     object urlFolder = cmd.ExecuteScalar();
     int j = Convert.ToInt32(urlFolder.ToString());
     if (j > 0 )
      {
      ImageZoom fotoBig = new ImageZoom();
      fotoBig.ID = "imZoom1";
      fotoBig.RenderingMode = RenderingModes.HttpHandler;
      fotoBig.HttpHandlerName = "ImageZoomHandler.ashx";
      fotoBig.ShowFooter = false;
      fotoBig.ShowHeader = false;
      fotoBig.StyleFolder = "styles/light_blue";
      fotoBig.AllowImageSizeSelection = false;
      fotoBig.AllowPageSizeSelection = false;
      fotoBig.BackgroundOpacity = 55;
      fotoBig.ThumbnailHeight = 100;
      fotoBig.ThumbnailWidth = 100;
      fotoBig.PageSize = 50;
      fotoBig.ImageUrl = "../img/" + urlFolder.ToString();
      PanelZoom.Controls.Add(fotoBig);
      }
     
     con.Close();
    
     }
    }
    

    все работает и очень неплохо - пример там же  аша-район.рф/news

    вот эти две строки отвечают за отображение миниатюр фото

     

    fotoBig.RenderingMode = RenderingModes.HttpHandler;
    fotoBig.HttpHandlerName = "ImageZoomHandler.ashx";
    

     

     



    • Помечено в качестве ответа Abolmasov Dmitry 3 июня 2011 г. 6:45
    2 июня 2011 г. 11:58

Все ответы

  • Здравствуйте, не совсем понятно в чем заключается проблема. Вы можете более подробно описать ее?


    Для связи [mail]
    22 апреля 2011 г. 8:26
  • Прилагаю код страницы 

     

    <div class="divText">
        <asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
          <asp:View ID="tab1" runat="server">
            <asp:GridView ID="gvNews" runat="server" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False"
              DataKeyNames="IDNews" EnableModelValidation="True" OnSelectedIndexChanged="gvNews_SelectedIndexChanged"
              GridLines="None" OnPageIndexChanging="gvNews_PageIndexChanging" ShowHeader="False"
              PageSize="30" PagerStyle-HorizontalAlign="Center" CellPadding="0" HorizontalAlign="Center">
              <Columns>
                <asp:BoundField DataField="IDNews" HeaderText="IDNews" InsertVisible="False" ReadOnly="True"
                  SortExpression="IDNews" Visible="False" />
                <asp:TemplateField>
                  <ItemTemplate>
                    <div style="padding: 5px; vertical-align: middle; background-color: #eef6ed; border-top: solid 1px #8ab573;
                      height: 100px; width: 660px;">
                      <i>
                        <%# Eval("DateNews")%></i>
                      <h4>
                        <%# Eval("TitleNews")%></h4>
                    </div>
                  </ItemTemplate>
                </asp:TemplateField>
                <asp:CommandField ButtonType="Image" SelectImageUrl="../images/nButton1.png" ShowSelectButton="True"
                  ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle" />
              </Columns>
            </asp:GridView>
          </asp:View>
          <asp:View ID="tab2" runat="server">
            <asp:ImageButton ID="ImageButton1" runat="server" OnClick="Button1_Click" ImageUrl="~/images/bButton.png"
              ToolTip="Назад к списку" />
            <asp:FormView ID="fvNews" runat="server">
              <ItemTemplate>
                <%# Eval("TextNews") %>
                <br />
                <%# Eval("numberImageZoom") %>
              </ItemTemplate>
            </asp:FormView>
            <obout:ImageZoom ID="ImageZoom1" runat="server" DataUrlField="IDNews" ImageUrl='<%# Eval("numberImageZoom") %>' />
            <asp:ImageButton ID="Button1" runat="server" OnClick="Button1_Click" ImageUrl="~/images/bButton.png"
              ToolTip="Назад к списку" />
          </asp:View>
        </asp:MultiView>
      </div>
    

     

    а так же код файла CS

     

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using DSTableAdapters;
    using OboutInc.ImageZoom;
    using System.IO;
    
    public partial class News_Default4 : System.Web.UI.Page
    {
      protected void Page_Load(object sender, EventArgs e)
      {
        //получаем данные о новостях
        NewsTableAdapter adpNews = new NewsTableAdapter();
        gvNews.DataSource = adpNews.GetData();
        gvNews.DataBind();
      }
      
      protected void gvNews_SelectedIndexChanged(object sender, EventArgs e)
      {
        int index = gvNews.SelectedIndex;
        int ID = (int)gvNews.SelectedDataKey.Values["IDNews"];
        NewsTableAdapter adpNews = new NewsTableAdapter();
        fvNews.DataSource = adpNews.GetDataByNews(ID);
        fvNews.DataBind();
        ImageZoom ImageZoom1 = new ImageZoom();
        ImageZoom1.DataSource = adpNews.GetDataByNews(ID);
        ImageZoom1.DataBind();
        MultiView1.ActiveViewIndex = 1;
    
      }
      
      protected void Button1_Click(object sender, EventArgs e)
      {
        MultiView1.ActiveViewIndex = 0;
      }
      protected void gvNews_PageIndexChanging(object sender, GridViewPageEventArgs e)
      {
        NewsTableAdapter adpNews = new NewsTableAdapter();
        gvNews.DataSource = adpNews.GetData();
        gvNews.PageIndex = e.NewPageIndex;
        gvNews.DataBind();
      }
      
    }
    

    пример на странице

    аша-район.рф/news/Default4.aspx

     

    26 апреля 2011 г. 10:17
  • Да совсем забыл вот код запросов из DAL

    это - GetData

    SELECT    IDNews, TitleNews, TextNews, DateNews, CAST(CAST(MONTH(DateNews) AS varchar) + CAST(YEAR(DateNews) AS varchar) AS nvarchar) AS MYDate
    FROM      News
    ORDER BY DateNews DESC
    

    и GetDataByNews

    SELECT    IDNews, TitleNews, TextNews, DateNews, numberImageZoom
    FROM      News
    WHERE    (IDNews = @IDNews)
    

    Прошу помочь с решением этой задачи

    С уважением Юрий Косенко 

    27 апреля 2011 г. 2:26
  • Разобрался 

    тот вариант который я хотел использовать не подходит для реализации данной задачи - то есть создаем папку и в ней размещаем все изображения и потом меняем свойство ImageZoom ImageUrl - данные о нем храним в поле базы данных

    Для реализации данной задачи

    1. в Базе данных создаем отдельную таблицу для хранения данных об изображениях

    2. а на странице отображаем изображения из базы данных следующим образом

     

     

     

    <div style="width: 90%">
      <asp:SqlDataSource ID="sds1" SelectCommand="SELECT * FROM [Gallery]" runat="server"
       ConnectionString="<%$ ConnectionStrings:GalleryConnStr %>" />
      <center>
       <obout:ImageZoom ID="ImageZoom1" runat="server" DataSourceID="sds1" DataUrlField="Url"
        DataDescriptionsField="Description" StyleFolder="~/ImageZoom/styles/dark_gray"
        AllowImageSizeSelection="false" AllowPageSizeSelection="false" BackgroundOpacity="75"
        ThumbnailHeight="75" ThumbnailWidth="75" PageSize="100" ShowFooter="False"></obout:ImageZoom>
      </center>
     </div>
    

     

    путь к изображениям в поле таблицы Url указываю полный - ~/ImageZoom/0001/image1.jpg

    P.S. DAL - необходимо дорабатывать под конкретные условия 

     


    • Помечено в качестве ответа Abolmasov Dmitry 19 мая 2011 г. 4:51
  • хотелось бы продолжить 

    вот так реализовал это решение

     

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using DSTableAdapters;
    using Obout.Interface;
    using OboutInc.ImageZoom;
    using OboutInc.ImageZoom.Encryption;
    using OboutInc.ImageZoom.Enums;
    using OboutInc.ImageZoom.Handlers;
    using Obout.Interface;
    using System.Web.Configuration;
    using System.IO;
    using System.Drawing;
    
    public partial class View : System.Web.UI.Page
    {
      
     protected void Page_Load(object sender, EventArgs e)
     {
     
     int ID = Convert.ToInt32(Request.QueryString["ID"]);
     NewsTableAdapter newsID = new NewsTableAdapter();
     fvNews.DataSource = newsID.GetDataID(ID);
     fvNews.DataBind();
     fvPath.DataSource = newsID.GetDataID(ID);
     fvPath.DataBind();
     dlNews.DataSource = newsID.GetDataID(ID);
     dlNews.DataBind();
    
    
     string conn = WebConfigurationManager.ConnectionStrings["..."].ConnectionString;
     System.Data.SqlClient.SqlConnection con =
     new System.Data.SqlClient.SqlConnection(conn);
     // Создали и настроили объект Command
     System.Data.SqlClient.SqlCommand cmd =
      new System.Data.SqlClient.SqlCommand("SELECT numberImageZoom FROM News WHERE (ID = " + ID + ")", con);
     
     // Открыли соединение
     con.Open();
    
     // Выполняем команду и получаем результирующий набор данных
    
     object urlFolder = cmd.ExecuteScalar();
     int j = Convert.ToInt32(urlFolder.ToString());
     if (j > 0 )
      {
      ImageZoom fotoBig = new ImageZoom();
      fotoBig.ID = "imZoom1";
      fotoBig.RenderingMode = RenderingModes.HttpHandler;
      fotoBig.HttpHandlerName = "ImageZoomHandler.ashx";
      fotoBig.ShowFooter = false;
      fotoBig.ShowHeader = false;
      fotoBig.StyleFolder = "styles/light_blue";
      fotoBig.AllowImageSizeSelection = false;
      fotoBig.AllowPageSizeSelection = false;
      fotoBig.BackgroundOpacity = 55;
      fotoBig.ThumbnailHeight = 100;
      fotoBig.ThumbnailWidth = 100;
      fotoBig.PageSize = 50;
      fotoBig.ImageUrl = "../img/" + urlFolder.ToString();
      PanelZoom.Controls.Add(fotoBig);
      }
     
     con.Close();
    
     }
    }
    

    все работает и очень неплохо - пример там же  аша-район.рф/news

    вот эти две строки отвечают за отображение миниатюр фото

     

    fotoBig.RenderingMode = RenderingModes.HttpHandler;
    fotoBig.HttpHandlerName = "ImageZoomHandler.ashx";
    

     

     



    • Помечено в качестве ответа Abolmasov Dmitry 3 июня 2011 г. 6:45
    2 июня 2011 г. 11:58