How to show other model column in Razor view?

Currently i'm able to show all column in razer view from userRole model. Just curious if i like to show the SiteName column in UserRole Razor view, instead of showing SiteID, is it possible? I know it can be done via custom view model, but is it a must? Please correct me if i'm wrong!

UserRole Model:

    public int UserID { get; set; }
    public string UserName { get; set; }
    public int SiteID { get; set; }
    *No SiteName column here....so i only can show SiteID in razor..

Site Model :

public int SiteID { get; set; }
public string SiteName { get; set; } <<-- the column i want..

Controller:

public ActionResult Index()

    {
         //need join table here perhaps?

         return View(db.User_Role.ToList());
    }

Razor View:

@model IEnumerable<FAB_Portal_POC.Models.UserRole>

<table class="table table-striped table-hover">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.UserName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Role)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.SiteID)
        </th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.UserName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Role)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.SiteID) <<-- i want site name.
        </td>      
    </tr>
}
</table>