We were unable to load Disqus. If you are a moderator please see our troubleshooting guide.

Chris Berberich • 7 years ago

Thanks for the excellent post, I have been struggling trying to get something besides the few crappy examples from MS to work. Tried just about everything but been having issues with versions etc... This is the first example that really showed a method and actually worked. I just bought the pro so if you end up making an update to this without actually revealing the source I would be most appreciative. Thanks again

Miguel Veloso • 7 years ago

Hi Chris,

Thanks for your comment, glad it was useful to you!

I don't know if your pro version includes the Ajax variant, but from quick peek I took at it, it looks like running the node build-aspnet-core script from my repo https://github.com/mvelosop... with a little guidance from here: https://github.com/coreui/c..., could get you pretty close.

Hope this helps.

Peter Nath • 3 years ago

Please advise me, how to install CoreUI Pro (bootstrap) version to .Net Core MVC
Thanks

Yep. • 5 years ago

Hi Miguel,
I really liked this exercise in converting the HTML dashboard to ASP.NET Core. What I was most interested in was the breadcrumbs. Are they dynamic? I was thinking you had figured out a way to make them update and to the view currently selected. Is that correct, and I'm just not configuring the app correctly?

Guest • 6 years ago
Lloyd Carroll • 6 years ago

Found them here in his project

https://github.com/mvelosop...

Scott • 6 years ago

Miguel,

By far one of the best documented examples I have ever used. Great job!!!

Do you happen to have an edited version of the aspnetcore JS to support the latest version of CoreUI? (V2.1.4)

Thank you for posting this, it has saved me countless hours in development time.

Scott

Miguel Veloso • 6 years ago

Hi Scott,

Thanks for your comments!

I don't yet, I plan to update it but I've had just too much work 😅.

Best!

Diego Gutiérrez C. • 7 years ago

Hello, thank you so much for the post!.

Is it possible to use .Net Framework instead of .Net Core ?

Thanks in advance.

Miguel Veloso • 7 years ago

Hi Diego, thanks for your comments.

The general process should work, there are some differences, of course, but we're using just the most basic MVC features.

The mayor difference I can foresight is regarding the Identity views, but then again, it shouldn't be too difficult.

Any way, remember you can still build your MVC app in .NET Core, but targeting .NET Framework.

Hope this helps.

Musah Yakubu Yandar • 7 years ago

Wonderful work, considering the age of .Net Core 2.1. But I had problem with login. Login returns "Invalid login attempt" and in the VS 2017 output window, there was :

"CoreUI-Static> Request starting HTTP/1.1 GET http://localhost:51971/Identity/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js
CoreUI-Static> info: Microsoft.AspNetCore.Hosting.Internal.WebHost[1]
CoreUI-Static> Request starting HTTP/1.1 GET http://localhost:51971/Identity/lib/jquery-validation/dist/jquery.validate.js
CoreUI-Static> info: Microsoft.AspNetCore.Hosting.Internal.WebHost[2]
CoreUI-Static> Request finished in 72.4581ms 404
CoreUI-Static> info: Microsoft.AspNetCore.Hosting.Internal.WebHost[2]
CoreUI-Static> Request finished in 81.3288ms 404
CoreUI-Static> info: Microsoft.AspNetCore.Hosting.Internal.WebHost[2]
CoreUI-Static> Request finished in 11784.6357ms 200 text/html; charset=utf-8"

I don't know where I deviated from the tutorial to have the app expect to find the lib/jquery-validation/dist/ folder in Identity folder. The wwwroot contains the/lib folder with all the right versions of the script files. Sorry to bother you for help despite all you have given. Please help.

Miguel Veloso • 7 years ago

Hi Musah,

Thanks for your comment, would you mind creating an issue on GitHub?: https://github.com/mvelosop...

Thanks!

Jason LeBel • 7 years ago

Hi Miquel, thanks for the hard work in putting this together. Much appreciated.

