-
April 28th, 2017, 10:57 AM
#1
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 ?
-
January 7th, 2019, 04:32 AM
#2
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
-
March 1st, 2019, 05:11 AM
#3
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
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|