jquery - 从特定文件夹动态加载框 slider 中的图像

Question

我正在使用Box slider 进行图像滑动，我想从文件夹中添加图像，但这应该是动态的，即如果两个图像是thr意味着只有两个应该出现并且如果10意味着十应该出现并且它也应该在mvc4和aspx中..

我正在使用这个插件 - http://bxslider.com/examples/reload-slider

Answer 1

这是你在 mvc 中可以做到的方式:

型号:

public class Class1
{
   public string test1 { get; set; }
}

Controller 代码:

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);
    }

在 View 中:

@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>