如何在 ASP.NET Framework 中使用多选 javascript？

Question

我有 2 个表通过外键 PricelistId 链接在一起。我想同时从另一个表中的数据中使用多个选择。但我不知道如何使用 javascript 来做到这一点。我完成了我的控制器。目前我被困在 Create.cshtml 中。任何帮助将不胜感激。这是我的代码片段：

PriceList.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;
using System.Web.Security;
using Owin;

namespace Resit_Project.Models
{
    public partial class PriceList
    {
        public PriceList()
        {
            Categories = new HashSet<Category>(); 
        }
        [Key]
        public int PricelistId { get; set; }
        public string Stage { get; set; }
        public Machine Machine { get; set; }
        public int Price { get; set; }
        public byte[] Image { get; set; }

        public virtual ICollection<Category> Categories { get; set; }

    }
    public enum Machine
    {
        VS,
        TS,
        AK,
        TK
    }
}

类别.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;

namespace Resit_Project.Models
{
public class Category
{
    [Key]
    public int CateId { get; set; }
    public string Name { get; set; }
    public int PricelistId { get; set; }
    public string PricelistIdList { get; set; }

    public virtual PriceList Pricelist { get; set; } 
    
}
}

类别控制器

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Net;
using System.Threading.Tasks;
using System.Web;
using System.Web.Mvc;
using Resit_Project.Models;

namespace Resit_Project.Controllers
{
public class CategoriesController : Controller
{
    private ApplicationDbContext db = new ApplicationDbContext();

    // GET: Categories
    public ActionResult Index()
    {
        var categories = db.Categories.Include(c => c.Pricelist);
        return View(categories.ToList());
    }

    // GET: Categories/Details/5
    public async Task<ActionResult> Details(int? id)
    {
        if (id == null)
        {
            return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
        }

        var category = await db.Categories.Include(c => c.Pricelist).FirstOrDefaultAsync(m => m.CateId == id);
        int[] PriceIdList = category.PricelistIdList.Split(',').Select(n => Convert.ToInt32(n)).ToArray();
        List<PriceList> priceLists = new List<PriceList>();

        foreach (var PriceId in PriceIdList)
        {
            var PriceDetails = db.PriceLists.Where(c => c.PricelistId == PriceId).FirstOrDefault();
            priceLists.Add(PriceDetails);
        }

        ViewBag.priceLists = priceLists;
        if (category == null)
        {
            return HttpNotFound();
        }
        return View(category);
    }

    // GET: Categories/Create
    public ActionResult Create()
    {
        ViewBag.PricelistId = new SelectList(db.PriceLists, "PricelistId", "Stage");

        var priceLists = db.PriceLists.ToList();
        List<SelectListItem> myList = new List<SelectListItem>();
        foreach (var price in priceLists)
        {
            myList.Add(new SelectListItem { Text = price.Stage, Value = price.PricelistId.ToString() });
        }

        ViewBag.PricelistId = myList;
        return View();
    }

    // POST: Categories/Create
    // To protect from overposting attacks, enable the specific properties you want to bind to, for 
    // more details see https://go.microsoft.com/fwlink/?LinkId=317598.
    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create([Bind(Include = "CateId,Name,PricelistId,PricelistIdList")] Category category, int[] PricelistId)
    {
        var stage = "";
        PriceList priceList = new PriceList();
        foreach (var id in PricelistId)
        {
            stage = db.PriceLists.Where(m => m.PricelistId == id).FirstOrDefault().Stage.ToString();
            priceList = db.PriceLists.Where(m => m.PricelistId == id).FirstOrDefault();

        }
        category.Pricelist = priceList;
        category.PricelistIdList = string.Join(",", PricelistId);

        if (ModelState.IsValid)
        {
            db.Categories.Add(category);
            db.SaveChanges();
            return RedirectToAction("Index");
        }

        ViewBag.PricelistId = new SelectList(db.PriceLists, "PricelistId", "Stage", category.PricelistId);
        return View(category);
    }

