2

在我的 MVC 视图中,我经常需要从 JavaScript 中引用各种元素,为此我为这些元素定义了 id 属性。这通常与更新各种容器元素内容的 Ajax 调用结合使用。

一个简短的例子(剃刀):

<table id="PersonList">
    ...
</table>
<div id="PersonDetails">
    <!-- This would be loaded dynamically using Ajax -->
    <input type="hidden" name="CurrentPersonId" value="@Model.PersonId">
    ...
</div>

这包含三个“魔术字符串”:“PersonList”、“PersonDetails”和“CurrentPersonId”。Ajax 调用可能如下所示:

$('#PersonDetails').load('@Url.Action("GetPersonDetails")', { PersonId: ... });

再次出现魔术字符串“PersonDetails”。

不好!

任何人都可以提出一些“最佳实践”来在一个地方定义这些魔法字符串并将它们用于 1)视图,2)最好是实现 Ajax 调用等的静态 JavaScript 文件,以及 3)CSS 文件?

我在想,也许 _Layout.cshtml 可以包含一个局部视图,该视图定义了该控制器甚至特定操作的魔术字符串。它将检查调用它的控制器和/或操作,并基于此调用适当的局部视图。我已经为 .css 和静态 .js 做了类似的事情,让我简单地添加 Person.css 并自动将其包含在 Person 控制器的所有视图中。

部分视图会做这样的事情:

@{
    const string PersonListId = "PersonList";
    const string PersonDetailsId = "PersonDetails";
    const string CurrentPersonIdName = "CurrentPersonId";
}
<script type="text/javascript">
    NamesAndIds = {};
    NamesAndIds.PersonListId = '@Html.Raw(PersonListId)';
    NamesAndIds.PersonDetailsId = '@Html.Raw(PersonDetailsId)';
    NamesAndIds.CurrentPersonIdName = '@Html.Raw(CurrentPersonIdName)';
</script>

这应该让 Razor 代码使用 C# 字符串 consts 生成适当的 HTML,并且静态 JavaScript 文件可以引用 jQuery 选择器等中的 NamesAndIds。(假设在局部视图中定义的 consts 将在调用视图中可用,我对此表示怀疑(避风港'还没有检查过)......我不知道如何在.css文件中使用它们。

有更好的建议吗?你如何处理这个问题?

4

3 回答 3

2

我希望有人能想出更好的东西,但这至少是一些东西。

在主(非部分)视图中,我在顶部有一个部分,它定义了我需要在 C#、HTML 和 JavaScript 中的多个位置使用的 id 和名称:

@{
    const string PersonListId = "PersonList";
    const string PersonDetailsId = "PersonDetails";
    const string CurrentPersonIdName = "CurrentPersonId";
}

在底部,我有一个脚本部分,将字符串分配给合适的命名空间容器对象:

<script type="text/javascript">
    MyNamespace = {};
    MyNamespace.Ids = {};
    MyNamespace.Names = {};
    MyNamespace.Ids.PersonList = '@Html.Raw(PersonListId)';
    MyNamespace.Ids.PersonDetails = '@Html.Raw(PersonDetailsId)';
    MyNamespace.Names.CurrentPersonId = '@Html.Raw(CurrentPersonIdName)';
</script>

在每个引入了我需要通过 id 或名称引用的其他项目的部分视图中,我添加了类似的代码来扩展MyNamespace.IdsMyNamespace.Names使用所需的字符串。

现在我可以在 Razor 视图代码中使用 C# 字符串常量来生成具有正确 id 和名称的标记,并且我可以编写引用MyNamespace.IdsMyNamespace.Names查找正确 id 和名称的常规静态 JavaScript 文件,例如在 jQuery 选择器中。

我还为我的 Ajax 调用使用的操作 URL 添加了类似的东西,并将它们放入MyNamespace.Urls

MyNamespace.Urls.GetPerson = '@Html.Raw(Url.Action("GetPerson"))';

这并不理想,但它直截了当,解决了散落在各处的魔法弦最紧迫的问题。它不会在编译时检测到错误,但是重命名项目将需要在一个地方重命名一个字符串,如果我重命名或拼写错误MyNamespace.Ids.Something,它至少会生成一个运行时 JavaScript 错误,可以在 JS 控制台或类似设备中看到.

于 2012-12-13T19:23:19.350 回答
1

对于操作和文件名(js、css),请使用T4MVC

T4MVC 是用于 ASP.NET MVC 应用程序的 T4 模板,可创建强类型帮助程序,从而消除在许多地方使用文字字符串。

我不会担心 ids 和 css 类名。

于 2012-12-13T08:54:09.710 回答
0

尝试定义自定义路线

PeopleLists/{PeopleList}/Person/{PersonID}

然后您的网址将如下所示

http://www.mysite.com/PeopleLists/Friends/Person/Pete
于 2012-12-13T08:56:26.153 回答