IEnumerableごとにRadioButtonのリストを含むビューを取得するモデルが定義されています。
そのモデル内で、選択したアイテムに基づいて変化するチェックボックスのリストを表示したいと思います。最後に、ユーザーが使用可能なチェックボックスから選択すると、同じビューにTextareaが表示され、選択されたチェックボックスに基づいて動的なテキストが表示されます。最終的には、階層ごとのテーブルになります。
レイアウトは、RadioButtonListが最初のテーブルセルにあり、CheckBoxListが中央のテーブルセルにあり、Textareaが右側のテーブルセルにあるようなものです。
誰かがこの結果を達成するために私のモデルビューがどうあるべきかについて私を導くことができれば、私は最も喜ぶでしょう...
これが私のコードです:
//
// View Model for implementing radio button list
public class RadioButtonViewModel
{
// objects
public List<RadioButtonItem> RadioButtonList { get; set; }
public string SelectedRadioButton { get; set; }
}
//
// Object for handling each radio button
public class RadioButtonItem
{
// this object
public string Name { get; set; }
public bool Selected { get; set; }
public int ObjectId { get; set; }
// columns
public virtual IEnumerable<CheckBoxItem> CheckBoxItems { get; set; }
}
//
// Object for handling each checkbox
public class CheckBoxViewModel
{
public List<CheckBoxItem> CheckBoxList { get; set; }
}
//
// Object for handling each check box
public class CheckBoxItem
{
public string Name { get; set; }
public bool Selected { get; set; }
public int ObjectId { get; set; }
public virtual RadioButtonItem RadioButtonItem { get; set; }
}
とビュー
@model IEnumerable<EF_Utility.Models.RadioButtonItem>
@{
ViewBag.Title = "Connect";
ViewBag.Selected = Request["name"] != null ? Request["name"].ToString() : "";
}
@using (Html.BeginForm("Objects" , "Home", FormMethod.Post) ){
@Html.ValidationSummary(true)
<table>
<tbody>
<tr>
<td style="border: 1px solid grey; vertical-align:top;">
<table>
<tbody>
<tr>
<th style="text-align:left; width: 50px;">Select</th>
<th style="text-align:left;">View or Table Name</th>
</tr>
@{
foreach (EF_Utility.Models.RadioButtonItem item in @Model )
{
<tr>
<td>
@Html.RadioButton("RadioButtonViewModel.SelectedRadioButton",
item.Name,
ViewBag.Selected == item.Name ? true : item.Selected,
new { @onclick = "this.form.action='/Home/Connect?name=" + item.Name + "'; this.form.submit(); " })
</td>
<td>
@Html.DisplayFor(i => item.Name)
</td>
</tr>
}
}
</tbody>
</table>
</td>
<td style="border: 1px solid grey; width: 220px; vertical-align:top; @(ViewBag.Selected == "" ? "display:none;" : "")">
<table>
<tbody>
<tr>
<th>Column
</th>
</tr>
<tr>
<td><!-- checkboxes will go here -->
</td>
</tr>
</tbody>
</table>
</td>
<td style="border: 1px solid grey; vertical-align:top; @(ViewBag.Selected == "" ? "display:none;" : "")">
<textarea name="output" id="output" rows="24" cols="48"></textarea>
</td>
</tr>
</tbody>
</table>
}
および関連するコントローラー
public ActionResult Connect()
{
/* TEST SESSION FIRST*/
if( Session["connstr"] == null)
return RedirectToAction("Index");
else
{
ViewBag.Message = "";
ViewBag.ConnectionString = Server.UrlDecode( Session["connstr"].ToString() );
ViewBag.Server = ParseConnectionString( ViewBag.ConnectionString, "Data Source" );
ViewBag.Database = ParseConnectionString( ViewBag.ConnectionString, "Initial Catalog" );
using( var db = new SysDbContext(ViewBag.ConnectionString))
{
var objects = db.Set<SqlObject>().ToArray();
var model = objects
.Select( o => new RadioButtonItem { Name = o.Name, Selected = false, ObjectId = o.Object_Id, CheckBoxItems = Enumerable.Empty<EF_Utility.Models.CheckBoxItem>() } )
.OrderBy( rb => rb.Name );
return View( model );
}
}
}
私が見逃しているのは、データコンテキストを前面に出すConnect()メソッドのコードです。その時点で、ビューのHTMLを設定するのはかなり簡単なはずです。
編集**したがって、CheckBoxListが空のセットにならないことを除いて、RadioButtonItemを次のようなビューにバインドする必要があります。
//
// POST: /Home/Connect/
[HttpPost]
public ActionResult Connect( RadioButtonItem rbl )
{
/* TEST SESSION FIRST*/
if ( Session["connstr"] == null )
return RedirectToAction( "Index" );
else
{
ViewBag.Message = "";
ViewBag.ConnectionString = Server.UrlDecode( Session["connstr"].ToString() );
ViewBag.Server = ParseConnectionString( ViewBag.ConnectionString, "Data Source" );
ViewBag.Database = ParseConnectionString( ViewBag.ConnectionString, "Initial Catalog" );
using ( var db = new SysDbContext( ViewBag.ConnectionString ) )
{
var objects = db.Set<SqlObject>().ToArray();
var model = objects
.Select( o => new RadioButtonItem { Name = o.Name, Selected = false, ObjectId = o.Object_Id, CheckBoxItems = Enumerable.Empty<EF_Utility.Models.CheckBoxItem>() } )
.OrderBy( rb => rb.Name );
return View( model );
}
}
}