    // GET: Categories/Edit/5
    public async Task<ActionResult> Edit(int? id)
    {
        var priceLists = db.PriceLists.ToList();
        List<SelectListItem> list = new List<SelectListItem>();
        foreach (var price in priceLists)
        {
            list.Add(new SelectListItem { Text = price.Stage, Value = price.PricelistId.ToString() });
        }
        ViewBag.PricelistsId = list;

        var category = await db.Categories.Include(c => c.Pricelist).FirstOrDefaultAsync(m => m.CateId == id);
        int[] PriceIdList = category.PricelistIdList.Split(',').Select(n => Convert.ToInt32(n)).ToArray();
        List<PriceList> priceList = new List<PriceList>();
        
        foreach (var PriceId in PriceIdList)
        {
            var PriceDetails = db.PriceLists.Where(c => c.PricelistId == PriceId).FirstOrDefault();
            priceList.Add(PriceDetails);
        }
        ViewBag.priceLists = priceList;

        if (id == null)
        {
            return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
        }

        if (category == null)
        {
            return HttpNotFound();
        }
        ViewBag.PricelistId = new SelectList(db.PriceLists, "PricelistId", "Stage", category.PricelistId);
        return View(category);
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Edit([Bind(Include = "CateId,Name,PricelistId,PricelistIdList")] Category category, int[] PricelistId)
    {
        var stage = "";
        PriceList priceList = new PriceList();
        foreach (var id in PricelistId)
        {
            stage = db.PriceLists.Where(m => m.PricelistId == id).FirstOrDefault().Stage.ToString();
            priceList = db.PriceLists.Where(m => m.PricelistId == id).FirstOrDefault();

        }
        category.Pricelist = priceList;
        category.PricelistIdList = string.Join(",", PricelistId);

        if (ModelState.IsValid)
        {
            db.Entry(category).State = EntityState.Modified;
            db.SaveChanges();
            return RedirectToAction("Index");
        }
        ViewBag.PricelistId = new SelectList(db.PriceLists, "PricelistId", "Stage", category.PricelistId);
        return View(category);
    }

    // GET: Categories/Delete/5
    public ActionResult Delete(int? id)
    {
        if (id == null)
        {
            return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
        }
        Category category = db.Categories.Find(id);
        if (category == null)
        {
            return HttpNotFound();
        }
        return View(category);
    }

    // POST: Categories/Delete/5
    [HttpPost, ActionName("Delete")]
    [ValidateAntiForgeryToken]
    public ActionResult DeleteConfirmed(int id)
    {
        Category category = db.Categories.Find(id);
        db.Categories.Remove(category);
        db.SaveChanges();
        return RedirectToAction("Index");
    }

    protected override void Dispose(bool disposing)
    {
        if (disposing)
        {
            db.Dispose();
        }
        base.Dispose(disposing);
    }
    }
    } 

创建.cshtml

@model Resit_Project.Models.Category

@{
ViewBag.Title = "Create";
}

<h2>Create</h2>


 @using (Html.BeginForm()) 
{
@Html.AntiForgeryToken()

<div class="form-horizontal">
    <h4>Category</h4>
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="form-group">
        @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.PricelistId, "PricelistId", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownList("PricelistId", null, htmlAttributes: new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.PricelistId, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Create" class="btn btn-default" />
        </div>
    </div>
</div>
}

<div>
@Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}

详情.cshtml

@model Resit_Project.Models.Category

@{
ViewBag.Title = "Details";
}

<h2 class="text-center">Details Code</h2>
<h3 class="text-center">
@Html.DisplayFor(model => model.Name)
</h3>
<div>
<table class="table table-bordered">
    <thead>
        <tr>
            <th>
                <a>Stage</a>
            </th>
            <th>
                <a>Machine</a>
            </th>
            <th>
                <a>Price</a>
            </th>
        </tr>
    </thead>
    <tbody>
        @foreach (var price in ViewBag.priceLists)
        {
            <tr>
                <td>
                    @price.Stage
                </td>
                <td>
                    @price.Machine
                </td>
                <td>
                    @price.Price.ToString("#,##0") ¢
                </td>
            </tr>
        }
    </tbody>
</table>
</div>
<p>
@Html.ActionLink("Edit", "Edit", new { id = Model.CateId }) |
@Html.ActionLink("Back to List", "Index")
</p>

我不知道如何一次选择多个阶段。非常感谢任何帮助。

这是我想应用于我的项目的另一个示例。

最终结果我想要这样的详细信息页面。

非常感谢！

Answer 1

$('select[multiple]').multiselect();

<link rel="stylesheet" href="js/multiselect/jquery.multiselect.css">

<select name="langOpt[]" multiple id="langOpt">
    <option value="C++">C++</option>
    <option value="C#">C#</option>
    <option value="Java">Java</option>
    <option value="Objective-C">Objective-C</option>
    <option value="JavaScript">JavaScript</option>
    <option value="Perl">Perl</option>
    <option value="PHP">PHP</option>
    <option value="Ruby on Rails">Ruby on Rails</option>
    <option value="Android">Android</option>
    <option value="iOS">iOS</option>
    <option value="HTML">HTML</option>
    <option value="XML">XML</option>
</select>