Làm thế nào để xử lý các hộp kiểm trong các hình thức ASP.NET MVC?

Chú ý: Câu hỏi này đã hơn chín tuổi!

Tùy chọn tốt nhất của bạn là tìm kiếm các câu hỏi mới hơn hoặc tìm kiếm các câu trả lời bên dưới để tìm phiên bản cụ thể của MVC, vì nhiều câu trả lời ở đây đã lỗi thời.

Nếu bạn tìm thấy câu trả lời phù hợp với phiên bản của mình, vui lòng đảm bảo rằng câu trả lời có chứa phiên bản MVC bạn đang sử dụng.
_{(Câu hỏi ban đầu bắt đầu bên dưới)}

Điều này có vẻ hơi kỳ quái với tôi, nhưng theo như tôi có thể nói, đây là cách bạn làm điều đó.

Tôi có một bộ sưu tập các đối tượng và tôi muốn người dùng chọn một hoặc nhiều trong số chúng. Điều này nói với tôi "hình thức với các hộp kiểm." Các đối tượng của tôi không có bất kỳ khái niệm nào về "được chọn" (chúng là POCO thô sơ được hình thành bằng cách khử lưu lượng cuộc gọi wcf). Vì vậy, tôi làm như sau:

public class SampleObject{
  public Guid Id {get;set;}
  public string Name {get;set;}
}

Theo quan điểm:

<%
    using (Html.BeginForm())
    {
%>
  <%foreach (var o in ViewData.Model) {%>
    <%=Html.CheckBox(o.Id)%>&nbsp;<%= o.Name %>
  <%}%>
  <input type="submit" value="Submit" />
<%}%>

Và, trong bộ điều khiển, đây là cách duy nhất tôi có thể thấy để tìm ra những đối tượng mà người dùng đã kiểm tra:

public ActionResult ThisLooksWeird(FormCollection result)
{
  var winnars = from x in result.AllKeys
          where result[x] != "false"
          select x;
  // yadda
}

Nó kỳ dị ở vị trí đầu tiên và thứ hai, đối với những mặt hàng mà người dùng đã kiểm tra, FormCollection liệt kê giá trị của nó là "true false" thay vì chỉ đúng.

Rõ ràng, tôi đang thiếu một cái gì đó. Tôi nghĩ rằng điều này được xây dựng với ý tưởng rằng các đối tượng trong bộ sưu tập được tác động trong biểu mẫu html được cập nhật bằng cách sử dụngUpdateModel() hoặc thông qua ModelBinder.

Nhưng các đối tượng của tôi không được thiết lập cho điều này; điều đó có nghĩa là đây là cách duy nhất? Có cách nào khác để làm điều đó?

Html.CheckBox đang làm điều gì đó kỳ lạ - nếu bạn xem nguồn trên trang kết quả, bạn sẽ thấy có một <input type="hidden" /> được tạo bên cạnh mỗi hộp kiểm, giải thích các giá trị "đúng sai" mà bạn thấy cho mỗi phần tử biểu mẫu.

Hãy thử cái này, cái này chắc chắn hoạt động trên ASP.NET MVC Beta vì tôi mới thử nó.

Đặt cái này trong dạng xem thay vì sử dụng Html.CheckBox ():

<% using (Html.BeginForm("ShowData", "Home")) {  %>
  <% foreach (var o in ViewData.Model) { %>
    <input type="checkbox" name="selectedObjects" value="<%=o.Id%>">
    <%= o.Name %>
  <%}%>
  <input type="submit" value="Submit" />
<%}%>

Các hộp kiểm của bạn đều được gọi selectedObjectsvàvalue mỗi hộp kiểm là GUID của đối tượng tương ứng.

Sau đó đăng lên hành động của bộ điều khiển sau (hoặc một cái gì đó tương tự làm điều gì đó hữu ích thay vì Phản hồi.Write ())

public ActionResult ShowData(Guid[] selectedObjects) {
    foreach (Guid guid in selectedObjects) {
        Response.Write(guid.ToString());
    }
    Response.End();
    return (new EmptyResult());
}

