带有数据库值的MVC下拉列表

Question

基于https://mvcmusicstore.codeplex.com/试图在购买前获得Details专辑中的属性下拉列表。我创建了一个带有属性映射的表和一个带有属性的表。原则上，产品必须引用属性映射，这是为了定义下拉列表中出现的属性。在这里输入图像描述，有人可以帮助我在应用程序中实现吗?

我知道在视图中添加

@Html.DropDownList("Name",new SelectList(ViewBag.Names))

，我不知道如何从映射属性中获取数据，以便每个专辑都有自己的属性集。

控制器:

namespace MvcMusicStore.Controllers
{
    public class StoreController : Controller
    {
        MusicStoreEntities storeDB = new MusicStoreEntities();
        //
        // GET: /Store/
        public ActionResult Index()
        {
            var genres = storeDB.Genres.ToList();
            return View(genres);
        }

        public ActionResult Browse(string genre)
        {
            // Retrieve Genre and its Associated Albums from database
            var genreModel = storeDB.Genres.Include("Albums")
                .Single(g => g.Name == genre);
            return View(genreModel);
        }

        public ActionResult Details(int id)
        {
            var album = storeDB.Albums.Find(id);
            return View(album);
        }        
    }
}

模型:<标题> 1

namespace MvcMusicStore.Models
{
    [Bind(Exclude = "AlbumId")]
    public class Album
    {
        [ScaffoldColumn(false)]
        public int AlbumId { get; set; }
        [DisplayName("Genre")]
        public int GenreId { get; set; }
        [DisplayName("Artist")]
        public int ArtistId { get; set; }
        [Required(ErrorMessage = "An Album Title is required")]
        [StringLength(160)]
        public string Title { get; set; }
        [Required(ErrorMessage = "Price is required")]
        [Range(0.01, 100.00,
            ErrorMessage = "Price must be between 0.01 and 100.00")]
        public decimal Price { get; set; }
        [DisplayName("Album Art URL")]
        [StringLength(1024)]
        public string AlbumArtUrl { get; set; }
        public virtual Genre Genre { get; set; }
        public virtual Artist Artist { get; set; }
        public virtual List<OrderDetail> OrderDetails { get; set; }
    }
}

<标题> 2 h1> 3

namespace MvcMusicStore.Models
{
    public partial class Genre
    {
        public int GenreId { get; set; }
        public string Name { get; set; }
        public string Description { get; set; }
        public List<Album> Albums { get; set; }
    }
}

视图:

@model MvcMusicStore.Models.Album
@{
ViewBag.Title = "Album - " + Model.Title;
}
<h2>@Model.Title</h2>
<p>
<img alt="@Model.Title" src="@Model.AlbumArtUrl" />
</p>
 <div id="album-details">
<p>
    <em>Genre:</em>
    @Model.Genre.Name
</p>
<p>
    <em>Artist:</em>
    @Model.Artist.Name
</p>
<p>
    <em>Price:</em>
    @String.Format("{0:F}", Model.Price)
</p>
<p class="button">
    @Html.ActionLink("Add to cart", "AddToCart", 
    "ShoppingCart", new { id = Model.AlbumId }, "")
</p>
</div>

我当前拥有的代码。

我想添加下拉列表，因为每个产品都有不同的属性，比如一个产品有8种类型的封面，而另一个只有两种。当你选择每个项目(每个有8个封面)下拉列表下面它将zmianiała其内容

想象一个他想要达到的目标的例子。

https://i.stack.imgur.com/IIApj.png

Answer 1

假设您的意思是在第一个下拉菜单中每次选择不同的值时更新第二个下拉菜单的值，一种方法是通过jQuery, JSON，视图模型和一些控制器操作(注意这并没有实现最佳实践，如在控制器操作中没有数据库调用和从视图中提取JS并将其放入模块中):

实体:

namespace DataModel
{
    public class Item
    {
        [Id]
        public int ItemId {get; set;}
        public string ItemText {get; set;} 
    }
    public class Attribute
    {
        [Id]
        public int AttributeId {get; set;}
        public string AttributeText {get; set;}
    }
}

(省略DbContext代码)

控制器动作:

    [HttpGet]
    public ActionResult TestDropdown()
    {
        using(var context = new YourDbContext()) // it's good practice to use the using() statement to dispose of the DbContext's resources right when it's finished, rather than setting a class-level variable
        {
            var model = new Models.TestDropdownViewModel();
            // gets all the items; you might want to filter for items that you want to display 
            model.Items = context.Items.ToList().Select(i => new SelectListItem()
                {
                     Text = i.ItemText,
                     Value = i.ItemId.ToString() // this is probably an ID of the row for the corresponding Item
                });
            model.Attributes = context.Attributes.First().Select(a => new SelectListItem
                {
                    Text = a.AttributeText,
                    Value = a.AttributeId.ToString()
                });
            return View(model);
        }
    }
    [HttpGet]
    public JsonResult GetAttributesForItem(int selectedId)
    {
        using(var context = new YourDbContext())
        {
            var attributes = context.Attributes.Where(a => a.Item.ItemId == selectedId).ToList();
            return Json(addresses.Select(a => new { Value = a.AddressId.ToString(), Text = a.Address1 }), JsonRequestBehavior.AllowGet);
        }
    }

视图模型:

using System.Web.Mvc;
using System.Collections.Generic;
namespace Models
{
    public class TestDropdownViewModel
    {
        public IEnumerable<SelectListItem> Items { get; set; }
        public IEnumerable<SelectListItem> Attributes { get; set; }
    }
}

部分观点:

// make sure jQuery is loaded in your _Layout.cshtml if you're using that pattern
@model Models.TestDropdownViewModel
@{
    ViewBag.Title = "TestDropdown";
}
<div>
    @Html.DropDownList("Items", Model.Items, new { id = "Items" })
</div>
<br />
<div>
    @Html.DropDownList("Attributes", Model.Attributes, new { id = "Attributes" })
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $('#Items').change(function () {
            var selectedId = this.value;
            $.getJSON('/GetAttributesForItem?', { id: selectedId }, function (data) {
                var attributes = $('#Attributes');
                var options;
                $.each(data, function (index, elem) {
                    options += "<option value='" + elem.Value + "'>" + elem.Text + "</option>";
                });
                attributes.html(options);
            });
        });
    });
</script>