Можно ли использовать HTML Helpers в Javascript?

Question

Можно ли использовать HTML Helpers в Javascript?

1

Я разрабатываю веб-приложение для компании, в которой я работаю. Пользователь может динамически создавать строки в таблице 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.

Любая помощь приветствуется, извините, если это сбивает с толку.

Simão Amaral 11 янв. 2019, в 00:50

Источник

1

Страница сервера запускается ( выполняет методы C #, такие как Html.EditorFor ) и генерирует HTML. Клиентский браузер отображает HTML и выполняет JavaScript . Обратите внимание, что существует строгое разделение контекстов выполнения и что все (и только вещи), которые попадают в HTML (или ресурс JavaScript, например), «каким-либо способом», могут использоваться на клиенте.
user2864740 10 янв. 2019, в 23:06
0

Проверить этот ответ
NaDeR Star 10 янв. 2019, в 23:10
0

Я думаю, вы спрашиваете, как связать динамическую модель на пост. Это правильно?
Khyron 10 янв. 2019, в 23:14
0

Я ценю ответы до сих пор. Я нашел ответ, указанный @NaDeRStar, но я не понял бит MyCustomDataAttribute. Я новичок в программировании в целом, и я не совсем знаком с технологией, которую я использую. Возможно, это Хирон, я посмотрю на это! Спасибо.
Simão Amaral 10 янв. 2019, в 23:17
0

@SimãoAmaral SimãoAmaral Нам нужно увидеть больше вашего кода. Можете ли вы опубликовать модель, представление и контроллер (как получить и разместить). Динамическая таблица отображается нормально, или это проблема?
Khyron 11 янв. 2019, в 01:15

Показать ещё 3 комментария

Теги:

c#

javascript

asp.net-mvc

1 ответ

Ещё вопросы

Страница сервера запускается ( выполняет методы C #, такие как Html.EditorFor ) и генерирует HTML. Клиентский браузер отображает HTML и выполняет JavaScript . Обратите внимание, что существует строгое разделение контекстов выполнения и что все (и только вещи), которые попадают в HTML (или ресурс JavaScript, например), «каким-либо способом», могут использоваться на клиенте.
Я думаю, вы спрашиваете, как связать динамическую модель на пост. Это правильно?
Я ценю ответы до сих пор. Я нашел ответ, указанный @NaDeRStar, но я не понял бит MyCustomDataAttribute. Я новичок в программировании в целом, и я не совсем знаком с технологией, которую я использую. Возможно, это Хирон, я посмотрю на это! Спасибо.
@SimãoAmaral SimãoAmaral Нам нужно увидеть больше вашего кода. Можете ли вы опубликовать модель, представление и контроллер (как получить и разместить). Динамическая таблица отображается нормально, или это проблема?

BenG · Answer 1 · 2019-01-11T06-56-00.000Z

Если ваш javascript находится в представлении, вы можете установить переменную в виде строки html: -

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

input теперь будет html-строкой элемента input.

затем вы можете создать элемент js, передав input строку этому:

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>

Я попробовал немного jQuery, но все, что я получаю, это текст HTML вместо фактического компонента. Я делаю что-то неправильно?