在MVC5中使用bxslider的图片库 [英] Picture gallery with bxslider in MVC5

问题描述

我正在尝试构建简单的照片库，使用BxSlider和我实现了添加和删除功能，但滑块在页面加载后不显示图像，只显示白框，我不知道是什么问题。



这是控制器：

I'm trying to build simple photo gallery, with BxSlider and I implemented adding and deleting functionality, but slider doesn't show images after page loads,only shows white box, and I have no idea what is the problem.

This is the controller:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Vrtic_2546.Models;

namespace Vrtic_2546.Controllers
{
    public class GalerijaController : Controller
    {
        // GET: Slider
        public ActionResult Index()
        {
            using (VrticModel db = new VrticModel())
            {
                return View(db.Galerija.ToList());
            }
            //return View();
        }

        //Add Images in slider

        public ActionResult AddImage()
        {
            return View();
        }

        [HttpPost]
        public ActionResult AddImage(HttpPostedFileBase ImagePath)
        {
            if (ImagePath != null)
            {
                // You can skip this block, because it is only to force the user to upload specific resolution pics
                System.Drawing.Image img = System.Drawing.Image.FromStream(ImagePath.InputStream);
                if ((img.Width != 800) || (img.Height != 600))
                {
                    ModelState.AddModelError("", "Image resolution must be 800 x 600 pixels");
                    return View();
                }

                // Upload your pic
                string pic = System.IO.Path.GetFileName(ImagePath.FileName);
                string path = System.IO.Path.Combine(Server.MapPath("~/Content/Images"), pic);
                ImagePath.SaveAs(path);
                using (VrticModel db = new VrticModel())
                {
                    Galerija gallery = new Galerija { putanja = "~/Content/Images/" + pic };
                    db.Galerija.Add(gallery);
                    db.SaveChanges();
                }
            }
            return RedirectToAction("Index");
        }

        // Delete Multiple Images
        public ActionResult DeleteImages()
        {
            using (VrticModel db = new VrticModel())
            {
                return View(db.Galerija.ToList());
            }
        }

        [HttpPost]
        public ActionResult DeleteImages(IEnumerable<int> ImagesIDs)
        {
            using (VrticModel db = new VrticModel())
            {
                foreach (var id in ImagesIDs)
                {
                    var image = db.Galerija.Single(s => s.ID == id);
                    string imgPath = Server.MapPath(image.putanja);
                    db.Galerija.Remove(image);
                    if (System.IO.File.Exists(imgPath))
                        System.IO.File.Delete(imgPath);
                }
                db.SaveChanges();
            }
            return RedirectToAction("DeleteImages");
        }
    }

}

这些是观点：



添加：

These are views:

Adding:

@model Vrtic_2546.Models.Galerija
@{
    ViewBag.Title = "AddImage";
}

<h2>AddImage</h2>
@using (Html.BeginForm("AddImage", "Galerija", FormMethod.Post,
                                                    new { enctype = "multipart/form-data" }))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Gallery</legend>

        <div class="editor-label">
            Upload Image
        </div>
        <div class="editor-field">
            <input type="file" id="ImagePath" name="ImagePath" />
        </div>
        <p>
            <input type="submit" value="Save" />
        </p>
    </fieldset>
    <p>@Html.ActionLink("Slider Home", "Index", "Slider")</p>
}

删除：

Deleting:

@{
    ViewBag.Title = "DeleteImages";
}

<h2>DeleteImages</h2>
@using (Html.BeginForm("DeleteImages", "Galerija", FormMethod.Post))
{
    <table style="background-color:azure" border="1">
        <thead style="background-color:gray">
            <tr>
                <th>Select</th>
                <th>Image</th>
            </tr>
        </thead>
        <tbody>
            @Html.EditorForModel()
        </tbody>
    </table>
    <input type="submit" value="Delete Selected Images" />
}
<p>@Html.ActionLink("Slider Home", "Index", "Slider")</p>

指数：

Index:

@model IEnumerable<Vrtic_2546.Models.Galerija>
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_GalerijaLayout.cshtml";
}

<h2>Galerija</h2>
<p>
    @Html.ActionLink("Povratak na Naslovnu", "Index", "Home")
    @*@Html.ActionLink("Add Image", "AddImage", "Galerija", new { id = "linkAddimage" }, null) |
    @Html.ActionLink("Delete Image", "DeleteImages", "Galerija", new { id = "linkDeleteImage" }, null)*@
</p>
@Html.Partial("~/Views/Shared/SliderPartial.cshtml", Model)

部分：

Partial:

<div>
    <ul id="slider">
        @foreach (var image in Model)
        {
            <li></li>
        }
    </ul>
</div>

<script>

$(document).ready(function () {
        $('#slider').bxSlider({
        });
        $('.bx-wrapper').width('70%');
    });

</script>

我尝试了什么：



我尝试了很多调整，但仍然没有成功。

What I have tried:

I tried a lot of tweaking, but still no success.

推荐答案

（ document ）。ready（ function （）{

(document).ready(function () {

（' ＃slider' ）。bxSlider（{
}）;

('#slider').bxSlider({ });

（' .bx-wrapper'）。width（' 70％'）;
}）;

('.bx-wrapper').width('70%'); });

</script>

我的尝试：



我尝试了很多调整，但仍然没有成功。

What I have tried:

I tried a lot of tweaking, but still no success.

这篇关于在MVC5中使用bxslider的图片库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！