用于引用MVC3中Javascript中的HTML元素的结构

Structure for referencing HTML elements from Javascript in MVC3

本文关键字:HTML 元素 结构 中的 Javascript 引用 MVC3 用于      更新时间:2023-09-26

我们有一个ASP.NET MVC3项目。我们使用ajax调用填充网站的几个部分。假设我们在cshtml中有一个div,我们想在其中放置一些搜索结果。

<div id="SearchResult" />

我们已经为我们想要在Javascript文件中引用的所有元素创建了一个包含常量的列表

var selectors = {
    SearchResult: '#SearchResult',
    ...
};

当我们想要访问div时,我们在Javascript中使用selectors.SearchResult

到目前为止,一切都很好。但是,在c#世界中,我们有强大的绑定、编译时警告等,我们认为这里的耦合有点松散。如果我们想重构我们的div id,我们必须非常小心地找到所有引用并更新它们。

是否有保持javascript和HTML标识符同步的良好做法?有没有将所有div id提取到javascript文件中的模板/脚本?

向视图添加脚本

<script type="text/javascript">
    window.viewConfig = { searchResult: '#SearchResult' };
</script>

让你的JS文件读取这个window.viewConfig.searchResult


你也可以进一步,将id存储在一个变量中并使用它

@{
    var myId = "SearchResult";
}

然后使用@myId,使div为

<div id="@myId"></div>

脚本将是

<script type="text/javascript">
    window.viewConfig = { searchResult: '#@myid' };
</script>