在 mvc 中动态创建控件答案

【问题标题】：creating controls dynamically in mvc在 mvc 中动态创建控件
【发布时间】：2013-12-20 18:59:15
【问题描述】：

我想根据源动态创建控件，如果类型 = 文本框，则创建文本框，如果是复选框，则在 MVC 中动态创建复选框。以下是我当前的代码

     @model PayTxn.Miscellaneous.Models.SurveyViewModel
        @using PayTxn.Miscellaneous.Models
 @{ int index = 0;}

            @for (int i = 0; i < Model.ControlsList.Length; i++)
            {

                var control = Model.ControlsList[i];

                if (control.Type == "radio")
                {

                    Html.RenderPartial("~/Views/Shared/EditorTemplates/_RadioBoxViewModel.cshtml", control as RadioBoxViewModel, new ViewDataDictionary { { "index", index } });

                }
                else if (control.Type == "checkbox")
                {
                    Html.RenderPartial("~/Views/Shared/EditorTemplates/_CheckBoxViewModel.cshtml", control as CheckBoxViewModel, new ViewDataDictionary { { "index", index } });
                }
                else if (control.Type == "textbox")
                {
                    Html.RenderPartial("~/Views/Shared/EditorTemplates/_TextBoxViewModel.cshtml", control as TextBoxViewModel, new ViewDataDictionary { { "index", index } });
                }
                else if (control.Type == "rattingbox")
                {
                    Html.RenderPartial("~/Views/Shared/EditorTemplates/_RattingBoxViewModel.cshtml", control as RattingBoxViewModel, new ViewDataDictionary { { "index", index } });
                }
                else if (control.Type == "slider")
                {
                    Html.RenderPartial("~/Views/Shared/EditorTemplates/_SliderViewModel.cshtml", control as SliderViewModel, new ViewDataDictionary { { "index", index } });
                }
                index = index + 1;
            }
    <input type="submit" name="action:Submit1" value="Submit1" />
            <input type="submit" name="action:Reset" value="Reset" />

它工作正常，但单击 submit1 按钮时，我的视图并未与模型紧密绑定型号代码是

  public class SurveyViewModel
{
    //public List<ControlViewModel> ControlsList { get; set; 
    public ControlViewModel[] ControlsList { get; set; }
}
public abstract class ControlViewModel
{
    public abstract string Type { get; }
    public bool Visible { get; set; }
    public string Label { get; set; }
    public string Name { get; set; }
}

public class TextBoxViewModel : ControlViewModel
{
    public override string Type
    {
        get { return "textbox"; }
    }
    public string Value { get; set; }
}

public class RadioBoxViewModel : ControlViewModel
{
    public List<string> Options { get; set; }
    public List<string> Values { get; set; }
    public override string Type
    {
        get { return "radio"; }
    }
}

public class CheckBoxViewModel : ControlViewModel
{
    public List<string> Options { get; set; }
    public List<string> Values { get; set; }
    public override string Type
    {
        get { return "checkbox"; }
    }
    public bool Value { get; set; }
}
public class SliderViewModel : ControlViewModel
{
    public override string Type
    {
        get { return "slider"; }
    }
    public string Value { get; set; }
}
public class RattingBoxViewModel : ControlViewModel
{
    public List<string> Titles { get; set; }
    public List<string> Rattings { get; set; }
    public string _rattingType = null;
    public string RattingType
    {
        get
        {
            if (string.IsNullOrEmpty(_rattingType))
                return "star";
            else
                return _rattingType;
        }

        set
        {
            _rattingType = value;
        }
    }
    public override string Type
    {
        get { return "rattingbox"; }
    }
    public bool Value { get; set; }
}

【问题讨论】：

为什么不使用if条件？
你的意思是在视图 (cshtml) 页面中可以完成，但我需要给它不同的外观感觉也请参阅示例 html
我尝试使用 [a link] stackoverflow.com/questions/6329461/… 它工作正常，但绑定不紧密，即当我点击提交按钮时，viewmodel 为空
从您发布的代码中，我看不出使用 if 条件不起作用的任何原因。使用 if 不能实现哪些外观和感觉？
@MattBodily 我使用了如果我面临的问题是将模型与视图紧密绑定，即在提交时我无法获取数据，而且我想知道如何对其应用验证 [链接] stackoverflow.com/questions/6329461/…

