我定义了一个模型,它可以根据 IEnumerable 为我提供一个带有 RadioButtons 列表的视图。
在该模型中,我想显示一个复选框列表,这些复选框将根据所选项目而有所不同。最后,一旦用户从可用的复选框中进行选择,同一视图中将出现一个 Textarea,其中包含一些基于所选复选框的动态文本。我们最终应该得到一个 Table-per-hierarchy。
布局使得 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 应该相当简单。
编辑**所以我需要将 RadioButtonItem 绑定到视图,如下所示,除了我的 CheckBoxList 不会是空集。
//
// 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 );
}
}
}