ASP.NET MVC 生成帖子表单答案

【问题标题】：ASP.NET MVC generate post formsASP.NET MVC 生成帖子表单
【发布时间】：2015-11-25 10:22:28
【问题描述】：

我只是在寻找 MVC 中的一个问题，即我想要 2 个输入文本框，用户将在其中输入行数和列数。输入后，用户将按下生成按钮，在下一个操作方法上将生成所需数量的文本框。例如，如果用户输入 2 行 3 列，那么在提交后，第二个表单将包含 6 个表格形式的文本框，最重要的是应该有一个提交按钮，通过它我可以从 POST 中的所有 6 个文本框中获取值行动。

这是我的代码

型号：

    [Required]
    [Display(Name = "Rows")]
    [Range(1, 10, ErrorMessage = "Number of Rows must be between 1 to 10")]
    public int NumberofRows { get; set; }

    [Required]
    [Display(Name = "Columns")]
    [Range(1, 4, ErrorMessage = "Number of Columns must be between 1 to 4")]
    public int NumberofColumns { get; set; }

    public List<int> EnteredNumberRows { get; set; }
    public List<int> EnteredNumberColumns { get; set; }

控制器：

/*Index action is one, in which the number of rows and columns are displayed. After entering number of rows and columns it redirects it to the Enter action containing required number of rows and columns*/
public class HomeController : Controller
{
    DataMineModel homeDataMineModel = new DataMineModel();
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Index(DataMineModel model)
    {
        TempData["NumofRows"] = model.NumberofRows;
        TempData["NumofColumns"] = model.NumberofColumns;

        return RedirectToAction("Enter");
    }

    public ActionResult Enter()
    {
        homeDataMineModel.EnteredNumberRows = new List<int>((int)TempData["NumofRows"]);
        homeDataMineModel.EnteredNumberColumns = new List<int>((int)TempData["NumofColumns"]);

        return View(homeDataMineModel);
    }

    [HttpPost]
    public ActionResult Enter(DataMineModel viewModel)
    {

        return View();
    }
}

查看：

索引：

@using (Html.BeginForm()) 
{
@Html.AntiForgeryToken()

<div class="form-horizontal">
    <br />
    <h4>Please enter the number of Rows and Columns.</h4>
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="form-group">
        @Html.LabelFor(model => model.NumberofRows, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.NumberofRows, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.NumberofRows, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.NumberofColumns, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.NumberofColumns, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.NumberofColumns, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Enter" class="btn btn-success" />
        </div>
    </div>
</div>
  }

输入：

@using (Html.BeginForm("Enter", "Home", FormMethod.Post))
{
<div class="row">
    @for (int i = 0; i < Model.EnteredNumberColumns.Capacity; i++)
    {
        <div class="col-md-3">
            <div class="row">
                @for (int k = 0; k < Model.EnteredNumberRows.Capacity; k++)
                {
                    <br />
                        <input type="text" class="form-control" name="name" value="" />
                    <br />
                }
            </div>
        </div>
    }
</div>

     <input type="submit" class="btn btn-success" value="Classify the data"    />
   }

谢谢。

【问题讨论】：

您是否尝试过在 HTML 中添加表单标签，然后循环遍历所需的行数和列数以动态添加输入元素？
顺便说一句：这不是 MVC 中的问题，而是 Javascript 中的问题。卡尔为你指出了正确的方向。您只需要确保您的控制器以正确的形式接受数据。您很可能希望将数据作为数组发送。
我已经更新了帖子，您可以看到问题是我没有在 POST 操作中输入值。请告诉我要放置哪个 Razor Input 控件来代替元素。
有人有解决办法吗？

标签： c# jquery asp.net asp.net-mvc

【解决方案1】：

正如 Robert 所建议的，这对 MVC 来说不是问题。您可以编写一些 JS 来获取用户输入并根据输入生成 HTML 表格。你的 JS 应该有点像：

$("body").on("change", "#coaLevelInput", function () {

        var l = $(this).val();
        var ht= "";
        for (var i = 1; i <= l ; i++)
        {
            ht= ht + "<div .... here you should set your CSS classes'>Code Lenght at Level" + i + "</label><span class=''><input class=''></span></div></div>";

        }
        $("#coaInputs").html(ht);

    });

【讨论】：