Asp.net-Mvc
如何使用 ASP.NET MVC 中的複選框創建選擇列表？
我有一個數據庫表，記錄了允許使用者訪問的出版物。該表非常簡單 - 它只是儲存使用者 ID/發布 ID 對：
CREATE TABLE UserPublication (UserId INTEGER, PublicationID INTEGER)給定使用者和出版物的記錄的存在意味著該使用者具有訪問權限；沒有記錄意味著無法訪問。
我想向我的管理員使用者展示一個簡單的螢幕，允許他們配置使用者可以訪問哪些出版物。我想為每個可能的出版物顯示一個複選框，並檢查使用者目前可以訪問的那些。然後管理員使用者可以選中或取消選中任意數量的出版物並送出表單。
有多種出版物類型，我想將類似類型的出版物組合在一起 - 所以我確實需要控制出版物的呈現方式（我不想只有一個平面列表）。
我的視圖模型顯然需要一個所有出版物的列表（因為無論目前選擇如何，我都需要顯示它們），並且我還需要一個使用者目前可以訪問的出版物的列表。（我不確定是否最好使用一個列表，其中每個項目都包含發布 ID 和是/否欄位？）。
但這就是我所擁有的。我真的不知道如何將它綁定到某些複選框。我從哪裡開始？
針對您的問題的 Linq to SQL模型如下所示：
首先，我們的數據模型中需要一些輔助對象：
namespace SelectProject.Models { public class UserPublicationSelector { public int UserPublicationID { get; set; } public int UserID { get; set; } public int PublicationID { get; set; } public string PublicationName { get; set; } public bool IsSelected { get; set; } } public class UserPublicationSelectViewModel { public User User { get; set; } public IQueryable Selections { get; set; } } }現在讓我們創建一個如下所示的儲存庫：
public class Repository { DataContext dc = new DataContext(); public User GetUser(int userID) { return dc.Users.FirstOrDefault(u => u.UserID == userID); } public IQueryable GetUserPublications(int userID) { return from p in dc.Publications join up in dc.UserPublications on p.PublicationID equals up.PublicationID where up.UserID == userID orderby p.PublicationName select p; } public IQueryable GetUserPublicationSelectors(int userID) { return from p in dc.Publications join up in dc.UserPublications on p.PublicationID equals up.PublicationID into selected from s in selected.DefaultIfEmpty() orderby p.PublicationName select new UserPublicationSelector { UserPublicationID = (int?)s.UserPublicationID ?? 0, UserID = userID, PublicationID = p.PublicationID, PublicationName = p.PublicationName, IsSelected = s.UserID != null }; } public void UpdateUserPublications(UserPublicationSelector[] selections) { // Insert records for new selections... foreach (UserPublicationSelector selection in selections.Where(s => s.IsSelected == true)) { // ...where records do not yet exist in database. if (selection.UserPublicationID == 0) { UserPublication up = new UserPublication { UserID = selection.UserID, PublicationID = selection.PublicationID, }; dc.UserPublications.InsertOnSubmit(up); } } // Delete records for unselected items... foreach (UserPublicationSelector selection in selections.Where(s => s.IsSelected == false)) { // ...where record exists in database. if (selection.UserPublicationID > 0) { UserPublication up = dc.UserPublications.FirstOrDefault(s => s.UserPublicationID == selection.UserPublicationID); if (up.UserID == selection.UserID && up.PublicationID == selection.PublicationID) dc.UserPublications.DeleteOnSubmit(up); } } // Update the database dc.SubmitChanges(); } }還有一個看起來像這樣的控制器：
public class PublicationController : Controller { Repository repository = new Repository(); public ActionResult Index(int id) { User user = repository.GetUser(id); var publications = repository.GetUserPublications(id); ViewData["UserName"] = user.UserName; ViewData["UserID"] = user.UserID; return View("Index", publications); } [AcceptVerbs(HttpVerbs.Get)] public ActionResult Select(int id) { var viewModel = new UserPublicationSelectViewModel() { User = repository.GetUser(id), Selections = repository.GetUserPublicationSelectors(id) }; return View("Select", viewModel); } [AcceptVerbs(HttpVerbs.Post)] public ActionResult Select(int userID, UserPublicationSelector[] selections) { repository.UpdateUserPublications(selections); return RedirectToAction("Index", new { id = userID }); } }索引視圖如下所示：
<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<Publication>>" %> <%@ Import Namespace="SelectProject.Models" %> <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> List of Selected Publications for User </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <h2>Publications for <%= ViewData["UserName"] %></h2> <table id="MyTable" style="width: 100%"> <thead> <tr> <th> Publication Name </th> </tr> </thead> <tbody> <% int i = 0; foreach (Publication item in Model) { %> <tr id="row<%= i.ToString() %>"> <td> <%= Html.Encode(item.PublicationName)%> </td> </tr> <% i++; } %> </tbody> </table> <p> <%= Html.ActionLink("Edit Selections", "Select", new { id = ViewData["UserID"] })%> </p> </asp:Content>Select 視圖如下所示：
<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<UserPublicationSelectViewModel>" %> <%@ Import Namespace="SelectProject.Models" %> <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> Select Publications </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <h2>Select Publications for <%= Model.User.UserName %></h2> <% using (Html.BeginForm()) { %> <table id="MyTable" style="width: 100%"> <thead> <tr> <th style="width: 50px; text-align:center"> <input type="checkbox" id="SelectAll" /> </th> <th> Publication Name </th> </tr> </thead> <tbody> <% int i = 0; foreach (UserPublicationSelector item in Model.Selections) { %> <tr id="row<%= i.ToString() %>"> <td align="center" style="padding: 0 0 0 0"> <%= Html.CheckBox("selections[" + i.ToString() + "].IsSelected", item.IsSelected)%> <%= Html.Hidden("selections[" + i.ToString() + "].UserPublicationID", item.UserPublicationID)%> <%= Html.Hidden("selections[" + i.ToString() + "].UserID", Model.User.UserID)%> <%= Html.Hidden("selections[" + i.ToString() + "].PublicationID", item.PublicationID)%> </td> <td> <%= Html.Encode(item.PublicationName)%> </td> </tr> <% i++; } %> </tbody> </table> <p> <%= Html.Hidden("userID", Model.User.UserID) %> <input type="submit" value="save" /> </p> <% } // End Form %> <script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> // Select All Checkboxes $(document).ready(function() { $('#SelectAll').click(function() { var newValue = this.checked; $('input:checkbox').not('input:hidden').each(function() { this.checked = newValue; }); }); }); </script> </asp:Content>這是一些螢幕截圖。
左上角的複選框是全選/全選複選框。
