在MVC4中动态添加控件

时间:2015-06-15 10:24:34

标签: asp.net-mvc asp.net-mvc-4

我目前正致力于创建一个MVC4应用程序,我希望从数据库行自动生成控件。

我的数据库中有表格,其中包含用户应该回答的问题和控件类型。

我只想到像

这样的逻辑
  1. 我可以在数据集中获取数据库行然后预测它,然后检查它所属的控件类型,然后在我的视图中创建控件。
  2. 这是我的控制器操作:

    Public ActionResult Index()
    {
        // get the rows from the table 
        foreach(Iterate the rows)
        {
            if(controllerType1)
            {
                //stmnts
            }
    
            if(controllerType2)
            {
                //stmnts
            }       
        }
        return View();
    }
    

    这只是我们如何构建解决方案的想法。如果我以正确的方式前进,请指导我,否则我很想知道我可以用不同方式构建我的解决方案的可能性:)。

1 个答案:

答案 0 :(得分:2)

您可以创建编辑器模板并将控制列表作为模型传递给模板,在模板中可以迭代该列表以生成控件。正如我在下面所示。

1->为控制信息创建一个类。

public class ControlInfo
    {
        public string ControlType { get; set; }
        public string ControlID { get; set; }
        public string ControlName { get; set; }
        public string ControlValue { get; set; }
        public string ControlLabel { get; set; }
        public bool IsChecked { get; set; }
    }

2->在\ Views \ Shared \ EditorTemplates路径中创建一个编辑器模板(控件名称为CustomControl.cshtml的局部视图)。

   @model List<MvcApplication2.Models.ControlInfo>
    <table>

        @foreach (MvcApplication2.Models.ControlInfo ControlInfo in Model)
        {
            <tr>
                <td>@ControlInfo.ControlLabel</td>
                <td>
                @switch (ControlInfo.ControlType.ToLower())
                {
                    case "textbox":

                        <input type="text" name="@ControlInfo.ControlName" id="@ControlInfo.ControlID" value="@ControlInfo.ControlValue" />
                        break;
                    case "checkbox":
                        if (ControlInfo.IsChecked)
                        {
                            <input type="checkbox" name="@ControlInfo.ControlName" id="@ControlInfo.ControlID" value="@ControlInfo.ControlValue" checked="checked" />
                        }
                        else
                        {
                            <input type="checkbox" name="@ControlInfo.ControlName" id="@ControlInfo.ControlID" value="@ControlInfo.ControlValue" checked="checked" />
                        }

                        break;
                    default:
                        break;
                }
                </td>

            </tr>
        }

    </table>

3-&gt;为主视图创建模型(比如HomeModel)。

 public class HomeModel
    {
        public List<ControlInfo> ControlList { get; set; }

        public void PolulateControlList()
        {
            //You can fill this list from database. 
            // For example i have filled the list manually.
            ControlList = new List<ControlInfo>();
            ControlList.Add(new ControlInfo() {ControlType="TextBox",ControlName="tbox1", ControlID="tbox1", ControlLabel="Name",  ControlValue="Martin"   });

            ControlList.Add(new ControlInfo() { ControlType = "CheckBox", ControlName = "cbox1", ControlID = "cbox1", ControlLabel="Is Correct", ControlValue = "Yes", IsChecked=true });
        }
    }

4-&gt;在主视图中将编辑器模板用作。

 @model  MvcApplication2.Models.HomeModel    
    @{
        ViewBag.Title = "Home Page";
    }

    @Html.EditorFor(model=>model.ControlList,"CustomControl")

5→调用控制器中的主视图(此处为索引)。

public ActionResult Index()
        {
            HomeModel ModelObj = new HomeModel();
            ModelObj.PolulateControlList();
            return View(ModelObj);
        }

编辑1: 要获取发布的值,您需要修改编辑器模板,如下所示。名称等于作为名称值集合发布的控件名称的模型属性将由mvc框架工作的模型绑定器自动绑定,因此对于控件集合中的每个属性,我创建了隐藏标记和一个输入标记输入值。

@model List<MvcApplication2.Models.ControlInfo>
<table>
    @{ var index = -1;}
    @foreach (MvcApplication2.Models.ControlInfo ControlInfo in Model)
    {
        index++;
        <tr>
            <td>@ControlInfo.ControlLabel</td>
            <td>
                <input type="hidden" name="@("ControlList[" + index + "].ControlID")" value="@ControlInfo.ControlID" />
                <input type="hidden" name="@("ControlList[" + index + "].ControlLabel")" value="@ControlInfo.ControlLabel" />
                <input type="hidden" name="@("ControlList[" + index + "].ControlName")" value="@ControlInfo.ControlName" />
                <input type="hidden" name="@("ControlList[" + index + "].ControlType")" value="@ControlInfo.ControlType" />

                @switch (ControlInfo.ControlType.ToLower())
                {
                    case "textbox":

                        <input type="text" name="@("ControlList["+index+"].ControlValue")" id="@ControlInfo.ControlID" value="@ControlInfo.ControlValue" />
                        break;
                    case "checkbox":
                         <input type="hidden" name="@("ControlList[" + index + "].ControlValue")" value="@ControlInfo.ControlValue" />
                        if (ControlInfo.IsChecked)
                        {
                            <input type="checkbox" name="@("ControlList[" + index + "].IsChecked")" id="@ControlInfo.ControlID" value="true" checked="checked" />
                        }
                        else
                        {
                            <input type="checkbox" name="@("ControlList[" + index + "].IsChecked")" id="@ControlInfo.ControlID" value="true" />
                        }

                        break;
                    default:
                        break;
                }
            </td>

        </tr>
    }

</table>

在主视图中你需要有表格

@model  MvcApplication2.Models.HomeModel

@{
    ViewBag.Title = "Home Page";
}

@using(Html.BeginForm()){

@Html.EditorFor(model=>model.ControlList,"CustomControl")

 <input type="submit" name="name" value="Submit" />
}

在控制器中你需要有相应的post方法

 [HttpPost]
        public ActionResult Index(HomeModel ModelObj)
        {
          // Your logic..........
            return View(ModelObj);
        }

此ModelObj将具有已发布的值。