Powerful way to Create Web App in Asp.net Core MVC
In this blog i will teach you Asp.net Core MVC with Controller and Views.
I recommend you must read the article before starting Web App:
Now, Lets start making web app in Visual Studio
Get Started .Net Core MVC
Open Visual Studio File->New Project , Then Select .Net Core & Asp.net Core Web Application ,Name your project.
Now you will select Web Application(Model-View-Controller)
Press Ctrl+F5 your web page will open with http://localhost:53010/ url in the browser.
Add Controller in .Net Core MVC
Go to solution explorer and right click on controller folder and Add New Item
Select MVC Controller Class and rename according to you.
Open MVCAPPController Controller Class and add below code to it.
// GET: /MVCAPP/
public string Index()
{
return "This is my default action...";
}
// GET: /MVCAPP/Welcome/
public string Welcome()
{
return "This is the Welcome action method...";
}
After pasting this code press Ctrl+F5 ,You will see a browser with this URL http://localhost:53010/ and now we want to see the page we have created for new controller.
For this we will add MVCAPP of MVCAPPController class like http://localhost:53010/ MVCAPP.This will call a view MVCAPPController class Index (by default)
For accessing Welcome You have to change the URL Like http://localhost:53010/ MVCAPP/Welcome
I hope you know the routing call for MVC .
app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=Index}/{id?}");
});
This is the route how MVC App flow. http://localhost:53010/ MVCAPP/Welcome.In above code Controller is MVCAPP and action is Welcome
This was all about Controller adding.
Add View in .Net Core MVC
Before adding View in project revert your all code of Controller to.
public IActionResult Index()
{
return View();
}
- Right click on the Viewsfolder, and then Add > New Folder and name the folder MVCAPP.
- Right click on the Views/MVCAPP folder, and then Add > New Item.
- In the Add New Item – MVCAPP dialog
- In the search box in the upper-right, enter view
- Tap MVC View Page
- In the Namebox, change the name if necessary to cshtml.
- Tap Add
Replace the code with this code
@{
ViewData["Title"] = "Index";
}
<span class="hljs-tag"><<span class="hljs-name">h2</span>></span>Index<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>Hello from our View Template!<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
And navigate to this Url http://localhost:53010/ MVCAPP
You can also change the size of the browser it will fit accordingly.
Change the Title and Menu Link
</pre>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - MVCAPP</title>
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a asp-area="" asp-controller="MVCAPP" asp-action="Index" class="navbar-brand">CoreWeb</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© 2017 - CoreWeb</p>
</footer>
</div>
<environment include="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
</environment>
<environment exclude="Development">
<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"
crossorigin="anonymous"
integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
crossorigin="anonymous"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
</script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>
@RenderSection("Scripts", required: false)
</body>
</html>
<pre>
Adding Model to .Net Core
The ASP.NET Core 2.0 templates contain the Models folder.
Right-click the Models folder > Add > Class. Name the class app and add the following properties:
namespace CoreWeb.Models
{
public class app
{
public int ID { get; set; }
public string App_Name { get; set; }
public string App_Type { get; set; }
public decimal Price { get; set; }
}
}
Now we will add controller
After adding controller these file will be created
Added DbContext : ‘\Data\CoreWebContext.cs’
Added Controller : ‘\Controllers\appsController.cs’.
Added View : \Views\apps\Create.cshtml
Added View : \Views\apps\Edit.cshtml
Added View : \Views\apps\Details.cshtml
Added View : \Views\apps\Delete.cshtml
Added View : \Views\apps\Index.cshtml
the automatic creation of the database context and CRUD (create, read, update, and delete)
when you run this program it will show error not connected to the database for this you need to run these command
Install-Package Microsoft.EntityFrameworkCore.Tools
Add-Migration Initial
Update-Database
In Package Manager Console
Your database is created with model you made.
And now you can your run this project.
This is the final step of Mvc .Net Core.
Is this technology .Net Core 2.0 is easy to use ? Please Comment.
About the Author
Prashant Goswami
I am the blog writer who will teach how to love programming. My experience in programming is about 6 years. And i am the lover of programming , so i will make you people.