Html 在mvc中动态创建控件_Html_Asp.net Mvc 4_Razorgenerator_Razor Declarative Helpers

Html 在mvc中动态创建控件

html asp.net-mvc-4

Html 在mvc中动态创建控件,html,asp.net-mvc-4,razorgenerator,razor-declarative-helpers,Html,Asp.net Mvc 4,Razorgenerator,Razor Declarative Helpers,我想根据源动态创建视图中的控件，如果类型=文本框，则创建文本框如果为复选框，则在MVC中动态创建复选框。下面是我目前的代码 @model PayTxn.Miscellaneous.Models.SurveyViewModel @using PayTxn.Miscellaneous.Models @{ int index = 0;} @for (int i = 0; i < Model.ControlsList.Length; i++)

我想根据源动态创建视图中的控件，如果类型=文本框，则创建文本框如果为复选框，则在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" />

@model PayTxn.misscellaneous.Models.SurveyViewModel
@使用PayTxn.Miscellaneous.Models
@{int index=0；}
@for（int i=0；i


它工作得很好，但单击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; }
}

公共类调查视图模型
{
//公共列表控件列表{get；set；
公共控制视图模型[]控制列表{get；set；}
}
公共抽象类ControlViewModel
{
公共抽象字符串类型{get；}
公共布尔可见{get；set；}
公共字符串标签{get；set；}
公共字符串名称{get；set；}
}
公共类TextBoxViewModel:ControlViewModel
{
公共重写字符串类型
{
获取{return“textbox”；}
}
公共字符串值{get；set；}
}
公共类RadioBoxViewModel:ControlViewModel
{
公共列表选项{get；set；}
公共列表值{get；set；}
公共重写字符串类型
{
获取{return“radio”；}
}
}
公共类CheckBoxViewModel:ControlViewModel
{
公共列表选项{get；set；}
公共列表值{get；set；}
公共重写字符串类型
{
获取{返回“复选框”；}
}
公共布尔值{get；set；}
}
公共类SliderViewModel:ControlViewModel
{
公共重写字符串类型
{
获取{返回“滑块”；}
}
公共字符串值{get；set；}
}
公共类RattingBoxViewModel:ControlViewModel
{
公共列表标题{get；set；}
公共列表标记{get；set；}
公共字符串_rattingType=null；
公共字符串RatingType
{
得到
{
if（string.IsNullOrEmpty（_RatingType））
返回“星”；
其他的
返回_RatingType；
}
设置
{
_rattingType=值；
}
}
公共重写字符串类型
{
获取{返回“rattingbox”；}
}
公共布尔值{get；set；}
}
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>
 }

例如，对于复选框列表，这将返回一个逗号分隔的已选中id列表（1、2、3等）。祝您好运，我通过创建自定义模型绑定器解决了此问题
这是代码
    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;
    }

}

公共类ControlModelBinder:DefaultModelBinder
{
受保护的重写对象CreateModel（ControllerContext ControllerContext，ModelBindingContext bindingContext，Type modelType）
{
var datalist=controllerContext.HttpContext.Request.Form.GetEnumerator（）；
SurveyView模型=新SurveyView模型（）；
model.ControlsList=新列表（）；
列表答案=新列表（）；
while（datalist.MoveNext（））
{
string currentKey=datalist.Current.ToString（）；
if（currentKey.Contains（“TextBoxViewModel”））
{
TextBoxViewModel TextBoxViewModel=新的TextBoxViewModel（）；
textBoxViewModel.Value=controllerContext.HttpContext.Request.Form[currentKey]；
model.ControlsList.Add（textBoxViewModel）；
}
else if（currentKey.Contains（“CheckBoxViewModel”））
{
CheckBoxViewModel CheckBoxViewModel=新的CheckBoxViewModel（）；
checkboxviewmodel.SelectedValues=controllerContext.HttpContext.Request.Form[currentKey]；
model.ControlsList.Add（checkboxviewmodel）；
}
else if（currentKey.Contains（“RadioBoxViewModel”））
{
RadioBoxViewModel RadioBoxViewModel=新RadioBoxViewModel（）；
radioboxviewmodel.SelectedValue=controllerContext.HttpContext.Request.Form[currentKey]；
model.ControlsList.Add（radioboxviewmodel）；
}
else if（currentKey.Contains（“RattingBoxViewModel”））
{
RattingBoxViewModel RattingBoxViewModel=新RattingBoxViewModel（）；
rattingboxviewmodel.Score=controllerContext.HttpContext.Request.Form[currentKey]；
model.ControlsList.Add（rattingboxviewmodel）；
}
else if（currentKey.Contains（“SliderViewModel”））
    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;
    }

}