使用jquery在html表格中显示来自Model(Dictionary)的数据

本文关键字：Model Dictionary 数据 jquery html 表格 显示 使用 | 更新日期: 2023-09-27 18:02:22

我使用的是ASP。Net Razor, ASP。. NET MVC和jQuery。

我有一个字典在模型和下拉列表在html表。我想要的是，当我在下拉列表中选择"ALM"选项时，我想使用jquery显示id="leftValues"中的字典中的一些数据。

我代码:

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@model Dictionary<string,string>
<style type="text/css">
  #myTable {
    position:absolute;
           top:10%;
           left:30%; 
  }
    #heading {
        text-align: center
    }
    #SelectPlatform {
        text-align: center;
        position: absolute;
            top: 10%;
         }
</style>

<table id="myTable">
        <tr> 
            <th id="heading">  Select Platform   </th>
            <th id="heading"> Available Options</th>
            <th></th>
            <th id="heading"> Selected Options</th>
        </tr>
        <tr>
            <td>
                    <select id="SelectPlatform">
                        <option>Select Platform</option>                      
                        <option>ALM</option>
                        <option>Serena</option>
                    </select>
            </td>
            <td>
                   <div>
                      <select style="text-align: center; text-wrap:normal; width: 110%"; size="20%" id="leftValues" multiple >
                       // Here I want to show data from dictionary 
                      </select>
                    </div>
            </td>
            <td>
                <div>
                    <input style="width: 100%" type="button" id="btnLeft" value="&lt;&lt;"  />
                    <input style="width: 100%" type="button" id="btnRight" value="&gt;&gt;" />
                </div>
            </td>
            <td>
                <div>
                     <select style="text-align: center; text-wrap:normal; width: 110%" id="rightValues" size="20%" multiple >
                    </select>
                </div>
            </td>

        </tr>
</table>

<script type="text/javascript">
    $(document).ready(function () {

        $("#SelectPlatform").change(function () {
            var textValue = $("#SelectPlatform option:selected").text();
            if (textValue == "Select Platform")
            {
                     // some code
            }
            else if (textValue == "ALM")
            {
              // this is working 
                $("#leftValues").append('<option  value=' + '"NoItem"' + ' >HI I am added </option>');   

                // this is not working 
                $.each(Model, function (key, value) {
                    alert(key);
                    alert(value);
                    $("#leftValues").append('<option  value=' + '"NoItem"' + ' >HI I am also added </option>');
                });

            }
            else if (textValue == "Serena")
            {
               // some code
            }

        });


      }
    });
</script>

使用jquery在html表格中显示来自Model(Dictionary)的数据

所以您需要将Model值从前端移动到后端。Javascript不能读取ViewModel值，因为它们是在服务器上处理的。你可以把它们写进javascript:

<script>
    var dicMap = new Map();
    @foreach (var kv in Model)
    {
        @:dicMap.set(@kv.Key, @kv.Value);
    }
</script>

现在变化:

// this is not working 
$.each(dicMap, function (key, value) {

相关文章：