使用java-script选择器迭代Dictionary

Iterate over Dictionary with java-script selector

本文关键字:Dictionary 迭代 选择器 java-script 使用      更新时间:2023-09-26

我有一个字典在我的视图,有(inputID,工具提示)。

我也有一组id的我的输入元素在这个页面。我需要用元素id遍历字典:

 @{
 Dictionary<string, string> questionMarks = 
     ViewBag.QuestionMarks as Dictionary<string, string>;
 @}
 <script type="java-script">
 $(document).ready(function () {
    var inputs = $('input,select[type!="hidden"]');
    $.each(inputs, function(i, val) {
    if ($(val).attr('id')) { 
                var id = $(val).attr('id');
                var iter_string = '@questionMarks' + "[" + id + "]";
                alert(iter_string);              // [1]
                alert('@questionMarks["cvc"]');  // here i got tooltip
             }
    });
</script>

[1]我有System. collection . generic . dictionary ' 2[System. collection]。字符串,系统。字符串)(cvc)

感谢Jan Jongboom最后我得到了我想要的:

@using System.Web.Script.Serialization
@{
    Dictionary<string, string> questionMarks = ViewBag.QuestionMarks as Dictionary<string, string>;
    JavaScriptSerializer jss = new JavaScriptSerializer();
@}
<script type="text/javascript">
    var questionMarks = @Html.Raw(jss.Serialize((Dictionary<string, string>)ViewBag.QuestionMarks));     
    $(document).ready(function () {
        for ( keyVar in questionMarks ) {
            $('#' + keyVar).attr('original-title', questionMarks[keyVar]);
            $('#' + keyVar).tipsy({ gravity: 'w' });
        }
    });
</script>

<script>
var questionMarks = @new JavaScriptSerializer().Serialize((Dictionary<string, string>)ViewBag.QuestionMarks) ;
</script>

现在你有一个名为questionMarks的javascript变量,你可以遍历它。

不,您不能从客户端代码遍历服务器变量。您可以从JS变量(如JSON)生成初始化代码或在服务器端生成必要的html。也可以通过ajax请求从jsavascript请求这些数据。

在绘制输入时附加数据属性应该可以帮助您解决这个问题。

示例:http://jsfiddle.net/Krch9/

$(document).ready(function(e) {
    var inputs = $("input", "#container");
    $.each(inputs, function(i, val) {
        var ToolTipText = $(this).data('tooltiptext');
        /// Run your tooltip plugin here ...
        $("#output").html($("#output").html() + "<br>" + $(this).attr('id') + " : " + ToolTipText);
    });
});

使用MVC帮助器,你可以很容易地添加它们:

@Html.TextBoxFor(x => x.Field, new { data_tooltiptext = "Blah blah"});

标记最终看起来像这样:

<input type="text" id="Field" data-tooltiptext="Blah blah">

编辑:额外帮助

。E遍历元素

foreach( var question in questionMarks) {
   @Html.TextBox(question.Key, new { data_tooltiptext = question.Value} );
}

然后使用javascript示例(您需要根据自己的需要进行修改…)在

元素上运行插件。

要删除引号,使用Html.Raw()

var questionMarks = '@Html.Raw(jss.Serialize((Dictionary<string, string>)ViewBag.QuestionMarks))';