javascript - 在 MVC3 中从 Javascript 引用 HTML 元素的结构

Question

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

<div id="SearchResult" />

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

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

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

到目前为止，还不错。但是来 self 们有强绑定(bind)、编译时警告等的 c# 世界，我们认为这里的耦合有点松散。如果我们想要重构我们的 div id，我们必须非常小心地找到所有引用并更新它们。

是否有任何好的做法可以使 javascript 和 HTML 标识符保持同步？任何用于将所有 div id 提取到 javascript 文件中的模板/脚本？

Answer 1

向 View 添加脚本

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