Как использовать (назначать и манипулировать) переменные Razor в Javascript

Question

Я пытаюсь создать простой счетчик для динамической таблицы c, которую я создаю. По сути, каждый раз, когда я добавляю строку в таблицу, я хочу, чтобы счетчик увеличивался на 1. Я пытаюсь избежать добавления какого-либо произвольного свойства в модель, если я могу избежать этого, но я действительно ломаю голову над тем, как получить это на работу.

Моя таблица начинается с 2 строк и привязана к списку моделей. Намерение здесь состоит в том, чтобы дать каждой новой строке после этого новый индекс, чтобы ее можно было отправить с формой и создать список как I go (одно действие отправки дальше вниз в представлении, функция addRow() вызывается с помощью кнопки, которая не отправляет форму)

По сути, вот что я имею в виду

@model AddUsers
@{
    ViewData["Title"] = "Add Users";
    var Counter = 2;
}

@section Scripts{

<script>
    function addCount() {
        var count = @Counter;
        console.log('count: ' + count + 'counter: ' + '@Counter');
        count = count + 1;
        @Counter = count;
        console.log('count: ' + count + 'counter: ' + '@Counter');
    }
</script>

    <script>
        function addRow() {
            var counter = @Counter;
            var table = document.getElementById("AddUsersTable");
            var row = table.insertRow(-1);
            var cell1 = row.insertCell(0);
            cell1.innerHTML = '<input type="text" asp-for="Users[' + counter + '].FirstName"/><br /><span asp-validation-for="Users[' + counter + '].FirstName class="text-danger"></span>';
            var cell2 = row.insertCell(1);
            cell2.innerHTML = '<input type="text" />';
            var cell3 = row.insertCell(2);
            cell3.innerHTML = '<input type="text" />';
            var cell4 = row.insertCell(3);
            cell4.innerHTML = '<input type="text" />';
            addCount();
        }
    </script>
}

Когда я отлаживаю это и просматриваю журнал и элементы в браузере, я вижу последующий.

Я явно упускаю что-то решающее, поскольку ничего из этого не работает, как ожидалось.

То, что должно было быть простым счетчиком, - это Оказалось, больше головной боли, чем я ожидал. Я попробовал некоторые ответы и комментарии от здесь , а также свои собственные попытки безрезультатно.

Answer 1

Кажется, вы хотите добавить счет к числу name.

Изменить как показано ниже:

@model AddUsers
<button onclick="addRow()">Add Row</button>
<table id="AddUsersTable">
    <tr>
        <th>UserName</th>
        <th>1</th>
        <th>2</th>
        <th>3</th>
    </tr>
    <tr>
        <td>Candy</td>
        <td>aaa1</td>
        <td>bbb1</td>
        <td>ccc1</td>
    </tr>
</table>
@section Scripts{
    <script>
        var counter = 2;//it must define outside the function
        function addRow() {            
            var table = document.getElementById("AddUsersTable");
            var row = table.insertRow(-1);
            var cell1 = row.insertCell(0);
            cell1.innerHTML = '<input type="text" asp-for="Users[' + counter + '].FirstName"/><br /><span asp-validation-for="Users[' + counter + '].FirstName class="text-danger"></span>';
            var cell2 = row.insertCell(1);
            cell2.innerHTML = '<input type="text" />';
            var cell3 = row.insertCell(2);
            cell3.innerHTML = '<input type="text" />';
            var cell4 = row.insertCell(3);
            cell4.innerHTML = '<input type="text" />';
            counter++;
        }
    </script>
}

Результат:

ОБНОВЛЕНИЕ ：

1.Модель:

public class AddUsers
{
    public int Id { get; set; }
    [Required]
    public string Name { get; set; }
    [Required]
    public int Age { get; set; }
}

2.Index.cs html:

Я предлагаю добавить _ValidationScriptsPartial, он существует в вашем шаблоне по умолчанию и содержит jquery-validate и jquery-validation-unobtrusive. Это позволяет выполнять проверку на стороне клиента вместо проверки ModelState на сервере. сторона.

@model IEnumerable<AddUsers>

@{
    ViewData["Title"] = "Index";
}

<button onclick="ShowPartial()">Add Row</button>

<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Age)
            </th>

        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Age)
                </td>
            </tr>
        }
    </tbody>
</table>
<div id="CreateUserPartial" hidden>
    @await Html.PartialAsync("PartialView", new AddUsers())
</div>
@section Scripts
{
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    <script>
        function ShowPartial() {
            $('#CreateUserPartial').removeAttr('hidden');
        }
    </script>
}

3. Частичный вид (расположен на Views/Shared/PartialView.cshtml):

@model AddUsers

<form asp-action="Create">
    <div class="form-group">
        <label asp-for="Name" class="control-label"></label>
        <input asp-for="Name" class="form-control" />
        <span asp-validation-for="Name" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="Age" class="control-label"></label>
        <input asp-for="Age" class="form-control" />
        <span asp-validation-for="Age" class="text-danger"></span>
    </div>
    <div class="form-group">
        <input type="submit" value="Create" class="btn btn-primary" />
    </div>
</form>

4.Контроллер:

public class AddUsersController : Controller
{
    private readonly YourContext _context;

    public AddUsersController(YourContext context)
    {
        _context = context;
    }      
    // GET: AddUsers
    public async Task<IActionResult> Index()
    {
        return View(await _context.Users.ToListAsync());
    }
    [HttpPost]
    [ValidateAntiForgeryToken]
    public async Task<IActionResult> Create([Bind("Id,Name,Age")] AddUsers addUsers)
    {
        if (ModelState.IsValid)
        {
            _context.Add(addUsers);
            await _context.SaveChangesAsync();
            return RedirectToAction(nameof(Index));
        }
        return View(addUsers);
    }
}

Результат: