Заполнение формы динамически на основе пользовательского ввода в ASP.Net MVC

Question

Мой вопрос похож на Энграма здесь , но мой вопрос идет немного дальше. Я намерен работать так: у меня есть текстовое поле, спрашивающее, сколько записей собирается сделать пользователь. После того, как они вводят число, мне нужно создать еще столько текстовых полей, чтобы разрешить ввод записей (и затем повторить тот же процесс с этими текстовыми полями, но сначала пошаговые шаги ...) Я попытался собрать ключи в сообщении, но он только возвращает начальное текстовое поле с просьбой указать количество записей. Я все еще пытаюсь понять MVC, и учебники / видео до сих пор не углубляются в это глубоко. С другой стороны, я знаю, что это, вероятно, что-то, что я мог бы обработать, используя JQuery, но я все еще застрял бы в той же ситуации.

Это контроллер, который я использую:

[AcceptVerbsAttribute("POST")]
    public ActionResult Create(int tbxNumberOfExercises)
    {
        ViewData["number"] = tbxNumberOfExercises;
        foreach (var key in Request.Form.Keys)
        {
            string keyString = key.ToString();
            if (keyString.StartsWith("tbox_exercise", StringComparison.OrdinalIgnoreCase))
            {
                string recNum = keyString.Substring(13, keyString.Length - 13);
                string approvedKey = Request.Form["tbox_exercise" + recNum];
                int number;
                int.TryParse(approvedKey, out number);
            }
        }
        return View("Create");
    }

А это мой aspx:

<form action="/CreateWorkout/Create" method="post">
Number of Exercises:
<%= Html.TextBox("tbxNumberOfExercises") %>
<br />
<br />
<input type="submit" value="Set Exercise Number" />
</form>
<% if (ViewData["number"] != null)%>
There are this many:<%=Html.Encode(ViewData["number"])%>
<br />
and this line should show up
<% if (ViewData["number"] != null)
   {
       int max = (int)ViewData["number"];

       for (int i = 0; i < max; i++)
       {%>
          <br />
          <br />
          <%= Html.TextBox("tbox_exercise" + i) %>
    <% }
   } %>
<% if (ViewData["s"] != null) %>
<%=Html.Encode(ViewData["s"]) %>

Есть ли что-то, что я упускаю из виду, не понимаю, или я должен бросить, пока я нахожусь, потому что кажется, что я никогда не получу это?

Заранее спасибо за любую помощь - я просто стараюсь учиться как можно больше.

Answer 1

Я бы разбил это на несколько этапов, вам нужно будет добавить представление «Сохранить» где-нибудь в зависимости от того, что вы хотите.

Scott

<form action="/Demo01/Create" method="post">
Number of Exercises:
<%= Html.TextBox("tbxNumberOfExercises") %>
<br />
<br />
<input type="submit" value="Set Exercise Number" />
</form>
<% if (ViewData["number"] != null) {%>
<form action="/Demo01/Save" method="post">
There are this many:<%=Html.Encode(ViewData["number"])%>
<br />
and this line should show up
<% if (ViewData["number"] != null) {
       int max = (int)ViewData["number"];

       for (int i = 0; i < max; i++) {%>
<br />
<br />
<%= Html.TextBox("tbox_exercise" + i) %>
<% }
   } %>
<% if (ViewData["s"] != null) %>
<%=Html.Encode(ViewData["s"]) %>
<input type="submit" value="Save Exercises" />
<% } %>
</form>

А потом в вашем контроллере что-то вроде этого:

public class Demo01Controller : Controller {
    public ActionResult Create() {
        return View();
    }

    [AcceptVerbsAttribute("POST")]
    public ActionResult Create(int tbxNumberOfExercises) {
        ViewData["number"] = tbxNumberOfExercises;
        return View("Create");
    }

    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult Save() {
        foreach (var key in Request.Form.Keys) {
            string keyString = key.ToString();
            if (keyString.StartsWith("tbox_exercise", StringComparison.OrdinalIgnoreCase)) {
                string recNum = keyString.Substring(13, keyString.Length - 13);
                string approvedKey = Request.Form["tbox_exercise" + recNum];
                int number;
                int.TryParse(approvedKey, out number);
            }
        }
        return View(); // return/redirect to wherever you want
    }
}

Answer 2

Я хотел бы рассмотреть возможность добавления текстовых полей на стороне клиента через javascript, а не отправлять их обратно на сервер, чтобы перерисовать форму, предполагая, что вы можете использовать javascript в качестве требования для использования приложения. Если нет, то подход @ Скотта должен работать. Я бы предпочел, чтобы метод Save принял параметр FormCollection, а не работал с объектом Request напрямую.

Решением javascript было бы наличие одного текстового поля и кнопки для добавления другого. Пользователь может продолжать добавлять текстовые поля, пока их не будет достаточно.

Answer 3

Проблема в том, что ваш </form> конечный тег должен находиться в конце вашего представления.

Попробуйте это модифицированное представление:

<form action="/CreateWorkout/Create" method="post">
Number of Exercises:
<%= Html.TextBox("tbxNumberOfExercises") %>
<br />
<br />
<input type="submit" value="Set Exercise Number" />
<% if (ViewData["number"] != null)%>
There are this many:<%=Html.Encode(ViewData["number"])%>
<br />
and this line should show up
<% if (ViewData["number"] != null)
   {
       int max = (int)ViewData["number"];

       for (int i = 0; i < max; i++)
       {%>
          <br />
          <br />
          <%= Html.TextBox("tbox_exercise" + i) %>
    <% }
   } %>
<% if (ViewData["s"] != null) %>
<%=Html.Encode(ViewData["s"]) %>
</form>

Я бы порекомендовал подход Скотта в качестве наилучшей практики. Этот ответ о том, как заставить ваш точный сценарий работать.

Answer 4

Спасибо за помощь, ребята. Я понял в 5 часов утра, что моя проблема в том, что форма не содержит новые текстовые поля / мне нужна была другая форма. Мне придется серьезно изучить Javascript и фактически изменить DOM, так как было бы лучше оставить его на стороне клиента.

Большое спасибо.