Question

我目前正在尝试根据我的viewmodel中的两个属性更新一些HTML，这两个属性连接到两个表单组。这是ASP.NET Core。

两个表单组：

<div class="form-group">
   <label asp-for="ParticipantAmount">Antal deltagere</label>
   <input asp-for="ParticipantAmount" onchange="Group()" class="form-control" type="number" max="1000" min="1" />
</div>
<div class="form-group">
   <label asp-for="GroupAmount">Antal grupper</label>
   <input asp-for="GroupAmount" class="form-control" onchange="Group()" type="number" max="20" min="1" />
   <p id="GroupSize">0</p>
</div>

viewmodel中的属性：

public int ParticipantAmount { get; set; }
public int GroupAmount { get; set; }

脚本部分中的javascript方法：

function Group() {
    var groups = Number('@Model.GroupAmount');
    var participants = Number('@Model.ParticipantAmount');
    var size = participants / groups;
    document.getElementById('GroupSize').innerHTML = size;
}

当我尝试将内容记录到控制台时，表单输入发生变化时，视图模型中的属性似乎没有更新。

我认为我缺少一些关于我尝试做的重要方面的基本知识，但我似乎无法谷歌正确的关键字。希望你能带领我朝着正确的方向前进。

Answer 1

为了说明AJAX如何调用工作，我使用jQuery创建了一个简约的Web应用程序，该应用程序仅用于学习，代码不是生产就绪的。

剃刀观点。我已经在输入字段中添加了默认值和ID，以便在JavaScript代码中更容易识别它们。

<div class="form-group">
    <label asp-for="ParticipantAmount">Antal deltagere</label>
    <input asp-for="ParticipantAmount" onchange="Group()" class="form-control" type="number" max="1000" min="1" value="@Model.ParticipantAmount" id="ParticipantAmount" />
</div>
<div class="form-group">
    <label asp-for="GroupAmount">Antal grupper</label>
    <input asp-for="GroupAmount" class="form-control" onchange="Group()" type="number" max="20" min="1" value="@Model.GroupAmount" id="GroupAmount" />
    <p id="GroupSize">0</p>`enter code here`
</div>

使用jQuery获取/更新值并使AJAX请求的JavaScript代码。

<script>
function Group() {
    $.ajax({
        method: "POST",
        url: "/Home/UpdateAmounts",
        data: { ParticipantAmount: $('#ParticipantAmount').val(), GroupAmount: $('#GroupAmount').val() }
    }).done(function (response) {
        $('#GroupSize').html(response);
    });
}
</script>

控制器和视图模型。添加了AJAX来电的方法。

public class HomeController : Controller
{
    public IActionResult Index()
    {
        return View(new ParticipantViewModel());
    }

    // You can call this method via AJAX to update your view model
    [HttpPost]
    public IActionResult UpdateAmounts(int participantAmount, int groupAmount)
    {
        // Validation for negative numbers, and groupAmount cannot be zero
        if (participantAmount < 0 || groupAmount <= 0)
        {
            return Ok(0);
        }

        return Ok(participantAmount / groupAmount);
    }
}

public class ParticipantViewModel
{
    public int ParticipantAmount { get; set; }

    public int GroupAmount { get; set; }
}

为了使事情变得更好和更现代，您可以使用数据库来存储数据，并使用Knockout for UI来查看简单Web应用程序的following example。

基于viewmodel动态更新html

1 个答案: