使用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="<<" />
<input style="width: 100%" type="button" id="btnRight" value=">>" />
</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>
所以您需要将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) {