Динамическое добавление html элементов через tag-хелперы

Question

При нажатии на кнопку, должен появляться элемент

<td>
    <form>
        <div>
            <input type="button" value="Добавить" />
            <input type="button" value="Удалить" />
        </div>
        
    </form>
    <input type="text" style="field-sizing: content; writing-mode: vertical-lr; letter-spacing: 10px; text-orientation: upright" />
</td>

1,5 часика подумал, лишь такой вариант придумал, но это не совсем то, и как тогда подвязать кнопку чтоб происходило добавление....

<td>
    <form>
        <div>
            <input type="button" value="Добавить" />
            <input type="button" value="Удалить" />
        </div>
        @{
            string newText = "<input />";
            ViewBag.newText = newText;
        }
        ViewBag.newText;
    </form>
    <input type="text" style="field-sizing: content; writing-mode: vertical-lr; letter-spacing: 10px; text-orientation: upright" />
</td>

Прошу подсказать как добавлять динамически html элементы через tag-хелперы и подвязывать кнопки к функциям razor??

Answer 1

добавьте @rendermode InteractiveServer для динамического изменения html а дальше я покажу пример кода с динамическим добавление элементов ,я не уверен что это то что вам надо ,но с tag-хелперами это работает точно также

@rendermode InteractiveServer
<div class="alert alert-success" role="alert">Laba23</div>



<input type="text" @bind-value="@CitiName" @bind-value:event="oninput" class="form-control" placeholder="город" />
<div class="d-inline-flex align-content-center justify-content-center">
    <button class="btn btn-success" @onclick="AddItem">Добавить город</button>
    <div class="form-check form-switch p-0">
        <div class="d-inline-flex flex-row-reverse gap-1">
            <InputCheckbox class="form-check-input ms-0" @bind-Value="@visible" @onclick="checkboxClick" id="switchCheckLabelStart" />
            <label class="form-check-label" for="switchCheckLabelStart">Показать город</label>
        </div>
    </div>
</div>
<div class="@CitiesPoleStyle">
    @if (Cities != null)
    {
        @foreach (var item in Cities)
        {
            <div> <span>@item </span> <button type="button" class="btn btn-outline-danger" @onclick="() => RemoveItem(item)">X</button> </div>
        }
    }
  
</div>

@code {
    string CitiesPoleStyle;
    const string Key = "cities";
    bool visible = true;
    string CitiName;

    List<string> Cities = new List<string>();

    private async void AddItem()
    {
        if (Cities == null) Cities = new List<string>();
        if (!string.IsNullOrWhiteSpace(CitiName))
        {
            Cities.Add(CitiName);
            CitiName = "";
            await InvokeAsync(StateHasChanged); 
        }
    }
    private void RemoveItem(string item)
    {
        Cities.Remove(item);
    }
    private void checkboxClick()
    {
        if (!visible) CitiesPoleStyle = "";
        else CitiesPoleStyle = "d-none";
    }
}

БЛОГ НА HUSL

Динамическое добавление html элементов через tag-хелперы

Ответы (1 шт):