在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

嘿，我通過創建自定義的模型綁定 這裏解決了這個問題是代碼

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

} 

Answer 2

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