我正在使用 Box 滑块进行图像滑动，我想从文件夹中添加图像，但这应该是动态的，即如果两个图像是 thr 意味着只有两个应该来，如果 10 意味着十应该来，它应该在 mvc4 和 aspx 中还..
我正在使用这个插件 - http://bxslider.com/examples/reload-slider
问问题
5073 次
3 回答
1
这是你可以在 mvc 中做到的方式：
模型：
public class Class1
{
public string test1 { get; set; }
}
控制器代码：
public ActionResult Index()
{
ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application.";
List<Class1> Details = new List<Class1>();
DirectoryInfo dir = new DirectoryInfo(@"C:\Users\example\Documents\visual studio 2010\Projects\vertical mega dropdown\MvcApplication1\Images");
foreach (FileInfo file in dir.GetFiles())
{
Details.Add(new Class1
{
test1 = "../../Images/" + file.Name
});
}
return View(Details);
}
在视图中：
@model IEnumerable<MvcApplication1.Models.Class1>
@{
ViewBag.Title = "Home Page";
}
<link href="../../Content/jquery.bxslider.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery.bxslider.js" type="text/javascript"></script>
<script src="../../Scripts/rainbow.min.js" type="text/javascript"></script>
<script src="../../Scripts/scripts.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.bxslider').bxSlider({
auto: true,
controls: false,
pager: false,
autoControls: true
});
});
</script>
<table width="100%">
<tr height="50">
<td align="center">
</td>
</tr>
<tr>
<td align="center">
<div class="inner clearfix">
<div id="primary">
<div class="slider">
<ul class="bxslider">
@foreach (var item in Model)
{
<li>
<img class="imageclass" src="@item.test1" border="0" alt="" />
</li>
}
</ul>
</div>
</div>
</div>
</td>
</tr>
</table>
于 2013-03-19T06:30:12.563 回答
1
这是我在 aspx 和 c#: 中找到的，它工作正常。
asp代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="Styles/jquery.bxslider.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script src="Scripts/jquery.bxslider.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.bxslider').bxSlider({
auto: true,
controls: false,
pager: false,
autoControls: true
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<table width="100%">
<tr>
<td align="center">
<div class="inner clearfix">
<div id="primary">
<div class="slider">
<ul class="bxslider" id="ss" runat="server">
</ul>
</div>
</div>
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
C#代码：
protected void Page_Load(object sender, EventArgs e)
{
List<Class1> Details = new List<Class1>();
DirectoryInfo dir = new DirectoryInfo(@"C:\Users\Documents\visual studio 2010\Projects\Dynamic_Imageslider\Dynamic_Imageslider\Images");
foreach (FileInfo file in dir.GetFiles())
{
Details.Add(new Class1
{
test1 = "../../Images/" + file.Name
});
}
var myList2 = Details;
for (int j = 0; j < Details.Count; j++)
{
Image img = new Image();
img.ID = "img" + j;
img.ImageUrl = myList2[j].test1;
ss.Controls.Add(img);
}
}
public class Class1
{
public string test1 { get; set; }
}
}
于 2013-07-16T12:59:53.570 回答
0
in Html5 it is quite easy, but i do prefer to use this jQuery plugin https://github.com/weixiyen/jquery-filedrop it is pretty awesome.
function fileSetUploadPercent(percent, divID){
var uploadString = "Uploaded " + percent + " %";
$('#'.divID).text(uploadString);
}
function fileUploadStarted(index, file, files_count){
var divID = getDivID(index, file);
createFileUploadDiv(divID); //create the div that will hold the upload status
fileSetUploadPercent(0, divID); //set the upload status to be 0
}
function fileUploadUpdate(index, file, currentProgress){
//Logger.log("fileUploadUpdate(index, file, currentProgress)");
var string = "index = " + index + " Uploading file " + file.fileName + " size is " + file.fileSize + " Progress = " + currentProgress;
$('#status').text(string);
var divID = getDivID(index, file);
fileSetUploadPercent(currentProgress, divID);
}
function fileUploadFinished(index, file, json, timeDiff){
var divID = getDivID(index, file);
fileSetUploadPercent(100, divID);
if(json.status == "OK"){
createThumbnailDiv(index, file, json.url, json.thumbnailURL);
}
}
function fileDocOver(event){
$('#fileDropTarget').css('border', '2px dashed #000000').text("Drop files here");
}
$(".fileDrop").filedrop({
fallback_id: 'fallbackFileDrop',
url: '/api/upload.php',
paramname: 'fileUpload',
// maxfiles: 25, // Ignored if queuefiles is set > 0
maxfilesize: 4, // MB file size limit
// queuefiles: 0, // Max files before queueing (for large volume uploads)
// queuewait: 200, // Queue wait time if full
// data: {},
// headers: {},
// drop: empty,
// dragEnter: empty,
// dragOver: empty,
// dragLeave: empty,
// docEnter: empty,
docOver: fileDocOver,
// docLeave: fileDocLeave,
// beforeEach: empty,
// afterAll: empty,
// rename: empty,
// error: function(err, file, i) {
// alert(err);
// },
uploadStarted: fileUploadStarted,
uploadFinished: fileUploadFinished,
progressUpdated: fileUploadUpdate,
// speedUpdated
});
After this just add div where you want to drop images
<div class='fileDrop'>
Upload a file by dragging it.
<span id='fileDropTarget'/>
</div>
于 2013-03-19T06:25:49.830 回答