如何将 C# 排序字典转换为相关的 javascript 键值对数组

Question

我有一个排序字典。当从下拉列表中选择一个选项时，我想获取所选元素的 id（这些选项 id 也是排序字典的键）并访问特定值（这是一个 Employee排序字典的对象），取出所需的值并将该值放入 empDesig 文本框中。由于此任务是使用 javascript 完成的，而 razor 不支持 javascript，所以我想不出办法。

我的代码：

  @model SortedDictionary<int, HelloWorldMvcApp.Employee>

    <div>
    <select class="empNameDropdown" id="empNameDropdown" >
           <option>Select Name</option>                      
         @foreach(HelloWorldMvcApp.Employee  emp in @Model.Values){              
          <option id="@emp.EmployeeId" class="empOption">@emp.Name</option>                  
         }                               
    </select>   
     @Html.Label("Designation")
     <br/>
     @Html.TextBox("empDesig","");
     <br/><br/>                
    </div>

<script type="text/javascript"> 
    $(document).ready(function(){                  
        $("#empNameDropdown").on('change', function () {
            var id=$(this).find('option:selected').attr('id');           
            $("#empDesig").val("@Model[id].designation");                   
        });
    });                 
</script>   

javascript 变量 Id 不能在 razor 中使用。我想使用此 Id 值从排序字典中获取相关对象。有什么办法吗？请帮忙。

Answer 1

你的这条线

 $("#empDesig").val("@Model[id].designation");   

没有按您期望的方式工作！这里id 是一个javascript 变量，以@ 前缀开头的部分是C#。你不能像这样在 javascript 中混合 C# 代码。请记住，C# 代码在服务器中执行，而 javascript 代码稍后在浏览器中执行。浏览器无法执行 C# 代码！它可以使用自己的 javascript 引擎执行 javascript 代码。

您应该做的是，创建一个 js 变量并将您的视图页面 mdoel 存储到该变量并根据需要访问它。您可以使用 SerializeObject 方法和 Html.Raw 来执行此操作（在 razor 视图的脚本部分中）。

var dict = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model));

所以基本上这将创建一个代表您的排序字典的 js 对象并设置为 dict js 变量。对于包含 2 个项目的字典，它看起来像这样。

{
    "11": {
        "EmployeeId": 101,
        "Name": "Scott",
        "designation": "Manager"
    },
    "12": {
        "EmployeeId": 102,
        "Name": "John",
        "designation": "Developer"
    }
}

现在，在我们进一步处理脚本之前，让我们先解决一个标记问题。您应该设置 Select 选项的 value 属性。

<select class="empNameDropdown" id="empNameDropdown" >
    <option>Select Name</option> 
    @foreach(HomeController.Employee  emp in @Model.Values){              
        <option value="@emp.EmployeeId" class="empOption">@emp.Name</option> 
    }                               
</select>

现在当 change 事件发生在 select 元素上时。您可以致电$(this).val()，它将为您提供所选选项的值。获得值后，您所要做的就是搜索我们的dict js 对象并获取子属性（针对选定的员工）并获取所需的属性值（名称？）

还要确保包含仅在将 jQuery 加载到页面后才使用 jQuery 的页面级脚本（您可以将其放在脚本部分，假设您有包含定义的 jQuery 库的脚本块 before 调用脚本部分）

@section Scripts
{
    <script type="text/javascript">
        var dict = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model));
        console.log(dict);  // Check your browser console now
        // Or even see the stringified version of the object
        console.log(JSON.stringify(dict));  

        function getEmployee(id) {
            for (var key in dict) {
                if (dict.hasOwnProperty(key)) {
                    if (dict[key] && dict[key].EmployeeId === id) {
                        return dict[key];
                    }
                }
            }
            return null;
        }
        $(document).ready(function() {

            $("#empNameDropdown").on('change', function() {
                var id = $(this).val();
                var employee = getEmployee(parseInt(id));
                if (employee) {
                    $("#empDesig").val(employee.designation);
                }
            });
        });

    </script>
}

您还没有提到排序字典项的键是什么。如果和每一项的employeeId属性值相同，可以修复if (dict[key] && dict[key].EmployeeId === id) {行内的if条件，简单检查key是否等于id