MVC Routing News Pages - asp.net-mvc-4

Question

I have managed to get my MVC project to present a list of news items in an SEO friendly manner:
/News/ - to present the list
/News/NewsItem/id/news-item-title - the individual news item
What I would really like is:
News/id/news-item-title
Exactly how Stackoverflow presents its questions.
However, I cant seem to get my head around how to do the routing to differentiate between two actions with the same controller action name (Index).
Any suggestions would be appreciated.
EDIT:
Here's my routes config:
routes.MapRoute(
"News",
"News/NewsItem/{newsId}/{newsTitle}",
new { controller = "News", action = "NewsItem", newsTitle = UrlParameter.Optional },
new { newsId = #"\d+" }
);
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "SkipHire", action = "Index", id = UrlParameter.Optional }
);
EDIT 2:
This is what I've amended everything to:
Route
routes.MapRoute(
"News",
"{controller}/{id}/{newsTitle}",
new { action = "NewsItem", newsTitle = UrlParameter.Optional }
);
Controller
public class NewsController : Controller
{
public ActionResult Index()
{
var q = _ctx.tblNews.OrderBy(x => x.newsCreateDate)
.Where(x => x.WebsiteID == 2).ToList();
return View(q);
}
public ActionResult NewsItem(int newsId, string newsTitle)
{
return View();
}
}
View - Index (Segment)
<table>
#foreach (var x in Model)
{
<tr>
<td>#Html.ActionLink(x.newsTitle, "NewsItem", new { newsId = x.newsID, newsTitle = x.newsTitle.ToSeoUrl() })
</td>
</tr>
}
</table>
Actionlink produces: News/NewsItem?newsId=3&newsTitle=my-news-item
I want: News/3/my-news-item

Answer 1

One way you could do this is to introduce an additional route into the route configuration
RouteConfig.cs:
routes.MapRoute(
name: "News_seo_friendly",
url: "{controller}/{id}/{seo}",
defaults: new { action = "NewsItem", seo = UrlParameter.Optional }
);
*Note the action value in this route. You will need a corresponding action method on that controller.
Also, since this route is more specific it goes above the existing, more generic route(s)
An Alt RouteConfig.cs that might be safer:
routes.MapRoute(
name: "News_seo_friendly",
url: "News/{id}/{seo}",
defaults: new { controller = "News", action = "NewsItem", seo = UrlParameter.Optional }
);
NewsController:
public ActionResult NewsItem(string id)
{
return View();
}
Another way you could do this is to make "News" its own Area within the project. This gives you the opportunity to isolate your routes, if your app is larger, and flexibility for your controller name(s).
Edited after feedback
Wanted to draw attention to the fact that the parameter name on the controller's NewsItem() method should match what is being declared in the route settings. In the above scenario, url: "{controller}/{id}/{seo}"
should match the parameter name in NewsItem(string id)...or vice-versa.