Ví dụ này sẽ chỉ viết GUID của các hộp bạn đã kiểm tra; ASP.NET MVC ánh xạ các giá trị GUID của các hộp kiểm đã chọn vào Guid[] selectedObjectstham số cho bạn và thậm chí phân tích các chuỗi từ bộ sưu tập Request.Form thành các đối tượng GUID tức thời, mà tôi nghĩ là khá hay.

HtmlHelper thêm một đầu vào ẩn để thông báo cho bộ điều khiển về trạng thái Unchecked. Vì vậy, để có trạng thái kiểm tra chính xác:

bool bChecked = form[key].Contains("true");

Trong trường hợp bạn đang tự hỏi TẠI SAO họ lại đặt một trường ẩn có cùng tên với hộp kiểm thì lý do là như sau:

Nhận xét từ mã nguồn MVCBetaSource \ MVC \ src \ MvcFutures \ Mvc \ NútAndLinkExtensions.cs

Kết xuất bổ sung <input type="hidden".../>cho các hộp kiểm. Điều này giải quyết các tình huống trong đó các hộp kiểm không được chọn không được gửi trong yêu cầu. Gửi một đầu vào ẩn cho phép có thể biết rằng hộp kiểm đã có mặt trên trang khi yêu cầu được gửi.

Tôi đoán đằng sau hậu trường họ cần biết điều này để liên kết với các tham số trên các phương thức hành động của bộ điều khiển. Sau đó, bạn có thể có một boolean ba trạng thái tôi giả sử (ràng buộc với một tham số bool nullable). Tôi đã không thử nó nhưng tôi hy vọng đó là những gì họ đã làm.

Bạn cũng nên sử dụng <label for="checkbox1">Checkbox 1</label>vì sau đó mọi người có thể nhấp vào văn bản nhãn cũng như chính hộp kiểm. Nó cũng dễ dàng hơn để tạo kiểu và ít nhất là trong IE, nó sẽ được tô sáng khi bạn tab thông qua các điều khiển của trang.

<%= Html.CheckBox("cbNewColors", true) %><label for="cbNewColors">New colors</label>

Đây không chỉ là một điều 'oh tôi có thể làm điều đó'. Đó là một cải tiến đáng kể trải nghiệm người dùng. Ngay cả khi không phải tất cả người dùng biết họ có thể nhấp vào nhãn nhiều người sẽ.

Tôi ngạc nhiên không có câu trả lời nào trong số này sử dụng các tính năng MVC tích hợp cho việc này.

Tôi đã viết một bài đăng blog về điều này ở đây , thậm chí thực sự liên kết các nhãn với hộp kiểm. Tôi đã sử dụng thư mục EditorTemplate để thực hiện việc này theo cách sạch sẽ và mô-đun.

Bạn chỉ cần kết thúc với một tệp mới trong thư mục EditorTemplate trông như thế này:

@model SampleObject

@Html.CheckBoxFor(m => m.IsChecked)
@Html.HiddenFor(m => m.Id)
@Html.LabelFor(m => m.IsChecked, Model.Id)

trong chế độ xem thực tế của bạn, sẽ không cần phải lặp lại điều này, chỉ cần 1 dòng mã:

@Html.EditorFor(x => ViewData.Model)

Ghé thăm bài viết trên blog của tôi để biết thêm chi tiết.

Đây là những gì tôi đã làm.

Lượt xem:

<input type="checkbox" name="applyChanges" />

Điều khiển:

var checkBox = Request.Form["applyChanges"];

if (checkBox == "on")
{
...
}

Tôi thấy các phương thức của trình trợ giúp Html. * Không hữu ích trong một số trường hợp và tôi nên làm điều đó tốt hơn trong HTML cũ. Đây là một trong số họ, một cái khác mà tôi nghĩ đến là các nút radio.

Chỉnh sửa: đây là trên Preview 5, rõ ràng là YMMV giữa các phiên bản.

