web-dev-qa-db-ja.com

MVC3ビューのCheckboxListとコントローラーに渡されたチェック済みアイテムを取得

MoreInfoのクラスがあります。

public class MoreInfo
{
        public string Name { get; set; }
        public string selectedCheckboxItems {get; set;}
}

ビューにチェックボックスリストを作成し、送信時にチェックオフしたアイテムをコントローラーに渡す方法を知りたいです。

チェックリストのリストを作成するにはどうすればよいですか、すべてのチェックされたアイテムを渡し、それらを処理するにはどうすればよいですか？

asp.net-mvcasp.net-mvc-3checkboxlist
25
RPS

モデルを少し変更しましょう：

public class ItemViewModel
{
    public string Id { get; set; }
    public string Name { get; set; }
    public bool Checked { get; set; }
}

それからあなたはコントローラーを持つことができます：

public class HomeController: Controller
{
    public ActionResult Index()
    {
        // This action is used to render the form => 
        // we should populate our model with some values
        // which could obviously come from some data source
        var model = new[]
        {
            new ItemViewModel { Id = "1", Checked = true, Name = "item 1" },
            new ItemViewModel { Id = "2", Checked = false, Name = "item 2" },
            new ItemViewModel { Id = "3", Checked = true, Name = "item 3" },
        };
        return View(model);
    }

    [HttpPost]
    public ActionResult Index(IEnumerable<ItemViewModel> items)
    {
        // This action will be invoked when the form is submitted
        // and here the view model will be properly bound and
        // you will get a collection of all items with their
        // corresponding id, name and whether they were checked or not
        ...
    }
}

次に、対応するビュー（~/Views/Home/Index.cshtml）これには、ユーザーが値をチェック/チェック解除できるフォームが含まれます。

@model IEnumerable<AppName.Models.ItemViewModel>
@using (Html.BeginForm())
{
    @Html.EditorForModel()
    <input type="submit" value="OK" />
}

そして最後にエディターテンプレート（~/Views/Home/EditorTemplates/ItemViewModel.cshtml）：

@model AppName.Models.ItemViewModel
// Those two hidden fields are just to persist the id and name
@Html.HiddenFor(x => x.Id)
@Html.HiddenFor(x => x.Name)
<div>
    @Html.CheckBoxFor(x => x.Checked)
    @Html.LabelFor(x => x.Checked, Model.Name)
</div>
45
Darin Dimitrov
public class MoreInfo
{
        public Int64 Id {get; set;}
        public string Name { get; set; }
        public bool Checkbox {get; set;}
}

コントローラーアクション：

public ActionResult Index(){
  var list = new List<MoreInfo>{
      new MoreInfo{Id = 1, Name = "Name1", Checkbox = false},
      new MoreInfo{Id = 2, Name = "Name2", Checkbox = false},
      new MoreInfo{Id = 3, Name = "Name3", Checkbox = true},
  };
  return View(list);
}

[HttpPost]
public ActionResult Index(List<MoreInfo> lists){

  return View(lists);
}

かみそりビュー：

@model List<MoreInfo>

<form action="" method="POST">
@for (var i = 0; i < Model.Count();i++ )
{
    @Html.HiddenFor(it => it[i].Id)
    @Html.TextBoxFor(it => it[i].Name)
    @Html.CheckBoxFor(it => it[i].Checkbox)
}
<input type="submit" />
</form>

詳細 ここ

21
Vitall

とても簡単です：
1。文字列IDとブール値でチェックボックスクラスを作成します。
2。チェックボックスのリストをコントローラーメソッドに名前を付けて配置します。
3。ビューに2つのフィールドを動的に作成しますが、かみそりエンジンの命名システムに準拠していることを確認してください。

動的チェックボックスリストを作成するには、かみそりエンジンの動作を理解する必要があります。このコードがあるとしましょう
ビューの先頭に次のようなモデルを含めます：

@model MyProject.Site.Models.MyWebModel

そのモデルには、次のように内部にブール値を持つ設定クラスがあります。

public class MyWebModel  
{  
    public HighchartsSettingModel Settings { get; set; }  
}  
public class HighchartsSettingModel  
{  
    public bool JoinSameType{ get; set; }  
}

そしてあなたが持っているビューでは：

@Html.CheckBoxFor(x => x.Settings.JoinSameType)

