asp.net-mvc - 想要生成具有完整样式的动态控制

Question

嗨，我想在我的页面上添加更多按钮，当我单击添加更多按钮时，可以根据需要多次复制现有表单，就像linkedin 为教育和体验部分所做的那样。

我想要具有完整样式的动态控件

<div class="form-horizontal" style="    border: 1px solid #c6c7cc;
    border-radius: 5px;
    font: 14px/1.4 " helvetica="" neue",="" helvetica,="" arial,="" sans-serif;="" overflow:="" hidden;="" width:="" 840px;="" padding:="" 10px;="" background-color:="" white;"="">
        <div class="row">

            <div class="col-lg-12">
                <h4 style="background-color:cornflowerblue; padding:5px;">Educational information</h4>
            </div>
        </div>
        <div style="margin:10px;">
            <div class="row">
                <div class="col">

                    @Html.EditorFor(model => model.educations.Degree_Title, new { htmlAttributes = new { placeholder = "Enter Degree Title ", @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.educations.Degree_Title, "", new { @class = "text-danger" })

                </div>
                <div class="col">

                    @Html.EditorFor(model => model.educations.School, new { htmlAttributes = new { placeholder = "Enter School Name", @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.educations.School, "", new { @class = "text-danger" })

                </div>
            </div>
        </div>
        <div style="margin:10px;">
            <div class="row">
                <div class="col">

                    @Html.EditorFor(model => model.educations.Field_of_study, new { htmlAttributes = new { placeholder = "Enter Field of Study", @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.educations.Field_of_study, "", new { @class = "text-danger" })

                </div>
                <div class="col">

                    @Html.EditorFor(model => model.educations.Description, new { htmlAttributes = new { placeholder = "Enter Course/Degree Detail", @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.educations.Description, "", new { @class = "text-danger" })

                </div>
            </div>
        </div>

<div style="margin:10px;">
            <div class="row">
                <div class="col">

                    @Html.DropDownListFor(model=>model.educations.Grade, new List<SelectListItem>
  {
      new SelectListItem{ Text="Select Grade", Value = "1" },
      new SelectListItem{ Text="A", Value = "2" },
      new SelectListItem{ Text="B", Value = "3" },
           new SelectListItem{ Text="C", Value = "4" },
                new SelectListItem{ Text="D", Value = "5" },
                     new SelectListItem{ Text="E", Value = "6" },

   }, new { @class = "btn form-text" })
                    @Html.ValidationMessageFor(model => model.educations.Grade, "", new { @class = "text-danger" })

                    <div class="col-sm-4">
                        @Html.EditorFor(model => model.educations.Start_Year, new { htmlAttributes = new { placeholder = "Enter Start Date", @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.educations.Start_Year, "", new { @class = "text-danger" })

                    </div>
                    <div class="col-sm-4">
                        @Html.EditorFor(model => model.educations.End_Year, new { htmlAttributes = new { placeholder = "Enter End Date", @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.educations.End_Year, "", new { @class = "text-danger" })

                    </div>

                    <div class="col">


                        <label for="switch17">Active</label>
                        @Html.CheckBoxFor(m => m.educations.isFinalDegree, new { id = "switch17", name = "switch17", @class = "css-checkbox9 all_check" })

                    </div>

                </div>



            </div>
        </div>

    </div>

它应该像我点击按钮一样多次生成上述完整代码

标签： asp.net-mvcdynamic-controls