如何在 Javascript 中使用（分配和操作）Razor 變量

Question

我正在嘗試為我正在創建的動態表創建一個簡單的計數器。 本質上，每次我向表中添加一行時，我都希望計數器增加 1。如果可以避免的話，我試圖避免向模型添加一些任意屬性，但我真的很困惑如何獲得它上班。

我的表從 2 行開始，模型綁定到一個列表。 這里的目的是允許之后的每個新行都被賦予一個新索引，以便它可以與表單一起提交並在我進行時創建列表（在視圖中進一步向下提交一個操作， 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.cshtml：

我建議你可以添加_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.Partial View（位於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);
    }
}

結果：