dcsimg
CodeGuru Home VC++ / MFC / C++ .NET / C# Visual Basic VB Forums Developer.com
Results 1 to 3 of 3

Thread: How to make automatic browsing to images from database ?

  1. #1
    Join Date
    Dec 2016
    Posts
    13

    How to make automatic browsing to images from database ?

    I work in MVC 5 c# in visual studio 2015 web applications

    I have table pictures in SQL server 2012 have two fields

    ID

    Image

    ID have number of image inserted like 1,2,3,4,5

    Image field store picture added

    what i need actually browsing images found in table pictures in database from last image inserted to first in page

    and browsing between every image and another 1 second automatically without using button or scroll

    suppose i have 4 images in database in table pictures

    after page open picture 4 display after 1 second picture 3 display after 1 second picture 2 display after 1 second picture 1 display .

    How i do that please ?

  2. #2
    Join Date
    Dec 2018
    Posts
    15

    Re: How to make automatic browsing to images from database ?

    You could refer to the following code to display the image in MVC:

    Code:
    // GET: Home
        public ActionResult Index()
        {
            List<ImageModel> images = GetImages();
            return View(images);
        }
     
        [HttpPost]
        public ActionResult Index(int imageId)
        {
            List<ImageModel> images = GetImages();
            ImageModel image = images.Find(p => p.Id == imageId);
            if (image != null)
            {
                image.IsSelected = true;
                ViewBag.Base64String = "data:image/png;base64," + Convert.ToBase64String(image.Data, 0, image.Data.Length);
            }
            return View(images);
        }
     
        private List<ImageModel> GetImages()
        {
            string query = "SELECT * FROM tblFiles";
            List<ImageModel> images = new List<ImageModel>();
            string constr = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
            using (SqlConnection con = new SqlConnection(constr))
            {
                using (SqlCommand cmd = new SqlCommand(query))
                {
                    cmd.CommandType = CommandType.Text;
                    cmd.Connection = con;
                    con.Open();
                    using (SqlDataReader sdr = cmd.ExecuteReader())
                    {
                        while (sdr.Read())
                        {
                            images.Add(new ImageModel
                            {
                                Id = Convert.ToInt32(sdr["Id"]),
                                Name = sdr["Name"].ToString(),
                                ContentType = sdr["ContentType"].ToString(),
                                Data = (byte[])sdr["Data"]
                            });
                        }
                    }
                    con.Close();
                }
     
                return images;
            }
        }
    Code in the view page:

    Code:
    @using Display_Image_Database_MVC.Models
    @model IEnumerable<Display_Image_Database_MVC.Models.ImageModel>
     
    @{
        Layout = null;
    }
     
    <!DOCTYPE html>
     
    <html>
    <head>
        <meta name="viewport" content="width=device-width"/>
        <title>Index</title>
    </head>
    <body>
        @using (Html.BeginForm("Index", "Home", FormMethod.Post))
        {
            <span>Select Image:</span>
            <select name="ImageId" onchange="document.forms[0].submit();">
                <option value="0">Please select</option>
                @foreach (ImageModel image in Model)
                {
                    if (image.IsSelected)
                    {
                        <option value="@image.Id" selected="selected">@image.Name</option>
                    }
                    else
                    {
                        <option value="@image.Id">@image.Name</option>
                    }
                }
            </select>
        }
        @if (ViewBag.Base64String != null)
        {
            <hr/>
            <img alt="" src="@ViewBag.Base64String" style="height:100px;width:100px;"/>
        }
    </body>
    </html>
    Then, you could use setInterval function or some JQuery Image Slider plugin (such as: jCarousel Autoscroll Plugin ) to create the slider.
    Last edited by 2kaud; March 1st, 2019 at 05:26 AM. Reason: Added code tags

  3. #3
    Join Date
    Jan 2019
    Location
    Slough
    Posts
    16

    Re: How to make automatic browsing to images from database ?

    Make an Action ( with id parameter) to retrieve image id from database

    Make in the .cshtml page a https://www.w3schools.com/jsref/met_win_settimeout.asp in order to call the images and display

    Cache the result for better performance

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  


Windows Mobile Development Center


Click Here to Expand Forum to Full Width




On-Demand Webinars (sponsored)