时间戳

首页 > 解决方案 > 如何使用JS识别当前值然后在 Json 中搜索该键，并在 Razor 视图中为该键返回一个关联的值，为冗长的问题道歉。以下是更多详细信息：在我的 .Net Core Razor 视图中：我有选择下拉列表：文本：慈善机构名称（例如，“乳腺癌组织”、“孤儿护理”等） 值：这些组织的 ID 全部这些数据的一部分来自名为 Organizations 的 db 表 在该表中还有一个名为 Capacity 的列当我从下拉列表中选择一个慈善机构时，我希望将容量值打印到选择下拉列表下的 <div&g

问题描述

标签： javascripthtmljqueryasp.net-corerazor

解决方案

解决此问题的一种方法是将Capacity值存储data在元素的属性中，option以便可以在客户端读取它。这将与 HTML 一起生成，因此不需要额外的 JS 对象生成和查找。

您需要做的唯一更改是将Capacity字段添加到模型中ListOfOrganisations，然后select手动生成 HTML，而不是使用asp-items. 它看起来像这样：

public class OrganisationItem {
  public string Text { get; set; }
  public string Value { get; set; }
  public string Capacity { get; set; }
}

<label>Organization</label>
<div>  
  <select name="Organization" class="form-control" id="SelectedOrg">
    @foreach(var item in ViewBag.ListofOrganizations) {
      <option value="@item.Value" data-capacity="@item.Capacity">@item.Text</option>
    }
  </select>
  <div id="result"></div>
</div>

$('#SelectedOrg').on('change', e => {
  let capacity = $(el.target).children('option:selected').data('capacity');
  $('#result').text(capacity);
});

推荐阅读