I just downloaded ASPNETZERO .Net Core 1.1, version 4.1.4 from ASPNETZERO. When I open and run the solution, the UI is not working at all, all the CSS/JS references are missing. The "lib" folder under the wwwroot folder is completely missing. I rechecked my ZIP file download and it does not contain that folder either. Is this normal? How do I get all the UI components into the lib folder? What do I need to copy from Metronic files?
20 Answer(s)
-
0
Hi,
which version did you download, Angular or JQuery?
-
0
<cite>alirizaadiyahsi: </cite> Hi,
which version did you download, Angular or JQuery?
JQUERY MVC template
-
0
Same issue with Angular in the Public site project. Some of the files look to be under "browser_components" but not all.
-
0
Actually this is not normal. When we tested, we did not find that issue. Could you share some screenshoot from your visual studio solution explorer(not from ZIP, because, some of UI components restoring after opening project in visual studio)?
-
0
This is from Web.Public in the Angular project
-
0
Hi @Ribbo,
Can you try to restore bower packages using Visual Studio ? Visual Studio sometimes cannot restore bower packages.
Just right click on Bower folder under Dependencies and click Restore Packages. If that does not work, closing & opening VS can help as well.
Thanks.
-
0
You are 100% right, I did not have Git installed on the machine and Bower was throwing an error due to this trying to restore. Once Git was installed Bower loaded all required components. I am sure its the same issue for the other person above.
Thanks!
-
0
<cite>Ribbo: </cite> You are 100% right, I did not have Git installed on the machine and Bower was throwing an error due to this trying to restore. Once Git was installed Bower loaded all required components. I am sure its the same issue for the other person above.
Thanks!
I do not use GIT for my source control. I am using TFS. Do I still need to use the same steps to resolve my issue?
-
0
Bower requires node, npm and git.
-
0
<cite>alper: </cite> Bower requires node, npm and git.
Thanks! This tip: <a class="postlink" href="https://stackoverflow.com/a/43078816">https://stackoverflow.com/a/43078816</a>, fixed my issue! All packages are installed now.
-
0
Thanks @exlnt :)
-
0
@Support Team
Can you provide step by step guide on how to add new UI components into .NET Core solution? I know how to do it in the .NET5 MVC solution. How do I bring in additional Metronic UI components into the .NET Core solution? If you just list out the high level steps that should help.
-
0
Hi,
You have two options here.
You can copy the library from mentronic files to solution and reference it in the page you are going to use. You can also include it in the bundleconfig.json if you are going to use this library in more than one page.
You can install this library as a bower package. Open Dependencies of your MVC project in solution explorer. Right click on bower and select "Manage Bower Packages". Then find the library you are looking for in bower. It will install library files under lib folder. Then you can include it into your view just like in the step 1.
Normally using step 2 is better but sometimes you cannot find some libraries in bower or the one in bower might not work with metronic. In those cases you can apply step 1.
Thanks.
-
0
Thanks!
I cannot seem to make this work. I have tried the following steps.
- Copy metronic plugin folder to wwwroot/lib folder.
- Edited bundleconfig with new section named "EXNTCssBundle" and "ExlntJSBundle"
{ "outputFileName": "wwwroot/view-resources/Areas/Nursing/Views/EXLNT/_ExlntCustomCSSBundle.css", "inputFiles": [ "wwwroot/lib/datatables/datatables.min.css", "wwwroot/lib/datatables/plugins/bootstrap/datatables.bootstrap.css" ] }, { "outputFileName": "wwwroot/view-resources/Areas/Nursing/Views/EXLNT/_ExlntCustomJSBundle.js", "inputFiles": [ "wwwroot/lib/datatables/datatables.min.js", "wwwroot/lib/datatables/plugins/bootstrap/datatables.bootstrap.js" ] }- Updated the Area/Nursing/Views/Layout/_Layout cshtml file with links to the new Exlnt bundles.
- Run app, no error reported on chrome console and datatables plugin not working!
-
0
I just added the script and css file references for the new plugin directly on my editmodal.cshtml and they still dont work! What am I missing here?
-
0
Hi,
Can you share the lines you have added to _Layout cshtml ?
Thanks.
-
0
<environment names="Development"> .... .... @*EXLNT*@ <link rel="stylesheet" href="~/view-resources/Areas/Nursing/Views/EXLNT/_ExlntCustomCSSBundle.css" asp-append-version="true" />Then in the "scripts" section, just above all the "Abp" script entries, I added the lines shown below.
<environment names="Development"> .... .... @*EXLNT*@ <script href="~/view-resources/Areas/Nursing/Views/EXLNT/_ExlntCustomJSBundle.js" asp-append-version="true"></script>I also added the "min" entries under the "staging, production" sections.
-
0
Hi,
You also need to include below script files to your cshtml file.
"wwwroot/lib/datatables/datatables.min.js", "wwwroot/lib/datatables/plugins/bootstrap/datatables.bootstrap.js"As you can see here <a class="postlink" href="https://github.com/aspnetzero/aspnet-zero-core/blob/dev/aspnet-core/src/MyCompanyName.AbpZeroTemplate.Web.Mvc/Areas/AppAreaName/Views/Layout/_Layout.cshtml#L141">https://github.com/aspnetzero/aspnet-ze ... shtml#L141</a>
We add scirpt files one by one for development environment. We add bundled scripts for Production or Staging environments.
Thanks.
-
0
Yes I'm aware of that. I added the min file (js) file entries, into _ExlntCustomJSBundle.js, but still my plugins are not working.
-
0
Hi @exlnt,
If you see that those files are loaded via browser's network tab, I don't know what we can do about it. If it is loading properly, problem might be related to your usage of code.
Thanks.
