基于视图模型动态更新html

我目前正在尝试更新一些基于我的viewmodel属性挂钩到两个表单组的一些HTML。这是ASP.NET Core。基于视图模型动态更新html

两个表单组：

<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>

在视图模型的属性：

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; 
}

当我尝试登录的东西到控制台，当表单输入发生变化时，似乎属性并未在视图模型中更新。

我想我错过了一些关于我想要做的重要方面的基本知识，但我似乎无法看到正确的关键字。希望你能带领我走向正确的方向。

来源

2017-07-04 zniwalla

在您的情况下，尝试使用'AJAX'搜索 - 您需要对您的Web应用程序的后端进行'AJAX'调用以更新'ParticipantAmount'和'GroupAmount'。或更好的谷歌现代的JavaScript框架，如Angular，Knockout等。 – Ignas

为了说明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; } 
}

为了使事情变得更好，更现代化的，你可以寻找到一个简单的Web应用程序的使用following example数据库存储数据，并利用基因敲除的UI。

来源

2017-07-04 13:43:22 Ignas

谢谢！这当然解释了我试图达到的目标。我最终使用了[Vue]（https://vuejs.org/），但我缺乏的是关于如何动态操作元素的知识。干杯。 – zniwalla

基于视图模型动态更新html

回答

相关问题