在 ASP.Net MVC 中根据用户输入动态填充表单

Question

我的问题类似于 Engram 的 here，但我的问题更进一步。我打算让它工作的方式是我有一个文本框询问用户要输入多少条目。在他们输入数字后，我需要创建更多的文本框以允许输入（然后对这些文本框重复相同的过程，但首先是婴儿步骤......）我尝试收集帖子上的密钥，但它只返回初始文本框询问条目数。我仍在尝试掌握 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

我会分阶段进行分解，您需要根据需要在某处添加“保存”视图。

斯科特

<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 作为使用应用程序的要求。如果没有，那么@Scott 的方法应该有效。作为一个偏好问题，我可能会让 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>

就最佳实践而言，我会推荐 Scott 的方法。这个答案是关于让您的确切方案发挥作用。

Answer 4

感谢各位的帮助。我今天早上 5 点意识到我的问题是表单不包含新的文本框/我需要另一个表单。我将不得不认真研究 Javascript 并实际修改 DOM，因为将其保留在客户端会更好。

非常感谢。