是否可以在 Javascript 中使用 HTML Helpers？

Question

我正在为我工​​作的公司开发一个 Web 应用程序。用户可以通过设置他们想要使用的小时数来动态地在 HTML 表中创建行。这是通过 Javascript 实现的。

例如，如果用户输入数字 5，表格中将显示 5 行。

如何将我的模型与动态组件一起使用？

我已经尝试在脚本中添加这个：

@Html.EditorFor(model => model.Price, new { htmlAttributes = new { @class = "form-control", id = "priceInput", type = "number" } })

代替：

const priceInput = document.createElement('priceInput');

查看下面的完整脚本。

<script type="text/javascript">
        function changeRow() {
            const aTable = document.getElementById('hourPriceTable');
            const hourTextBox = document.getElementById('hourInput');
            const rowNumber = parseInt(hourTextBox.value);
            if (rowNumber) {
                const rows = [];

                for (let i = 1; i <= rowNumber; i++) {
                    if (rowNumber < 1 || rowNumber > 24) {
                        document.getElementById('error').innerText = ('O número de horas precisa de ser entre 1 e 24.');
                        document.getElementById('error').style.color = 'red';
                        return false;
                    } else {
                        document.getElementById('error').innerText = '';
                    }
                    const row = document.createElement('tr');
                    const th = document.createElement('th');
                    const td2 = document.createElement('td');
                    th.setAttribute("class", "text-center");
                    td2.setAttribute("class", "text-center");
                    const priceInput = document.createElement('priceInput');
                    priceInput.type = 'number';
                    priceInput.setAttribute("class", "text-center");
                    th.append(i);
                    td2.append(input);
                    row.append(th);
                    row.append(td2);
                    rows.push(row);
                }
                aTable.innerHTML = "";
                rows.forEach(row => aTable.append(row));
            }
        }
    </script>

我想要我用来处理插入到这些动态行中的数据（存储到数据库）的模型，因为它们里面有文本框。我一直在努力添加此功能，因为我无法使用 Html.EditorFor 在 JavaScript 代码中创建文本框。

感谢任何帮助，如果这令人困惑，我很抱歉。

Answer 1

如果您的 javascript 在视图中，那么您可以将变量设置为 html 字符串：-

<script>
    var input = '@Html.EditorFor(model => model.CertificateCode, new { htmlAttributes = new { @class = "form-control", id = "priceInput", type = "number" } })';
</script>

input 现在将是输入元素的 html 字符串。

然后您可以通过将input 字符串传递给this 来创建一个js 元素：

function createElementFromHTML(htmlString) {
  var div = document.createElement('div');
  div.innerHTML = htmlString.trim();

  // Change this to div.childNodes to support multiple top-level nodes
  return div.firstChild; 
}

或者如果你有 jQuery，你可以简单地使用：

<script>
  var input = '@Html.EditorFor(model => model.CertificateCode, new { htmlAttributes = new { @class = "form-control", id = "priceInput", type = "number" } })';
  var element = $(input);
</script>