How create a topBar with submenus in asp.net boilerplate template - asp.net

I'm trying to create a topbar with submenus using asp.net boilerplate template
but i can't do it.
the structure is
reports
aggregates
raws
Graphics.
I have this documentation http://aspnetboilerplate.com/Pages/Documents/Navigation
but does not work

It's included in startup template.
See this topic on the forum: http://forum.aspnetboilerplate.com/viewtopic.php?f=2&t=135

Related

Implementing the COREui Admin Template to match the demo

I am learning web development and I am trying to use the COREui 4.0.1 Bootstrap admin template in an existing Symfony 5.3 project instead of standard Bootstrap 5 components and utilities. I am trying to get the page to look like https://coreui.io/demo/free/3.4.0/.
The project was created using symfony new my_project_name --full. I added Bootstrap CSS with https://getbootstrap.com/docs/5.0/getting-started/introduction/#css and JS with https://getbootstrap.com/docs/5.0/getting-started/introduction/#bundle to my base.html.twig.
Steps that I took:
Create a new controller
Create an associated view using a twig template
Replaced the Bootstrap JS with https://coreui.io/docs/4.0/getting-started/introduction/#bundle and CSS with https://coreui.io/docs/4.0/getting-started/introduction/#css in my base.html.twig
What I was expecting:
When accessing the controller/view I would see https://coreui.io/demo/free/3.4.0/
The actual result:
Minor styling changes (from COREui rather than original Bootstrap) but no layout changes
The CoreUI CSS and JS that you have added to your project is to be used in the same way that you would use Bootstrap components and utilities i.e. adding to existing HTML elements.
Viewing the page source at the demo you provided at https://coreui.io/demo/free/3.4.0/ shows the HTML elements that you would need to have in your own project, that would then have CoreUI (in this case) CSS and JS components applied to them.
Using that demo https://coreui.io/demo/free/3.4.0/, if you wanted a side navigation bar you would need to have a HTML element like:
<div class="c-sidebar c-sidebar-dark c-sidebar-fixed c-sidebar-lg-show" id="sidebar">
<div class="c-sidebar-brand d-lg-down-none">
...

Blazor form validation Bootstrap intergration

I have some development experience with Razor and decided to give Blazor a try.
I ran into an already familiar problem - integrating validation with Bootstrap: Blazor validation result classes do not match Bootstrap's ones.
In Razor, I can override the generated class names by adding the following code to the _ValidationScriptsPartial.cshtml file:
const settings = {
valid: 'is-valid',
invalid: 'is-invalid'
/* other classes go here */
}
$.validator.setDefaults(settings)
$.validator.unobtrusive.options = settings
I tried to find solutions, but all I found was just copying of Bootstrap styles and replacing class names (something like this).
Is there some better way to do this, or will I have to duplicate all Bootstrap validation styles just to integrate it with the Blazor. I would like to avoid this, because when updating Bootstrap, I will have to do the same procedure again.
This problem seems even stranger when you remember that the default Blazor app template comes pre-configured to work with Bootstrap.
Just came across this section in the documentation.
And it worked for is-valid and is-invalid classes.
And I also found that wonderful article about how to implement custom ValidationMessage in 25-30 lines of code.

Change Bootstrap theme in MVC

I am creating MVC application by using bootstrap. However, I cannot change the bootstrap theme once the application is created.
When I create initial MVC with default bootstrap template, everything works fine. I check bootswatch.com or getbootstrap.com, there are many fantastic bootstrap theme. So I replaced the default "bootstrap.css" file by the one online.
The navbar looks strange, it collapsed, and all buttons, texts in a weird color.
I found there are bootstrap plugins in Visual Studio 2015, I can create the MVC by selecting different theme template, and its works fine. But if I change the bootstrap.css, the same problems happen.
Thank you for reading this.

Why is the Form tag in ASP.NET MasterPage breaking CSS formatting by bootstrap?

I am a new ASP.NET Webforms developer and I am trying to do a test application in ASP.NET where I can use it with Bootstrap. I already have a bootstrap template that I used with other projects and it works so well. However, when I integrated it with ASP.NET MasterPage, I got something really weired and I don't know why.
Kindly note that I am using Bootstrap 3.2 and I put all of the custom style of the template in another file called style.css.
Could you please help me in this regard and tell me how to resolve this issue?
A snapshot of the right style and the look and feel of the system (desired result):
A snapshot of the undesired result:
Here's a JSFiddle file that includes HTML and my css file, style.css. I appologize for the bad formatting and use of JSFiddle as I am totally new to this website.
All what I have done so far with ASP.NET MasterPage is copying whatever I have in the html page and embed it in the MasterPage within
<form runat="server"></form>
UPDATE:
How can I modify the CSS to recognize the main form tag in the ASP.NET MasterPage?

ASP.NET 2.0, AppTheme: How can we utilize AppTheme in best way for my ASP.NET WEBSITE

I am writing asp.net website which will going to be host on public network. I don't have very much knowledge about AppTheme specially utilizing theme, css and skin in asp.net 2.0.
Previously i have worked with asp and asp.net 1.0 where i only write css class and write attribute class="***" inside every control where i want to have css.
I don;'t know whether this is right practice with asp.net 2.0 because in asp.net 2.0 we have advance features like theme and skins.
So can i have help from you so that i can use theme, css and skin in best way . Also i would like to know how different is using css with asp.net 2.0 AS COMPARE WITH PREVIOUS VERSION.
Themes are made up of a set of elements: skins, cascading style sheets (CSS), images, and other resources. At a minimum, a theme will contain skins. Themes are defined in special directories in your Web site or on your Web server.
Here are some links from MSDN that will help you get started:
ASP.NET Themes and Skins Overview
How to: Define ASP.NET Page Themes
How to: Apply ASP.NET Themes
How to: Apply ASP.NET Themes Programmatically
Walkthrough: Creating User-Selectable Themes
Also, I would recommend Scott Allens article on Themes In ASP.NET 2.0 for a quick overview and some samples:
http://www.odetocode.com/articles/423.aspx
Your work shouldn't change that much (if you're working with a single theme).
Your CSS classes will stay as they are at the moment - they'll be used on the client side
You'll add skin files to your theme - these are used for server control style settings
The main difference is that you're able to define several different themes at the same time. Otherwise it depends on you how simple your HTML is. The best way is to not include any style information inside your ASPX files. You should use only use classes. Everything else should be styled within your CSS files.
Oh and BTW: all your CSS files within your App_Themes/Theme folder will be automagically added to your pages. You don't have to explicitly add them to your Master/Aspx page.

Resources