Mixing javascript and C#

Mixing javascript and C#

本文关键字:and javascript Mixing      更新时间:2023-09-26

我有@model IEnumerable<HotelWithRating> -一些酒店。在视图中,我有5个复选框-酒店的星级。

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
    <tr>
        <td><input type = 'checkbox' value="false" id= '1' onclick = ' ShowHotels();'/></td>
        <td><input type = 'checkbox' value="false" id= '2' onclick = ' ShowHotels();'/></td>
        <td><input type = 'checkbox' value="false" id= '3' onclick = ' ShowHotels();'/></td>
        <td><input type = 'checkbox' value="false" id= '4' onclick = ' ShowHotels();'/></td>
        <td><input type = 'checkbox' value="false" id= '5' onclick = ' ShowHotels();'/></td>
    </tr>
</table>

我需要酒店显示,其中有例如5或4星(如果第四个和第五个复选框被选中)。

应该是这样的

<table class="Grid"> 
    <tr> 
        <th>Name</th>
        <th>Stars</th>       
        <th>Rating</th>
        <th>Description</th>             
    </tr> 
    <script type="text/javascript">
        function ShowHotels() 
        {
              @foreach (var item in Model)
                  {
                      <text>
                      if (document.getElementById(item.Hotel.stars).checked == true)
                      {
                          <tr>
                          <td>@item.Hotel.Name</td>
                          <td>@item.Hotel.Stars</td>
                          <td>@item.Rating</td>
                          <td>@item.Hotel.Description</td>
                          </tr>
                      }
                      </text>
                  }
        }
    </script>
</table>

我发现了许多关于javascript与代码混合的主题,但仍然没有决定。

最好首先根据复选框选择筛选模型。在客户端可以通过比较模型中每个酒店的属性来完成。否则,您也可以使用AJAX进行服务器端过滤(发送选定复选框的信息,然后服务器将向您发送过滤后的模型)。服务器端过滤是更好的,因为你有大量的酒店列表要查看。

然后将此过滤模型分配给Grid或使用JavaScript为过滤模型中的每个元素使用for循环生成表。

如果你明白了,请随便问任何问题。谢谢。