Creating a new project from the Web Application template is troublesome in deleting the unwanted files. Let's try to create a minimal Asp.net Core project (not an Empty project).
First thing, you have to create a Web API Asp.net Core project and then follow the following steps to complete the project.
1. Add HomeController class into Controllers folder and the code is shown as follow:
public class HomeController : Controller
{
// returns the default page.
public IActionResult Index()
{
return View();
}
//returns the contact us page.
public IActionResult ContactUs()
{
return View();
}
}
2. Modify the Configure() in Startup.cs
app.UseMvc(route =>
{
// adding a new route for http://localhost:xxx/contactUs
route.MapRoute(name: "contact_us",
template: "contactUs",
defaults: new { controller = "Home", action = "ContactUs" });
// if the path in the url is blank, call HomeController.
route.MapRoute(name: "default",
template: "{controller=Home}/{action=Index}/{id?}");
});
3. Add Index.cshtml and ContactUs.cshtml into Views\Home folder.
In the Index page, it looks like this:
@{
ViewData["Title"] = "Home";
}
<h1>MY APP</h1>
<h2>This is Home page</h2>
<a href="ContactUs">Jump to Contact Us page</a>
In the ContactUs page, it looks like this:
@{
ViewData["Title"] = "Contact Us";
}
<h1>MY APP</h1>
<h2>This is Contact Us page</h2>
<a href="">Jump to Home page</a>
4. Add _Layout.cshtml into Views\Shared folder and the content looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - My App </title>
<environment names="Development">
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
</head>
<body>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© 2016 - My App</p>
</footer>
</div>
<environment names="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
</environment>
<environment names="Staging,Production">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery">
</script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>
@RenderSection("scripts", required: false)
</body>
</html>
5. Add _ViewStart.cshtml into Views folder with the following content. Now, the Asp.net will merge all the views with this "_Layout.cshtml".
@{
Layout = "_Layout";
}
6. Add site.css into wwwroot\css folder with the following contents:
body {
font-family:Tahoma;
font-size: 12pt;
color: #757575;
margin: 0;
}
7. Press F5 to run your website.
8. You might notice that the site.css was not loaded. Let's continue by calling up the NuGet Package Manager. Search the "Microsoft.AspNetCore.StaticFiles" and include it into your project.
9. In Configure() in the Startup.cs file, add the following code before the app.UseMvc()
app.UseStaticFiles();
10. Press F5 to run your website and the css file will be loaded into the browser.
No comments:
Post a Comment