Dynamic Add Row to MVC View, затем перейти к контроллеру

Question

Хорошо, поэтому я пробовал массу вещей, с которыми я не знаком, и я не могу точно понять, как это сделать. Мне нужно сделать. Это похоже на простую задачу, и я уверен, что кто-то это сделал!

В сущности, мне нужно создать форму, которая имеет возможность создавать больше полей, которые будут привязываться к модели, или даже просто перейти к контроллеру на submit.

Во-первых, у меня есть модель, которая довольно проста. Что-то вроде:

public class Account 
{ 
    public string Organization { get; set; } 
    public List<UserModel> Users { get; set; } 
} 
public class UserModel 
{ 
    public string UserFirstName { get; set; } 
    public string UserLastName { get; set; } 
    public string UserEmailAddress { get; set; } 
    public bool UserIsAdmin { get; set; } 
} 

Мой взгляд простая регистрационная форма, которая принимает все входные данные, необходимые для создания учетной записи. Он должен иметь эти поля, но также иметь ссылку, которая говорит «добавить пользователя» и ajax в другой строке с именем, фамилией, адресом электронной почты и значком isAdmin.

Здесь я застреваю. Я думаю, что мне нужно что-то с частичным представлением и пользовательской привязкой к контроллеру, когда данные передаются, но я не могу понять, как передать объект, содержащий всех пользователей, чтобы я мог проходить через него.

Если бы кто-нибудь мог даже пункт меня в правильном направлении, я был бы очень доволен.

-Lost

Answer 1

Я очень рекомендую прочитать Phil Haacked - Model Binding to a List. Его пример можно было легко расширить, чтобы использовать Ajax.

Answer 2

Вы можете просто создать модель в формате JSON и отправить его в контроллер:

JS:

var account = { 
    Organization: // get from form or wherever 
    Users: [] 
} 

$('#submit').click(function() { 

    // loop through each new user div and append to the account object 
    $('.new-user').each(function() { 
     var $newUser = $(this); 
     Account.Users.push({ 
      UserFirstName: $newUser.find('.first-name').val(), 
      UserLastName: $newUser.find('.last-name').val(), 
      ... 
     }); 
    }); 

    // ajax call to submit form with data: { Account: account } 
}); 

HTML

<form ...> 
    <!-- registration fields --> 

    <!-- dynamically added new user fields - wrap in parent element --> 
    <div class="new-user"> 
     <input class="first-name" type="text" /> 
     <input class="last-name" type="text" /> 
     ... 
    </div> 

    <input type="button" id="submit" value="Submit" /> 
</form>