Javascript 基于按钮单击将值从视图传递到.js文件

我有一个从模型中获取数据并显示信息的视图。我从模型中获取一个学校列表，其中包含学校名称和学校Id，然后使用foreach循环，根据模型返回的学校数量创建一个动态表

下面是我查看的代码

 @if (Model.SelectedSchool != null)
 {
      foreach (var sch in Model.SelectedSchool )
      {
          <table class="table-bordered">
          <tr>
              <td class="col-sm-9">
                   @sch.SchoolName
              </td>
              <td class="col-sm-3">
                   <button class="btn btn-default" id="recentlySelected" name="btnRecentlySelected" type="button">
                              Select
                   </button>
              </td>
          </tr>                                                
          </table>
       }
  }      

@if（Model.SelectedSchool！=null）
{
foreach（Model.SelectedSchool中的var sch）
{
@学校名称
挑选
}
}      

这里SchoolName是我从Model获得的列表中的属性。 SchoolId也在列表中

下面是我得到的观点

现在，我希望当用户单击每个学校名称旁边的Select按钮时，该特定的SchoolId被传递到.js文件，我在该文件中处理javascript函数，并基于SchoolId，javascript函数，生成学校的地址

我的问题是如何将我在SelectedSchool列表中获得的学校ID链接到相应的选择按钮

---

提前谢谢

首先，您要为循环生成的所有按钮设置相同的id。这是无效的HTMLId值应该是唯一的。因此，删除Id属性（除非你绝对需要它做什么。在这种情况下，你需要使它唯一）

您可以将学校id保留在HTML5数据属性中，然后根据需要在javascript中读取

假设您有一个名为

SchoolId

的属性

<button class="btn btn-default" data-schoolid="@sch.SchoolId" 
                                                name="btnRecentlySelected" type="button">
                              Select
 </button>

---

创建一个js文件，添加对视图的引用（或者最坏的情况，视图中脚本标记内的硬代码脚本）-内部绑定到选择按钮单击事件类似于►

document.getElementById（'recentlySelected'）.addEventListener（'click'，function（）{//您的代码在这里从表中获取数据}）

，但是如果您对JavaScript一点都不熟悉，那么这可能是一个很好的开始，如果您对HTML、JavaScript等都不熟悉的话，这可能会对OP有所帮助。。当使用类作为选择器时，使用none类选择器绑定事件，例如当您的UI/CSS团队不断移动类时，使用none类选择器（如

data id=“myBtn”

会更安全，这是应该允许他们做的，因为样式与功能是分开的，但他们不会触及数据属性和id等：）我知道你是从哪里来的，但实际上这是一个实际问题。ID和类是结构化的，它们不是用于样式的，至少不是专门用于样式的。CSS可以将它们用作应用样式的选择器，但id/类的含义更为深刻。答案中没有CSS类作为我的jQuery选择器。我正在使用jQuery选择器的name属性。名称是程序员应该维护的东西，而不是设计师

$(function(){

  $("[name='btnRecentlySelected']").click(function(e){
     e.preventDefault();
     var schoolId= $(this).data("schoolid");
     alert(schoolId);
     // to do : Do something with the schoolId
  });

});