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」の3つの「マジックストリング」が含まれています。Ajax呼び出しは次のようになります。

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

ここでも、マジックストリング「PersonDetails」が表示されます。

良くない！

これらの魔法の文字列を1つの場所で定義し、1）ビュー、2）できればAjax呼び出しなどを実装する静的JavaScriptファイル、および3）CSSファイルで使用するための「ベストプラクティス」を提案できますか？

おそらく_Layout.cshtmlには、そのコントローラーまたは特定のアクションの魔法の文字列を定義する部分的なビューが含まれている可能性があると思います。それは、どのコントローラーおよび/またはアクションがそれを呼び出したかを調べ、それに基づいて適切な部分ビューを呼び出します。私はすでに.cssとstatic.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.IdsしMyNamespace.Namesます。

これで、RazorビューコードでC＃文字列定数を使用して、適切なIDと名前でマークアップを生成できます。また、jQueryセレクターなどで、適切なIDと名前を参照MyNamespace.Idsおよび検索する通常の静的JavaScriptファイルを作成できます。MyNamespace.Names

また、Ajax呼び出しで使用するアクションURLにも同様のものを追加し、それらをMyNamespace.Urls次の場所に配置しました。

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

それは理想的ではありませんが、簡単で、至る所に散らばっているマジックストリングの最も差し迫った問題を解決します。コンパイル時にエラーは検出されませんが、アイテムの名前を変更するには、単一の文字列を1か所で名前変更する必要があります。名前を変更したりスペルを間違えたりMyNamespace.Ids.Somethingすると、少なくともJSコンソールなどで表示されるランタイムJavaScriptエラーが生成されます。 。

于 2012-12-13T19:23:19.350 に答える
1

アクションとファイル名（js、css）には、T4MVCを使用します。

T4MVCは、ASP.NET MVCアプリ用のT4テンプレートであり、多くの場所でリテラル文字列の使用を排除する強い型のヘルパーを作成します。

idとcssクラス名については気にしません。

于 2012-12-13T08:54:09.710 に答える
0

カスタムルートを定義してみてください

PeopleLists/{PeopleList}/Person/{PersonID}

その場合、URLは次のようになります

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