Chúng dường như chỉ chọn đọc giá trị đầu tiên, vì vậy đây là "đúng" khi hộp kiểm được chọn và "sai" khi chỉ bao gồm giá trị ẩn. Điều này dễ dàng được tìm nạp với mã như thế này:

model.Property = collection["ElementId"].ToLower().StartsWith("true");

@Dylan Beattie Tuyệt vời Tìm !!! Em cảm ơn anh nhiều. Để mở rộng hơn nữa, kỹ thuật này cũng hoạt động hoàn hảo với phương pháp Xem Mô hình. MVC rất tuyệt, đủ thông minh để liên kết một mảng Hướng dẫn với một thuộc tính có cùng tên của đối tượng Mô hình được liên kết với Chế độ xem. Thí dụ:

ViewModel:

public class SampleViewModel
{
    public IList<SampleObject> SampleObjectList { get; set; }
    public Guid[] SelectedObjectIds { get; set; }

    public class SampleObject
    {
        public Guid Id { get; set; }
        public string Name { get; set; }
    }
}

Lượt xem:

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>Sample View</h2>
<table>
    <thead> 
        <tr>
            <th>Checked</th>
            <th>Object Name</th>
        </tr>
    </thead> 
<% using (Html.BeginForm()) %>
<%{%>                    
    <tbody>
        <% foreach (var item in Model.SampleObjectList)
           { %>
            <tr>
                <td><input type="checkbox" name="SelectedObjectIds" value="<%= item.Id%>" /></td>
                <td><%= Html.Encode(item.Name)%></td>
            </tr>
        <% } %>
    </tbody>
</table>
<input type="submit" value="Submit" />
<%}%>                    

Điều khiển:

    [AcceptVerbs(HttpVerbs.Get)]
    public ActionResult SampleView(Guid id)
    {
        //Object to pass any input objects to the View Model Builder 
        BuilderIO viewModelBuilderInput = new BuilderIO();

        //The View Model Builder is a conglomerate of repositories and methods used to Construct a View Model out of Business Objects
        SampleViewModel viewModel = sampleViewModelBuilder.Build(viewModelBuilderInput);

        return View("SampleView", viewModel);
    }

    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult SampleView(SampleViewModel viewModel)
    {
        // The array of Guids successfully bound to the SelectedObjectIds property of the View Model!
        return View();
    }

Bất cứ ai quen thuộc với triết lý Mô hình xem sẽ vui mừng, điều này hoạt động như một người Champ!

Tôi cũng muốn chỉ ra rằng bạn có thể đặt tên cho mỗi hộp kiểm một tên khác nhau và có một phần tên đó trong các tham số hành động.

Thí dụ,

Lượt xem:

 <%= Html.CheckBox("Rs232CheckBox", false, new { @id = "rs232" })%>RS-232

 <%= Html.CheckBox("Rs422CheckBox", false, new { @id = "rs422" })%>RS-422

Điều khiển:

public ActionResults MyAction(bool Rs232CheckBox, bool Rs422CheckBox) {
    ...
}

Các giá trị từ khung nhìn được truyền cho hành động vì các tên giống nhau.

Tôi biết giải pháp này không lý tưởng cho dự án của bạn, nhưng tôi nghĩ tôi đã ném ý tưởng ra khỏi đó.

<input type = "checkbox" name = "checkbox1" /> <label> Check to say hi.</label>

Từ Bộ điều khiển:

    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult Index(FormCollection fc)
    {

         var s = fc["checkbox1"];

         if (s == "on")
         {
             string x = "Hi";
         }
    }

Vấn đề này cũng đang xảy ra trong phiên bản 1.0. Html.Checkbox () khiến một trường ẩn khác được thêm vào cùng tên / id như hộp kiểm ban đầu của bạn. Và khi tôi đang thử tải lên một mảng hộp kiểm bằng document.GetElemtentsByName (), bạn có thể đoán mọi thứ đang bị rối tung như thế nào. Thật là kỳ quái.

