c# - 使用 jquery 在 html 表中显示来自模型(字典)的数据

Question

我正在使用 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>

Answer 1

因此需要将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) {