Malikdanish Ответов: 1

Как создать полную форму с помощью кнопки добавить еще

Привет у меня есть раздел профиля сотрудника так же , как linkedIN , где они просят пользователя ввести образование, я также хочу дать одну кнопку, чтобы позволить пользователю добавить любое количество образования, как он хочет, просто нажмите на кнопку, чтобы создать ту же форму снова, и пользователь может ввести несколько записей об образовании.
Есть ли какой-нибудь связанный пример, любезно поделитесь им, чтобы я мог проверить его ! Я видел, как создать динамический элемент управления, но я ищу метод, есть ли какой-либо доступный ресурс, который показывает все Создание формы, а не создание элемента управления один за другим, а также Как сохранить их с помощью .net MVC в качестве связующего модели, не используя javascript.
спасибо

Что я уже пробовал:

Я попытался создать новый элемент управления во время выполнения, но я ищу, чтобы создать полный div все элементы внутри этого div с тем же дизайном .
спасибо

1 Ответов

Рейтинг:
0

dnxit

Я могу дать вам некоторое представление о том, как я достиг аналогичного требования с помощью серверных постбэков, чтобы заставить основные детали работать

модель представления

public class ProfileViewModel 
{
  public string Name {get;set;}
  public List<Education> EducationList {get;set;}
}

Контроллер
[HttpGet]
public async Task<ActionResult> AddProfile()
{
  return View(new ProfileViewModel());
}

[HttpPost]
public async Task<ActionResult> AddProfile(ProfileViewModel viewModel)
{
   // stuff to save in db
}

[HttpPost]
public async Task<ActionResult> AddEducation(ProfileViewModel viewModel)
{
    // So here you add new items in the list send it back to Add Profile View
    // there you can render the list of Education 

    viewModel.EducationList.Add(new Education(){});   

    return View("AddProfile", viewModel);
}

Смотреть 
@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "yourform" }))
{
  @Html.EditorFor(model => model.Name, new { htmlAttributes=new { @class="control" }})
  <input type="button" value="Add Education" id="@("add_education")" />
  <table>
    @for (int i = 0; i < options.Count(); i++)

    {

      <tr>
       <td>@Html.EditorFor(model => options[i].DegreeName ,null,"DegreeName")</td>
       <td>@Html.EditorFor(model => options[i].YearCompleted ,null, "YearCompleted")</td>
       </tr>
    }
  </table>
  <input type="button" value="Add Profile" id="@("add_profile")" />
}

Скрипты
$(document).ready(function () {
    $("#@("add_education")").click(function (e) {
       $("#yourformId").attr("action", '@Url.Action("AddEducation", "UserProfile")');
       $("#yourformId").submit();
    });
    $("#@("add_profile")").click(function (e) {
       $("#yourformId").attr("action", '@Url.Action("AddProfile", "UserProfile")');
       $("#yourformId").submit();
    });
});


Таким образом, основная идея состоит в том, чтобы вернуться к отдельному действию на кнопке Добавить образование, но вернуть ту же самую viewModel после добавления еще одной записи в список и вернуться к добавлению представления профиля с обновленной viewModel

Malikdanish

можете ли вы поделиться запущенным образцом кода , я создал динамические элементы управления , но прямо сейчас я не могу отправить все значения формы контроллеру, как это сделать, мой входной элемент управления имеет эту отметку