Just curious, I didn't see any mention of the package.json file in the MVC project. Should this be copied over? Or are there things that shouldn't be included in the MVC version (I'm sure that the "build-*" under scripts wouldn't

Thanks

Miguel Veloso • 7 years ago

Hi Jason, thanks for your comment.

the package.json is not really needed in the MVC project, it's only used in the CoreUI folder to generate the dist folder that's then copied to the CoreUI.Mvc\wwwroot.

The CoreUI folder is not part of the VS Solution.

Hope this helps.

Chris Berberich • 7 years ago

Thank you again Miguel, Just out of curiosity do you do any private consulting? Cheers
CB

Miguel Veloso • 7 years ago

Hi Chris,

As usual, it depends on several factors but we should talk about it so, please, just send me an email so we can get into the details.

Thanks!

Best.

Chris Berberich • 7 years ago

Hello sir,
Let me see you far I can get on my own before I call you in , but just out of curiosity, was this UI supposed to support mobile? When I pull up the site on my phone very little seems to render.

Thanks if you know
CB

Miguel Veloso • 7 years ago

Hi Chris,

AFAIK CoreUI is supposed to be responsive but haven't tested it on mobile.

My main focus when I chose it was web development for desktop.

Best.

Chris Berberich • 7 years ago

Sorry for some reason I thought you were part of the CoreUI dev team... Since I have purchased it I would love to be able to use it, but the documentation on their site lacks anything to do with the PRO version and many of the links are dead, especially regarding things like the side bar which fail in my production environment.

Also was kind of hoping they had an example project for VS 2017. If you have any points for the PRO version I am all ears :)

Thanks
CB

Miguel Veloso • 7 years ago

Hi Chris,

Please, send me an email so we can get into the details.

Best.

Chris Berberich • 7 years ago

What is a good place to email you?

I did try and use the methods you provided above against the PRO version, but there are many more folders and it seems like multiple copies of the same .js at different levels. The docs are not very clear, but I was able to get a partial version integrated, I used your scripts (thanks) to get the .cshtml but it just seems like something is off. And I like to understand what it is exactly that I am doing..

I really want to use the tables and forms the COREUI provide, I did notice one thing, it doesn't seem like they have a datepicker or time picker.. I could be wrong

Thanks
CB

Miguel Veloso • 7 years ago

Hi Chris,

Just use the mail link under the picture on the top right.

Cheers,

Miguel.

LukeOlsen • 7 years ago

Thanks for the wonderful write-up. I'm curious about the "Pro" version as well. Would starting out with the expanded Basic version be better or worse than starting out with the Ajax one?
Thanks,
-Luke

Miguel Veloso • 7 years ago

Hi Luke,

Thanks for your comments.

I hadn't actually take a look at the AJAX version until now that you mentioned it and, from from 30.000 feet it looks like the ajax version would be a better starting point, since much of the work of steps 3.5 and 3.6 seems to be already done (at least most of it).

Anyway, you should be able to try the node scripts on the free AJAX version before committing to the Pro.

Hey, if you do, let me know how did it go, please!

Best.

LukeOlsen • 7 years ago

Thanks for the reply! I will look into your suggestions and play around. I got sidetracked on webpack and spent many days playing around with it. I do think your write-up addresses a gap in the web tech provided by Microsoft when it comes to the user-interface.

Miguel Veloso • 7 years ago

Hi Luke, thanks for your comments.

Anyway, take a look at the new Microsoft's Library Manager. It is a simple library manager (i.e. not a package manager) but if you just need to reference some JS libraries, what we usually do working with MVC, it might be a good fit and it's very simple and straight forward to use.

Hope this helps!

LukeOlsen • 7 years ago

Thanks Miguel. I will look into that!

jameshoughton • 7 years ago

Hi Miguel - do you have any plans to roll this out to the "Pro" version of the CoreUI dashboard?

Thanks.
James.

Miguel Veloso • 7 years ago

Hi James,

I don't have plans to to so, but if I did, I wouldn't be able to post the result, because I'd be violating the license.

Anyway you could also fork my repo https://github.com/mvelosop... following the same steps on this post.

You should get to what you want easily.

Best.

xnetdude • 7 years ago

Hi Miguel - do you have any plans to roll this out to the "Pro" version of the CoreUI dashboard?

Thanks.
James.

Giorgos Betsos • 7 years ago

Extremely useful tutorial on how to incorporate a template into a ASP.Net Core Web application. There is one part I didn't manage to reproduce: naming the partial views using a '-' symbol, e.g. '_app-header'. Visual Studio is complaining that '-' is not allowed. So I used '_AppHeaderPartial' instead as a name for the partial view.

Miguel Veloso • 7 years ago

Hi Giorgos, thanks for your comments.

That's a strange issue that's triggered my curiosity!, would you mind opening an issue in the repo and paste an image to investigate further?

Thanks.

Giorgos Betsos • 7 years ago

I've cloned your repo (https://github.com/GiorgosB... ) and created a web application that incorporates the template following the instructions. Can you first have a look at the video contained in the cloned repo I've made? The web application contained in the cloned repo has one additional issue: the layout of the Home/Index view is broken. I get the same issue when I load the first version of the project (AspNetCore2CoreUI.sln) from your repo.

Miguel Veloso • 7 years ago

Hi Giorgos,

I could see the error about the dash in the partial view name! I hadn't realized that, because I didn't create the partial views that way, I copied the html files from CoreUI and then renamed them.

