从文件夹中选择图像，然后将其显示在选择列表中或仅显示

Question

大家好，我在这方面真的很陌生！

我被困在这里很久了。请我真的需要你的帮助。谢谢！

我的问题是。如何将我的所有图像显示到 MVC 中的选择列表或下拉列表中，然后将其发布到网站上？我有一个带有 PicID、PicTitle 等的数据库。

我想显示或显示该文件夹中的图像，然后可以选择一张图片，然后将其显示在视图中。

在我的创建视图中，我有：

<h2>Create</h2>

@using (Html.BeginForm()) { @Html.ValidationSummary(true)

<fieldset>
    <legend>Picture</legend>

    <div class="editor-label">
        @Html.LabelFor(model => model.PicTitle)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.PicTitle)
        @Html.ValidationMessageFor(model => model.PicTitle)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.PicUrl)
    </div>
    <div class="editor-field">
        @Html.Action(Model.PicID)
        @Html.ValidationMessageFor(model => model.PicID)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.PicAltText)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.PicAltText)
        @Html.ValidationMessageFor(model => model.PicAltText)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.PicDesc)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.PicDesc)
        @Html.ValidationMessageFor(model => model.PicDesc)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.PicPrio)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.PicPrio)
        @Html.ValidationMessageFor(model => model.PicPrio)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.CatID, "Category")
    </div>
    <div class="editor-field">
        @Html.DropDownList("CatID", String.Empty)
        @Html.ValidationMessageFor(model => model.CatID)
    </div>

    <p>
        <input type="submit" value="Create" />
    </p>
</fieldset>

在我的控制器中：

        public ActionResult Create()
    {
        ViewBag.CatID = new SelectList(db.Categories, "CatID", "CatName");
        return View();
    }

    //
    // POST: /Picture/Create



    [HttpPost]
    public ActionResult Create(Picture picture, HttpPostedFileBase file)
    {
        if (file != null && file.ContentLength > 0)
        {
            var FileName = string.Format("{0}.{1}", Guid.NewGuid(), file.ContentType);
            var path = Path.Combine(Server.MapPath("~/Images_upload"), FileName);
            file.SaveAs(path);
        }
        if (ModelState.IsValid)
        {
            db.Pictures.AddObject(picture);
            db.SaveChanges();
            return RedirectToAction("Index");
        }

        ViewBag.CategoryID = new SelectList(db.Pictures, "PicID", "PicTitle", picture.PicID);
        return View(picture);
    }

请帮助我，谢谢大家。

Answer 1

1) 更改 SQL 表以存储图像的路径：

2) 创建一个模型，您可以在 SQL 中从图片表中检索数据并填充 SelectList 属性（这将用于在下拉列表中显示您的图像）

public class Image
{
    public SelectList ImageList { get; set; }

    public Image()
    {
        ImageList = GetImages();
    }

    public SelectList GetImages()
    {
        var list = new List<SelectListItem>();
        string connection = ConfigurationManager.ConnectionStrings["imageConnection"].ConnectionString;

        using (var con = new SqlConnection(connection))
        {
            con.Open();
            using (var command = new SqlCommand("SELECT * FROM Picture", con))
            {
                SqlDataReader reader = command.ExecuteReader();
                while (reader.Read())
                {
                    string title = reader[1] as string;
                    string imagePath = reader[2] as string;
                    list.Add(new SelectListItem() { Text = title, Value = imagePath });
                }
            }
            con.Close();
        }
        return new SelectList(list,"Value","Text");
    }
}

3) 控制器：

public class ImagesController : Controller
{
    public ViewResult ShowImages()
    {
        Image image = new Image();
        return View(image);
    }
}

4) 查看：

@model MvcApplication1.Models.Image

@{
    ViewBag.Title = "Images";
}

<script src="../../Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#ImageList").change(function () {
            var imagePath = $("#ImageList").val();
            $("#image").attr('src', imagePath)
        });
        $("#ImageList").trigger('change');
    });
</script>
@Html.DropDownList("ImageList")
<img alt="image" id="image" style="width:200px;height:200px;" />

输出：

如果你不明白，我已经在Google Drive 上上传了一个示例项目（只需点击文件->下载）