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>

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

1 个答案: