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

【问题标题】：How to access to input values created dynamically?如何访问动态创建的输入值？
【发布时间】：2019-10-25 15:25:29
【问题描述】：

我在 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)

这是我的结果：

您知道获取这些值的任何方式吗？真的很感激任何帮助。

【问题讨论】：

通过什么方式访问？如果您想使用 C# 处理它们，那么您需要将值发送到服务器，可能使用 AJAX 或者您可以在客户端上计算它们。无论哪种方式，您都需要使用 Javascript 来执行此操作。
我需要在输入中输入值来计算控制器中的平均值。 @利亚姆

标签： c# html asp.net asp.net-mvc viewbag

【解决方案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()];
     }
 }

【讨论】：