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:

  1. Prerequisties of net Core
  2. Features of Asp.net Core

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>&copy; 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.

  •  
    36
    Shares
  • 36
  •  
  •  
  •  
  •  
  •  

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: