HTML and CSS Reference
In-Depth Information
@foreach (State s in Model)
{
<path id="@s.StateCode.Trim()" class="@s.StateName.Trim()" d="@s.Path" />
}
</svg>
6.
Now you'll need to implement a controller action that will display the map view.
open the
HomeController.cs
class and add the following namespace.
using Chapter
9
.Models;
7.
Then add the following method to the
HomeController
class. This executes a lINQ
query to extract all the records from the
State
table and provide it to the view.
public ActionResult Map()
{
StateDataContext DC = new StateDataContext();
var states = from s in DC.States select s;
return View(states);
}
8.
Now you'll add a link on the
Index.cshtml
page that will display the map page.
Go to the
Index.cshtml
file and add the following line at the beginning of the
body
element (just before the
svg
element):
@Html.ActionLink("Go to map", "Map", "Home")
9.
Press F5 to build and run the application. The index page will be displayed. Click the
“Go to map” link. You should see a map of the United States and all of the states are
filled with the default color (black).
Styling the State Elements
Now that all the mechanical work is done you can have some fun styling the
path
elements. As I demonstrated
earlier with the snowman image, each element can be styled using a special style sheet. You can also style them
dynamically using JavaScript. I will show you how to use solid-color fills, gradients, and background images to
format each element.
Using Basic Fill Colors
You'll start by adding some simple fill rules. Using a simple element selector you'll set the
stroke
color to black
and khaki for the
fill
color. Then, to add some variety and to demonstrate using attribute selectors, you'll
change the fill color based on the state code. The
id
attribute contains the two-letter state code and the
class
attribute contains the state name. Using the first letter of the
id
attribute you'll set the fill color as follows:
