Orchard字段上的多个Javascript调用_Javascript_Orchardcms

Orchard字段上的多个Javascript调用

javascript orchardcms

Orchard字段上的多个Javascript调用,javascript,orchardcms,Javascript,Orchardcms,我正在创建一个模块，通过创建一个保存地址的自定义字段（并在首次输入地址时对其进行验证），允许用户查看一组IP地址的状态。在Field view上有一个glyphicon，它根据ping尝试的结果进行更改但是，我很难获得用于ping地址和每个字段以正确传递参数的Javascript。出于某种原因，只将第一个字段中的地址传递给Javascript，而不是使用每个字段中的地址我用Firebug检查了页面，发现onload参数被正确收集和发送，但是Javascript只接收第一个字段的内容。由于

我正在创建一个模块，通过创建一个保存地址的自定义字段（并在首次输入地址时对其进行验证），允许用户查看一组IP地址的状态。在Field view上有一个glyphicon，它根据ping尝试的结果进行更改

但是，我很难获得用于ping地址和每个字段以正确传递参数的Javascript。出于某种原因，只将第一个字段中的地址传递给Javascript，而不是使用每个字段中的地址

我用Firebug检查了页面，发现onload参数被正确收集和发送，但是Javascript只接收第一个字段的内容。由于Javascript使用参数来确定要更改的DOM，因此只有第一个DOM会被更改

我还确认，通过使spanIDHolder和addressHolder跨距可见并使Javascript警报包含这两个跨距的内容，这些值的传递是错误的。HTML显示正确的值，但警报仅显示第一个值

以下是视图的代码：

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
@{
    string ipaddress = Model.ContentField.Value;
    string spanID = ipaddress + "span";
    bool showPingResult = Model.ContentField.ShowPing;
}
<body>
    @{
        if (!string.IsNullOrEmpty(ipaddress)) {
            if (showPingResult) {
                <span id="addressHolder" style="display:none">@ipaddress</span>
                <span id="spanIDHolder" style="display:none">@spanID</span>
                <span id="@spanID">
                    <span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
                </span>
            }
            <span class="text-field">@ipaddress</span>
        }
    }
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script>
        var address = document.getElementById("addressHolder").innerText;
        var id = document.getElementById("spanIDHolder").innerText;

        function setPingResult() {
            var elem = document.getElementById(id);
            elem.innerHTML = '<div class="glyphicon glyphicon-ok-sign" aria-hidden="true"></div>';
        }

        $(document).ready(function () {
            setPingResult();
        });
    </script>

</body>


@{
字符串ipaddress=Model.ContentField.Value；
字符串spanID=ipaddress+“span”；
bool showPingResult=Model.ContentField.ShowPing；
}
@{
如果（！string.IsNullOrEmpty（ipaddress））{
如果（显示结果）{
@IP地址
@斯潘尼德
}
@IP地址
}
}
var address=document.getElementById（“addressHolder”）.innerText；
var id=document.getElementById（“spanIDHolder”）.innerText；
函数setPingResult（）{
var elem=document.getElementById（id）；
elem.innerHTML=''；
}
$（文档）.ready（函数（）{
setPingResult（）；
});

Javascript被暂时简化，直到我能够正确地传递参数，所以“地址”是未使用的

到目前为止我已经尝试过的事情：

包含Javascript代码的其他方法，如内联或将其包含在HTML中，如前所述
通过C#函数执行ping并在视图上使用if语句显示正确的符号
- 这是可行的，但意味着它在加载页面之前运行ping脚本。如果有办法在onload块（或等效块）中调用C#函数，那将是一个解决方案
在主体上通过onload调用运行代码，并将Javascript存储在单独的文件中
随意移动东西，希望它能起作用

如果我需要从项目的其他地方提供代码，请告诉我

编辑：到目前为止我发现了一些东西

无论页面上有多少个单独的字段，开头指定变量的块只执行一次。我通过用随机数生成器的输出替换spanID发现了这一点。所有四个字段都收到相同的随机数

我尝试过将字段封装在零件中，但不知道如何将变量放到零件视图而不是字段视图中。viewmodel可能是关键

只需在所需变量名前面使用@，就可以将变量传递到Javascript部分。这将导致传递最后一个字段的数据

解决方案：

出于某种原因，如果我在document.ready块中而不是直接在JS函数中收集变量，则pass可以正常工作。因此,

function setPingResult() {
    var elem = document.getElementById('@spanID');
    elem.innerHTML = '<div class="glyphicon glyphicon-ok-sign" aria-hidden="true"></div>';
}

$(document).ready(function () {
    setPingResult();
});

函数设置结果（）{
var elem=document.getElementById（'@spanID'）；
elem.innerHTML=''；
}
$（文档）.ready（函数（）{
setPingResult（）；
});

我用

函数设置结果（spanID）{
var elem=document.getElementById（spanID）；
elem.innerHTML=''；
}
$（文档）.ready（函数（）{
设置结果（“@spanID”）；
});

如果有人能解释为什么会这样，那就太好了

解决方案：

出于某种原因，如果我在document.ready块中而不是直接在JS函数中收集变量，则pass可以正常工作。因此,

function setPingResult() {
    var elem = document.getElementById('@spanID');
    elem.innerHTML = '<div class="glyphicon glyphicon-ok-sign" aria-hidden="true"></div>';
}

$(document).ready(function () {
    setPingResult();
});

函数设置结果（）{
var elem=document.getElementById（'@spanID'）；
elem.innerHTML=''；
}
$（文档）.ready（函数（）{
setPingResult（）；
});

我用

函数设置结果（spanID）{
var elem=document.getElementById（spanID）；
elem.innerHTML=''；
}
$（文档）.ready（函数（）{
设置结果（“@spanID”）；
});

如果有人能解释为什么会这样，那就太好了

我认为发生这种情况是因为

addressHolder

和

spanIDHolder

跨度对于每个字段都具有相同的id。javascript执行四次，每个字段执行一次，但是

document.getElementById（“addressHolder”）

将始终获取页面上具有该id的第一个元素。如果确保id是唯一的，它可能会工作。我建议您为零件而不是字段创建一个模板，并在其中的所有跨距中循环。这样，所有这些代码在页面中只包含一次。感谢您的输入！你对上的信息有什么了解吗？据我所知，目前无法准确控制通过迁移添加的字段的位置。但这与你的问题并不完全相关。您应该能够在

Views/EditorTemplates/Parts/MyPart.cshtml

中为您的角色呈现编辑器，就像这里的示例：我认为这是因为

addressHolder

和

spanIDHolder

跨度对于每个字段都具有相同的id。javascript执行四次，每个字段执行一次，但是

document.getElementById（“addressHolder”）

将始终获取页面上具有该id的第一个元素