标签： html asp.net-mvc-4 razorgenerator razor-declarative-helpers

【解决方案1】：

if 条件不会给您带来任何额外的问题。它只是更改要在视图上显示的字段。验证和模型绑定不会改变

@if(condition1){
<h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry? </h2>
   <ul>
       <li>
           @Html.RadioButtonFor(x => x.r1, "1")
           <label for="r1">Single choice option 1</label>
       </li>
       <li>
           @Html.RadioButtonFor(x => x.r2, "2")
           <label for="r2">Single choice option 2</label>
       </li>
       <li>
           @Html.RadioButtonFor(x => x.r3, "3")
           <label for="r3">Single choice option 3</label>
       </li>
       <li>
           @Html.RadioButtonFor(x => x.r4, "4")
           <label for="r4">Single choice option 4</label>
       </li>
  </ul>
  }else if(condition2){
  <h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry?</h2>
  <ul>
      <li>
          @Html.CheckBoxFor(x => x.cb10)
          <label for="cb10">Multiple choice option 1</label>
      </li>
      <li>
          @Html.CheckBoxFor(x => x.cb11)
          <label for="cb11">Multiple choice option 2</label>
      </li>
      <li>
          @Html.CheckBoxFor(x => x.cb12)
          <label for="cb12">Multiple choice option 3</label>
      </li>
      <li>
          @Html.CheckBoxFor(x => x.cb13)
          <label for="cb13">Multiple choice option 4</label>
     </li>
 </ul>
 }

因此，如果满足条件 1，则只会在表单上呈现单选按钮。如果满足条件 2，则复选框

更新：

根据您更改的代码，这将很难与模型联系起来。我建议将名称放在您动态生成的字段上并执行

Request.Form["fieldName"].ToString()

例如，对于复选框列表，这将返回以逗号分隔的已检查 id 的列表（1、2、3 等）。祝你好运

【讨论】：

谢谢马特，我已经更新了上面的代码，请正确查看它的渲染，但视图与模型没有紧密绑定我在编写自定义模型活页夹时遇到问题。请在同一方面提出建议
我是否可以为此创建自定义数据活页夹
我真的不确定。

【解决方案2】：

嘿，我通过创建自定义模型绑定器解决了这个问题这是代码

    public class ControlModelBinder : DefaultModelBinder
     {
    protected override object CreateModel(ControllerContext controllerContext,             ModelBindingContext bindingContext, Type modelType)
    {
        var datalist = controllerContext.HttpContext.Request.Form.GetEnumerator();
        SurveyViewModel model = new SurveyViewModel();
        model.ControlsList = new List<ControlViewModel>();
        List<string> answers = new List<string>();
        while (datalist.MoveNext())
        {
            string currentKey = datalist.Current.ToString();
            if (currentKey.Contains("TextBoxViewModel"))
            {
                TextBoxViewModel textBoxViewModel = new TextBoxViewModel();
                textBoxViewModel.Value = controllerContext.HttpContext.Request.Form[currentKey];
                model.ControlsList.Add(textBoxViewModel);
            }
            else if (currentKey.Contains("CheckBoxViewModel"))
            {
                CheckBoxViewModel checkboxviewmodel = new CheckBoxViewModel();
                checkboxviewmodel.SelectedValues = controllerContext.HttpContext.Request.Form[currentKey];
                model.ControlsList.Add(checkboxviewmodel);
            }
            else if (currentKey.Contains("RadioBoxViewModel"))
            {
                RadioBoxViewModel radioboxviewmodel = new RadioBoxViewModel();
                radioboxviewmodel.SelectedValue = controllerContext.HttpContext.Request.Form[currentKey];
                model.ControlsList.Add(radioboxviewmodel);
            }
            else if (currentKey.Contains("RattingBoxViewModel"))
            {
                RattingBoxViewModel rattingboxviewmodel = new RattingBoxViewModel();
                rattingboxviewmodel.Score = controllerContext.HttpContext.Request.Form[currentKey];
                model.ControlsList.Add(rattingboxviewmodel);
            }
            else if (currentKey.Contains("SliderViewModel"))
            {
                SliderViewModel sliderviewmodel = new SliderViewModel();
                sliderviewmodel.Value = controllerContext.HttpContext.Request.Form[currentKey];
                model.ControlsList.Add(sliderviewmodel);
            }
        }
        return model;
    }

}

【讨论】：