MoreInfo のクラスがあります。
public class MoreInfo
{
public string Name { get; set; }
public string selectedCheckboxItems {get; set;}
}
ビューにチェックボックス リストを作成し、送信時にチェック済みの項目をコントローラーに渡す方法を知りたいです。
チェックボックスリストを作成し、チェックされたすべてのアイテムを渡して処理するにはどうすればよいですか?
モデルを少し変更しましょう。
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>
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>
詳細 はこちら
簡単です:
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>
注意する必要があるのは、input-checkbox と input-hidden に付けられた名前です。これは、かみそりエンジンが名前を作成する方法と同様に使用したため、送信後、エンジンはこれを配列としてレンダリングし、動的チェックボックスを作成できるようにします。他の言語と同じように、必要な場所をリストします（phpなど...）。
簡単です: 簡単です:
1. 文字列 ID とブール値を使用してチェックボックス クラスを作成します。
2.チェックボックスのリストをコントローラーメソッドに名前を付けて配置します。
3. ビューに 2 つのフィールドを動的に作成しますが、かみそりエンジンの命名システムに準拠していることを確認してください。
私はそれが助けになることを望みました。