Want to generate dynamic control with complete styling

22 Views Asked by At

Hi I want to have add more button on my page which can replicate the existing form as many times as i want as i click add more button just like what linkedin is doing for education and experience section.

I want dynamic controls with complete styling

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

it should generate the above complete code as many times as i click the button

0

There are 0 best solutions below