在mvc中動態創建控件

Question

我想根據源動態地在視圖中創建控件，如果type = text box，則創建文本框；如果是，則在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; }
}

Answer 1

如果有條件，不會給您帶來任何其他問題。 它只是更改要在視圖上顯示的字段。 驗證和與模型的綁定不會改變

@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等）。 祝好運

Answer 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;
    }

}