つまり、次のHTMLコードが作成されます。

<input data-val="true" data-val-required="The JoinSameType field is required." id="Settings_JoinSameType" name="Settings.JoinSameType" type="checkbox" value="true" />
<input name="Settings.JoinSameType" type="hidden" value="false" />

これまでのところ、これはフレームワークの一部であるCheckBoxForに適しています。どのように配列を操作すればよいでしょうか。

だから今私たちがする必要があるのは、コントローラメソッドでリストを操作する方法を理解することです、あなたがこのクラスを持っているとしましょう：

public class Checkbox{
   public string Id { get; set; }
   public bool Value { get; set; }
}

そしてコントローラーにはこれがあります：

public ActionResult SensorSearch(List<Checkbox> selectedSensors, string search, string subSearch, string page, string back)

ビューは次のようになります。

@{  
        int counter = 0;  
        string id_name, id_id, value_id, value_name;  
    }  
    @foreach (var item in Model.SensorList)  
    {  
        id_id = "selectedSensors_" + counter + "__Value";  
        id_name = "selectedSensors[" + counter + "].Value";  
        value_id = "selectedSensors_" + counter + "__Id";  
        value_name = "selectedSensors[" + counter + "].Id";  
        counter++; 


    <li><a href="#" style="padding-top: 0px;padding-bottom: 0px;padding-right: 42px;padding-left: 0px;">
        <label style="border-top-width: 0px;margin-top: 0px;border-bottom-width: 0px;margin-bottom: 0px;border-left-width: 0px;border-right-width: 0px;" data-corners="false">
            <fieldset data-role="controlgroup" >
                <input id="@id_id" name="@id_name" type="checkbox" value="true" />
                <input id="@value_id" name="@value_name" type="hidden" value="@item.Key" />                                
                <label for="@id_id" style="border-top-width: 0px;margin-top: 0px;border-bottom-width: 0px;margin-bottom: 0px;border-left-width: 0px;border-right-width: 0px;">
                    <label  style="padding:10px 0px 0px 10px;">
                        <h3>@item.Key</h3>
                        <p>User Name: @item.Value</p>
                    </label>
                </label>
            </fieldset>
        </label>
        </a><a href="#" rel="external"></a>
    </li>
}
</ul>

ビューのフォームを忘れないようにしましょう：

@using (Html.BeginForm("SensorSearch", "Home", Model.PageNav.StayRouteValues, FormMethod.Post, new Dictionary<string, object>() { { "data-ajax", "false" }, { "id", "sensor_search_form" } }))

これで、レンダリングされたページは、チェックボックスの側面では次のようになります。

<li><a href="#" style="padding-top: 0px;padding-bottom: 0px;padding-right: 42px;padding-left: 0px;">
<label style="border-top-width: 0px;margin-top: 0px;border-bottom-width: 0px;margin-bottom: 0px;border-left-width: 0px;border-right-width: 0px;" data-corners="false">
    <fieldset data-role="controlgroup" >
        <input id="selectedSensors_16__Value" name="selectedSensors[16].Value" type="checkbox" value="true" />
        <input id="selectedSensors_16__Id" name="selectedSensors[16].Id" type="hidden" value="10141" />                                
        <label for="selectedSensors_16__Value" style="border-top-width: 0px;margin-top: 0px;border-bottom-width: 0px;margin-bottom: 0px;border-left-width: 0px;border-right-width: 0px;">
            <label  style="padding:10px 0px 0px 10px;">
                <h3>10141</h3>
                <p>User Name: 10141_TEN-2MP</p>
            </label>
        </label>
    </fieldset>
</label>
</a><a href="#" rel="external"></a>
</li>

あなたが気づく必要があるのは、入力チェックボックスと入力非表示に与えられた名前で、カミソリエンジンが名前を作成する方法と同様に使用しました。送信後、エンジンはこれを配列としてレンダリングし、動的チェックボックスを作成できます。他の言語の場合と同じように、必要な場所にリストします（たとえば、phpなど）。

その簡単さ：その簡単さ：
1。文字列IDとブール値でチェックボックスクラスを作成します。
2。チェックボックスのリストをコントローラーメソッドに名前を付けて配置します。
3。ビューに2つのフィールドを動的に作成しますが、かみそりエンジンの命名システムに準拠していることを確認してください。

それが役に立てば幸いです。

1
Yakir Manor