Question

我有一个从Model获取数据并显示信息的视图。我从模型中获取学校名称和学校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>
       }
  }

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

以下是我得到的观点

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

我的问题是如何将我在SelectedSchool列表中获得的SchoolId链接到相应的Select按钮。

提前致谢！

Answer 1

首先，您要为循环生成的所有按钮设置相同的ID。这是无效的HTML！ Id值应该是唯一的。所以删除Id属性（除非你绝对需要它的东西。在这种情况下，你需要使它唯一）！

您可以将学校ID保存在html 5数据属性中，稍后可以根据需要在javascript中阅读。

假设您有一个名为SchoolId的属性

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

您可以为name属性设置相同的属性值。在这些按钮上注册click事件时，可以将其用作jQuery选择器。

现在有一些不受限制的javascript来绑定此按钮上的点击事件

$(function(){

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

});

根据按钮单击将值从视图传递到.js文件

1 个答案: