如何访问动态创建的输入值？

Question

我在我的 HomeController 中创建了一个名为 Media 的方法，它接收一个数字，根据这个数字我的应用程序创建 "n" 数量的输入。我遇到的问题是我必须获取 "n" 个输入数量的值来计算输入数字的算术平均值。这是我的 HomeController:

using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace Media.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }

        public ActionResult Media()
        {
            return View();
        }

        [HttpPost]
        public ActionResult Media(int numero) {
             String elements = null;
             //elements= "<form action="Media" method='post'>";
            for (int i = 1; i <= numero; i++) {
                elements += "<input type= 'text' id='n"+i+"'"+"name='n"+ i + "'>" +""+"</input><br/>";
            }
            ViewBag.elements = elements + "<button id='btnCalcular'>Calcular media</button>";
                //"<button type="submit" id="button" name="button" action="Media" >Enviar</button> </ form > ";
            return View();
        }
    }
}

这是我的 cshtml：

@{
    ViewBag.Title = "Media";
}
    <form action="Media" method="post">
        <h2>Media de n números</h2>
        Ingrese el número de elementos:<br />
        <input type='text' id='numero' name='numero' />
        <button type="submit" id="button" name="button" >Enviar</button>
    </form>

@Html.Raw(ViewBag.elements)

这是我的结果：

您知道访问这些值的任何方式吗？非常感谢任何帮助。

Answer 1

有一些可能性。其中之一是使用 JavaScript 读取所有值：

function getValues() {
    const values = [...document.querySelectorAll('input')]
        .filter(a => /^n[0-9]{1,}$/.test(a.getAttribute('id')))
        .map(a => a.value)
        .join(',');
    console.log(values);
    // TODO Make some operation like ajax
}

<input type="text" id="n1">
<input type="text" id="n2">
<input type="text" id="n3">
<button onclick="getValues()">Post</button>

其他方法是将一些参考存储到后端的表单和流程中：

@{
    ViewBag.Title = "Media";
}
<form action="Media" method="post">
    <h2>Media de n números</h2>
    Ingrese el número de elementos:<br />
    <input type='text' id='numero' name='numero' />
    <button type="submit" id="button" name="button" >Enviar</button>
</form>

<form action="Test" method="post">
    @Html.Raw(ViewBag.elements)
    <!-- store amount of elements -->
    <input type="hidden" name="myControl" value="@ViewBag.n" />
</form>

控制器：

 [HttpPost]
 public ActionResult Media(int numero) {
     // (...)
     ViewBag.n = numero;
     // (...)
 }

 [HttpPost]
 public ActionResult Test(int n) {
     // Example of how read posted values
     for (var i = 0; i < n; i++) {
         var valueN = Request.Form["n" + i.ToString()];
     }
 }

如何访问动态创建的输入值？

How to access to input values created dynamically?

html

c#

asp.net

asp.net-mvc

viewbag