Từ những gì tôi có thể thu thập, mô hình không muốn đoán xem đã kiểm tra = đúng hay sai, tôi đã khắc phục điều này bằng cách đặt thuộc tính giá trị trên thành phần hộp kiểm với jQuery trước khi gửi biểu mẫu như thế này:

 $('input[type="checkbox"]').each(function () {
       $(this).attr('value', $(this).is(':checked'));
 }); 

Bằng cách này, bạn không cần một yếu tố ẩn chỉ để lưu trữ giá trị của hộp kiểm.

Tôi biết rằng câu hỏi này được viết khi MVC3 không xuất hiện, nhưng với bất kỳ ai đến với câu hỏi này và đang sử dụng MVC3, bạn có thể muốn cách "chính xác" để làm điều này.

Trong khi tôi nghĩ rằng làm toàn bộ

Contains("true");

điều này thật tuyệt vời và sạch sẽ, và hoạt động trên tất cả các phiên bản MVC, vấn đề là nó không tính đến văn hóa (như thể nó thực sự quan trọng trong trường hợp của một bool).

Cách "chính xác" để tìm ra giá trị của một bool, ít nhất là trong MVC3, là sử dụng ValueProvider.

var value = (bool)ValueProvider.GetValue("key").ConvertTo(typeof(bool));

Tôi làm điều này trong một trong các trang web của khách hàng khi tôi chỉnh sửa quyền:

var allPermissionsBase = Request.Params.AllKeys.Where(x => x.Contains("permission_")).ToList();
var allPermissions = new List<KeyValuePair<int, bool>>();

foreach (var key in allPermissionsBase)
{
     // Try to parse the key as int
     int keyAsInt;
     int.TryParse(key.Replace("permission_", ""), out keyAsInt);

     // Try to get the value as bool
     var value = (bool)ValueProvider.GetValue(key).ConvertTo(typeof(bool));
}

Bây giờ, cái hay của việc này là bạn có thể sử dụng nó với bất kỳ loại đơn giản nào, và thậm chí nó sẽ chính xác dựa trên Văn hóa (nghĩ về tiền, số thập phân, v.v.).

ValueProvider là những gì được sử dụng khi bạn hình thành các Hành động của mình như thế này:

public ActionResult UpdatePermissions(bool permission_1, bool permission_2)

nhưng khi bạn đang cố gắng tự động xây dựng các danh sách này và kiểm tra các giá trị, bạn sẽ không bao giờ biết Id khi biên dịch, vì vậy bạn phải xử lý chúng nhanh chóng.

Cách dễ nhất để làm là ...

Bạn đặt tên và giá trị.

<input type="checkbox" name="selectedProducts" value="@item.ProductId" />@item.Name

Sau đó, gửi lấy các giá trị của hộp kiểm tra và lưu trong một mảng int. sau đó là chức năng LinQ thích hợp. Đó là nó..

[HttpPost]
        public ActionResult Checkbox(int[] selectedObjects)
        {
            var selected = from x in selectedObjects
                           from y in db
                           where y.ObjectId == x
                           select y;                   

            return View(selected);
        }

Giống như câu trả lời của nanom20, chỉ cần sử dụng danh sách hộp kiểm ràng buộc mô hình mặc định MVC có cùng tên với thuộc tính bộ sưu tập của chuỗi / int / enum trong ViewModel. Thế là xong.

Nhưng một vấn đề cần chỉ ra. Trong mỗi thành phần hộp kiểm, bạn không nên đặt "Id" trong đó sẽ ảnh hưởng đến liên kết mô hình MVC.

Mã sau sẽ hoạt động cho ràng buộc mô hình:

 <% foreach (var item in Model.SampleObjectList)
       { %>
        <tr>
            <td><input type="checkbox" name="SelectedObjectIds" value="<%= item.Id%>" /></td>
            <td><%= Html.Encode(item.Name)%></td>
        </tr>
 <% } %>

Các mã sau sẽ không ràng buộc với mô hình (sự khác biệt ở đây là id được gán cho mỗi hộp kiểm)

