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

Question

我有一个排序字典。当从下拉列表中选择一个选项时，我想获取所选元素的 ID(这些选项 ID 也是排序字典的键)并访问特定值(这是一个 Employee object) 的排序字典，取出所需的值并将该值放入 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 变量并将 View 的页面 mdoel 存储到该变量并根据需要访问它。您可以将 SerializeObject 方法与 Html.Raw 一起使用(在 razor View 的脚本部分内)。

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"
    }
}

现在，在我们进一步处理脚本之前，让我们解决一个标记问题。您应该设置选择选项的 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() ，它会给你所选选项的值。一旦你获得了值(value)，你所要做的就是搜索我们的 dict js 对象并获得子属性(对于选定的员工)并获得所需的属性值(名称？)

还要确保包含仅在将 jQuery 加载到页面后才使用 jQuery 的页面级脚本(您可以将其放在脚本部分，假设您有脚本 block 来包含 之前定义的 jQuery 库调用脚本部分)

@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