On the other hand, since partial views basically start as an empty file, I usually create them with [Shift]+[F2] ( from extension https://marketplace.visuals... )

Regarding the Index view broken, the one in your repo is definitely broken, and it's also different from the original repo. I recommend having Beyond Compare ( https://www.scootersoftware... ) or similar in your toolkit, which is great to pinpoint situations like this.

Hope this helps.

Giorgos Betsos • 7 years ago

Miguel,

your comments have been very helpful to me, thanks a lot! BTW, I've been using CodeCompare which is also a very powerful compare tool.

Miguel Veloso • 7 years ago

Great! Glad to help!

Best.

maxmax • 7 years ago

Very nice piece of work! Thanks for the tutorial.
Wanna check, after i publish the project, im able to host it in my local IIS, the home page able to show. However, when i click any link from navbar, or the hearder bar, all other View()/Page cannot be show.. any idea?

Miguel Veloso • 7 years ago

Hi maxmax,

I found this: https://docs.microsoft.com/...

I haven't tried it but it looks like it's the way to go.

Hope this helps.

Miguel Veloso • 7 years ago

Hi maxmax, thanks for the comments.

Would you post the issue in GitHub, please? https://github.com/mvelosop...

jameshoughton • 7 years ago

Hi - great step-by-step tutorial for a newbie to asp.net core (not to dev) until I get to this :-

3.2 - Create a generic controller for CoreUI views
Next we’ll create a simple controller to display any of the CoreUI Razor views (*.cshtml), that just receives the name of the view to display.

Can you explain how this is performed?

Thanks.

Miguel Veloso • 7 years ago

Hi James, thanks for the comment!

It's actually pretty simple, once you are clear on how MVC "magic" works.

I guess you are used to actions returning just View(), right?

What happens under the covers is that the framework (well, the view renderer), by convention, renders the view with the same name as the action, hence, when you create a view with the proper name, everything just works.

However, there's an overload for the View() method that accepts the name of the view to render, instead of just following the name convention (try hitting [F12] with the cursor over the View() method).

So View() can actually render any view you specify, if you only pass a name, the view renderer searches for that view, first in the controller's view folder, then in the shared folders etc., but you can also specify a complete path, including the extension and that will be the rendered view, so you get the idea.

So what I'm doing here, instead of creating 39 action, is just passing the view name in the route (e.g. /CoureUI/charts) and passing that name to the view renderer. Try passing /CoreUI/charts2 in the browser.

Hope it's clearer now, but just let me know otherwise.

Best.

James • 7 years ago

ps. It may help if you were to post your whole project to github, that way I (we) could inspect your code to see what's missing/clarify any syntax.

Miguel Veloso • 7 years ago

There it is, in the top of the post, the "Source Code" section ;-)

James • 7 years ago

Doh! It's getting late! Thank you!

James • 7 years ago

HI Miguel - thank you so much for the quick response, it's massively appreciated. You're making a real difference to my understanding of asp.net core (i've been a dev for 25 years but mostly desktop).

Do I need to actually create a new "Controller" class and if so what code goes inside it?

Sorry to burden you on a Sunday!

Thanks again, your long and hard work on this article is very much appreciated.

James..

Miguel Veloso • 7 years ago

Hi James,

Yes, you do have to create a new controller class.

There's a lot of details there, but I suggest you follow this tutorial first: https://docs.microsoft.com/... and then check the MVC fundamentals page: https://docs.microsoft.com/....

If you are coming from the desktop then you'll probably need a bit of http/html fundamentals, bit by bit, because it'll seem overwhelming.

The most important part now is that you understand how data in a form reaches an action, so I'd begin with https://developer.mozilla.o... and then https://developer.mozilla.o....

Bookmark the Mozilla Developer Network (MDN) https://developer.mozilla.org, that's probably THE Internet reference for web developers.

So... you have some homework to do ;-)

Best.

James • 7 years ago

HI - thank you again.

I think I (or Microsoft) have complicated this further but having two different types of Razor pages, asp.net Razor pages and MVC Razor pages. I am using the former and I realise this differs in many ways from the MVC flavour.

I am very familar with HTML etc so that's not an issue.

Thank you again.
James.

Miguel Veloso • 7 years ago

Just consider Razor pages as another tool, like a hammer and a screwdriver, each one has its intended application.
You can probably "drive" a screw with a hammer, but... 😉

Hakan Lindestaf • 7 years ago

Very nice write-up! Just a small typo at the top, says MAY-2017, should probably be 2018. Thanks! (also would be nice with the comments section in English)

Miguel Veloso • 7 years ago

Hi Hakan, thanks for the comment and the heads-up!

Both issues have been addressed now, thanks!