Значение TextBox onchange Добавить новый столбец

Question

В моем представлении MVC есть следующее текстовое поле ImageUpload.

for (int i = 0; i < Model.Count; i++)
{
    @Html.TextBox("file", new { type = "file", @class = "form-control" })
}

Теперь, когда пользователь выбирает изображение, я хочу добавить еще один столбец, который отображает путь к изображению.

Я попробовал следующий код, но не работает

<script type="text/javascript">

$(function ()
 {
 $("#file").on("input", function ()
  { // trigger when you input to textbox
        if ($(this).val().length > 0)
            {
              <td>
                 @{
                     @Html.DisplayFor(m => imagePath)
                  }
              </td>
           }
         }
       }
   </script>

Answer 1

Вот протестированный пример, в котором отображается имя файла в новом столбце, из соображений безопасности браузер не будет иметь доступа к деталям пути к файлу, поэтому вы не сможете показать путь (по крайней мере, это то, что мне известноне стесняйтесь прикрепить ссылку, если найдете что-нибудь)

<table>
    <tbody>
        @for (int i = 0; i < Model.Count; i++)
        {
            <tr>
                <td>
                    @*Second parameter is the value field for texbox which is missing in oyur code*@
                    @Html.TextBox("file", i, new { @type = "file", @class = "form-control" })
                </td>
            </tr>

        }
    </tbody>
</table>
<script>
    $(".form-control").on("change", function (event) {
        var fileName = event.target.files[0].name;
        $(this).parent().append('<td>' + fileName + '</td');
    });
</script>

цитирование Сэм Топор"JavaScript запускается в браузере, и вы вызываете изменения на экране, манипулируя DOM. Razor запускается на сервереи выполняет код или преобразует код (обычно в текст, такой как HTML). "Поэтому, если вы напишите код Razor для отображения нового столбца, он не будет работать, поскольку он отображается на стороне сервера.