Генерация HTML-кода, специфичного для ядра asp, включая атрибуты asp

Question

Я новичок в Razor, но имею опыт работы с классическим html и C #.

Для начала я сделал учебник по бритве от Microsoft.После этого я захотел поиграть с кодом, и поэтому у меня возник вопрос.

Я хочу сделать код представления более динамичным, создав html путем отражения ( этот код представления я имею в виду ).В будущем я хочу генерировать целые html-формы с помощью модели без необходимости писать html.

Существуют блоки свойств, подобные этим двум примерам (Название и Дата выпуска):

<div class="form-group">
    <label asp-for="Movie.Title" class="control-label"></label>
    <input asp-for="Movie.Title" class="form-control" />
    <span asp-validation-for="Movie.Title" class="text-danger"></span>
</div>
<div class="form-group">
    <label asp-for="Movie.ReleaseDate" class="control-label"></label>
    <input asp-for="Movie.ReleaseDate" class="form-control" />
    <span asp-validation-for="Movie.ReleaseDate" class="text-danger"></span>
</div>

В C # легко прочитать эти свойства по отражению и создать HTML.Но при создании html я не смог использовать специальные атрибуты " asp-for " и " asp-validation-for ".

Для проверки работоспособности серверасторонний рендеринг поддерживает специальные атрибуты "asp". Я создал жестко (экспериментальный) код ниже:

@Html.Raw("<div class=\"form-group\">")
@Html.Raw("<label asp-for=\"Movie.Title\" class=\"control-label\"></label>")
@Html.Raw("<input asp-for=\"Movie.Title\" class=\"form-control\" />")
@Html.Raw("<span asp-validation-for=\"Movie.Title\" class=\"text-danger\"></span>")
@Html.Raw("</div>")

Как я и ожидал, проверка для "Title" больше не работает.

Мои вопросы:

• Как генерировать с помощью отражения asp-формы (или, по крайней мере, существует ли подвеска Html.Raw для такой цели?)
• Как работает "asp" -атрибуты работают в фоновом режиме (магия выполняет компилятор или среда выполнения?)

Спасибо за ваши усилия!

Answer 1

asp-* являются TagHelpers и хорошо документированы здесь Здесь также показано, как создать свой собственный.

Я хотел бы дать совет о том, как думать о страницах Razorсинтаксис.Это механизм шаблонов, поэтому он занимает страницу .cshtml, расширение - это то, что сообщает ядру dotnet, что это файл бритвы.И выплевывает html-страницу, которая затем, наконец, отправляется в ответ на браузер клиента (если вы ищете динамическое обновление страницы на стороне клиента, Razor не может этого достичь, он может только динамически создавать страницы на стороне сервера.).

Так что же ядро ​​dotnet делает с тегом asp-for?Ну, он генерирует атрибуты html для элемента html, <input asp-for="Model.Prop" /> превратится в нечто вроде <input id="Prop" name="Prop" data-required="" data-maxlength="100" etc... />

Так что вы можете создать собственный атрибут, связать его с <form curstom-attr-bind-model="MyModel"></form>

И тогда, когдазапрошена страница. html-страница будет построена на стороне сервера с вашей реализацией для универсальной формы.

Изменить 1

Я не могу сказать вам, как это сделатьчерез пользовательский атрибут (все же, это заинтересовало меня, я выясню это, я смотрю, как они реализуют свои помощники тегов здесь специально для элементов select и input), однако вы в краткосрочной перспективепотенциально может сделать что-то вроде этого:

Шаги:

1. Напишите это: <input asp-for="Form.Number" /> / <span asp-validation-for="Form.Number"></span>
2. Посмотрите в браузере, что генерируется HTML,
3. Имитация этого метода Html.Raw(), даст вам что-то вроде: @Html.Raw("<input id=\"Form_Number\" name=\"Form.Number\" />")

Почему это не работает, когда вы делаете это по-своему?Потому что он будет шаг за шагом проходить через ваш файл cshtml и выполнять любой код C # для создания шаблона вашего html.как только он выполняет @Html.Raw(), он рендерит текст, если вы заметите, asp-for="Model.Number", Model.Number не текст, а скорее объект, даже тогда он не рекурсивно воссоздает файл cshtml, чтобы продолжать искать синтаксис бритвы, пока не будетсделанный.Надеюсь, это не смущает, просто подумайте, что процесс cshtml to html начинается в верхней части файла, а затем пошагово следует инструкциям, пока не дойдет до конца, и это должно иметь смысл.