How to handle "magic strings" in MVC views, e.g. element id:s?

Question

In my MVC views I frequently need to reference various elements from JavaScript, and for that purpose I define the id attribute for those elements. This is often in conjunction with Ajax calls that update content of various container elements.

A short example (Razor):

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

This contains three "magic strings": "PersonList", "PersonDetails" and "CurrentPersonId". An Ajax call might look like this:

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

Again, the magic string "PersonDetails" appears.

Not good!

Can anyone suggest some "best practice" to define these magics string in a single place and use them in 1) the views, 2) preferably static JavaScript files that implement Ajax calls etc, and 3) CSS files?

I'm, thinking perhaps _Layout.cshtml could include an partial view that defines the magic strings for that controller or even for a specific action. It would examine what controller and/or action called it, and call the appropriate partial view based on that. I do something similar for .css and static .js already, letting me simply add Person.css and have that automatically included for all views for the Person controller.

The partial view would do something like this:

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

This should let Razor code use the C# string consts to generate appropriate HTML, and static JavaScript files could reference NamesAndIds in jQuery selectors etc. (Assumes that the consts defined in the partial view will be available in the calling view, which I doubt (haven't checked it yet)... How to use them in .css files I don't know.

Any better suggestions? How do you handle this problem?

score 2 · Accepted Answer · answered Dec 13 '12 at 19:23

I hope someone can come up with something better, but this is at least something.

In the main (non-partial) view I have a section at the top that defines the ids and names I need to use in multiple places in C#, HTML and JavaScript:

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

At the bottom, I have a script section that assigns the strings to suitable namespace container objects:

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

In each partial view that introduces additional items that I need to reference by id or name, I add similar code to extend MyNamespace.Ids and MyNamespace.Names with the required strings.

Now I can use the C# string constants in Razor view code to generate markup with the right ids and names and I can write regular static JavaScript files that reference MyNamespace.Ids and MyNamespace.Names to find the right ids and names, e.g. in jQuery selectors.

I also added similar stuff for action URLs that my Ajax calls use, and put them in MyNamespace.Urls:

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

It's not ideal but it's straightforward and solves the most pressing issue of magic strings scattered all over the place. It will not detect errors at compile time, but renaming items will require a single string to be renamed at a single place, and if I rename or misspell MyNamespace.Ids.Something it will at least generate a runtime JavaScript error that can be seen in a JS console or similar.

score 1 · Answer 2 · answered Dec 13 '12 at 08:54

1

For actions and file names (js, css) use T4MVC.

T4MVC is a T4 template for ASP.NET MVC apps that creates strongly typed helpers that eliminate the use of literal strings in many places.

I wouldn't worry about ids and css class names.

answered Dec 13 '12 at 08:54

Jakub Konecki

45,581
7
87
126

Funny, I wouldn't worry too much about actions because an incorrect name there would probably throw very visible and easy-to-track errors. Same with filenames in most cases. But ids and names quickly become a complete mess. Class names too. – Kjell Rilbe Dec 13 '12 at 09:16
The thing is you want to find those errors during compile time, not run time (add action parameters to the list as well). Are you going to do regression testing of the whole website with each release? – Jakub Konecki Dec 13 '12 at 09:52
Good point, but doesn't it apply just as much to problems with misspellings of magic strings in ids and names in view code and javascript code? Having a lot of hard coded explicit strings all over the place seems like an extremely bad practice. – Kjell Rilbe Dec 13 '12 at 09:58

score 0 · Answer 3 · answered Dec 13 '12 at 08:56

0

Try defining custom routes

PeopleLists/{PeopleList}/Person/{PersonID}

Then your URL would look like this

http://www.mysite.com/PeopleLists/Friends/Person/Pete

answered Dec 13 '12 at 08:56

Peter Morris

20,174
9
81
146

I might be wrong, but I think you're confusing object id:s with HTML element id:s, which is what I am talking about. – Kjell Rilbe Dec 13 '12 at 11:19

How to handle "magic strings" in MVC views, e.g. element id:s?

3 Answers3