<% foreach (var item in Model.SampleObjectList)
       { %>
        <tr>
            <td><input type="checkbox" name="SelectedObjectIds" id="[some unique key]" value="<%= item.Id%>" /></td>
            <td><%= Html.Encode(item.Name)%></td>
        </tr>
<% } %>

đây là những gì tôi đã làm để mất các giá trị kép khi sử dụng Html.CheckBox (...

Replace("true,false","true").Split(',')

với 4 hộp được chọn, không được chọn, không được chọn, đã chọn, nó biến thành đúng, sai, sai, sai, đúng, sai thành đúng, sai, sai, đúng. đúng thứ tôi cần

Còn những thứ như thế này thì sao?

bool isChecked = false;
if (Boolean.TryParse(Request.Form.GetValues(”chkHuman”)[0], out isChecked) == false)
    ModelState.AddModelError(”chkHuman”, “Nice try.”);

Khi sử dụng hộp kiểm HtmlHelper, tôi thích làm việc với dữ liệu biểu mẫu hộp kiểm được đăng dưới dạng một mảng. Tôi thực sự không biết tại sao, tôi biết các phương thức khác hoạt động, nhưng tôi nghĩ rằng tôi chỉ thích coi các chuỗi được phân tách bằng dấu phẩy là một mảng càng nhiều càng tốt.

Vì vậy, thực hiện 'kiểm tra' hoặc kiểm tra thực sự sẽ là:

//looking for [true],[false]
bool isChecked = form.GetValues(key).Contains("true"); 

Kiểm tra sai sẽ là:

//looking for [false],[false] or [false]
bool isNotChecked = !form.GetValues(key).Contains("true"); 

Sự khác biệt chính là sử dụng GetValuesvì điều này trả về như một mảng.

Chỉ cần làm điều này trên $(document).ready:

$('input:hidden').each(function(el) {
    var that = $(this)[0];
    if(that.id.length < 1 ) {

        console.log(that.id);
        that.parentElement.removeChild(that);

    }
});

Giải pháp của tôi là:

<input type="checkbox"  id="IsNew-checkbox"  checked="checked" />     
<input type="hidden"  id="IsNew" name="IsNew" value="true"  />      
<script language="javascript" type="text/javascript" >     
  $('#IsNew-checkbox').click(function () {    
      if ($('#IsNew-checkbox').is(':checked')) {    
          $('#IsNew').val('true');    
      } else {    
          $('#IsNew').val('false');    
       }    
  });   
</script>  

Thêm bạn có thể tìm thấy ở đây: http://www.blog.mieten.pl/2010/12/asp-net-mvc-custom-checkbox-as-solution-of-opes-was-not-recognized-as-a- hợp lệ-boolean /

Tôi đã có vấn đề gần như tương tự nhưng Giá trị trả về của Trình điều khiển của tôi đã bị chặn với các Giá trị khác.

Tìm thấy một giải pháp đơn giản nhưng có vẻ hơi thô.

Hãy thử nhập Trình Viewbag.điều khiển của bạn và bây giờ bạn đặt cho nó một tên nhưViewbag.Checkbool

Bây giờ chuyển sang Chế độ xem và thử điều này @Viewbag.Checkbool với điều này, bạn sẽ nhận được giá trị từ Bộ điều khiển.

Thông số điều khiển của tôi trông như thế này:

public ActionResult Anzeigen(int productid = 90, bool islive = true)

và Hộp kiểm của tôi sẽ cập nhật như thế này:

<input id="isLive" type="checkbox" checked="@ViewBag.Value" ONCLICK="window.location.href = '/MixCategory/Anzeigen?isLive=' + isLive.checked.toString()" />

Sử dụng @mmacaulay, tôi đã nghĩ ra cái này cho bool:

// MVC Work around for checkboxes.
bool active = (Request.Form["active"] == "on");

Nếu được chọn kích hoạt = true

Nếu không được chọn kích hoạt = false