Связывание динамический список текстовых полей в Список модели строк

Question

У меня есть модель представления, которая содержит одно свойство:

public List<string> TeamNames = new List<string>();

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

Мой вопрос: как связать эти динамические текстовые поля с моим списком в моей модели просмотра?

Answer 1

Во-первых, создайте скрытый ввод формы. Затем используйте JQuery для создания этих текстовых полей. В конце концов, просто сериализуйте данные в этом скрытом поле, получая данные. Наконец, просто десериализуйте его на стороне сервера и делайте все, что хотите.

Например при загрузке

that.onLoad = function() { 
    var listString = that.hidden.value; 
    that.list = $.parseJSON(listString); 
} 

на представить:

function updateHidden() { 
    that.hidden.value = JSON.stringify(that.list); 
} 

Answer 2

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

контроллер:

public class TestController : Controller 
{ 
    // GET: Test 
    public ActionResult Index() 
    { 
     return View(); 
    } 

    [HttpGet] 
    public ActionResult AddTeams() 
    { 
     // you do not need to pass anything if you list is empty 
     return View(); 
    } 

    [HttpPost] 
    public ActionResult AddTeams(List<string> teamNames) 
    { 
     // do whatever you want with your teamnames 

     return RedirectToAction("Index"); 
    } 
} 

вид:

@using (Html.BeginForm("AddTeams", "Test", FormMethod.Post)) 
{ 
    <table id="teams-list"> 
     <tr> 
      <td>Team name:</td> 
      <td><input type="text" name="teamNames[0]" /></td> 
     </tr> 
    </table> 

    <button type="button" id="add-btn">Add one more team</button> 

    <br/> 

    <button type="submit">submit</button> 
} 

<script> 
    $('#add-btn').on('click', function() { 
     var currentTeamCount = $('#teams-list tr').length; 

     $('#teams-list tr:last').after('<tr><td>Team name:</td><td><input type="text" name="teamNames[' + currentTeamCount + ']" /></td></tr>'); 
    }); 
</script>