I have been prototyping a web application using VS2013 with .aspx pages and vb.net, using the metronic theme and things have been going well. I use Metronic datatables, ajax calls, google charts and morris.js. I now need to start looking at migrating my project into the ASP.NET Zero framework and this looks to be quite complicated! I expect I will have a lot more questions, but here are a few I'd like answering to get me started.
A lot of this is very new to me, but I am trying to move away from the traditional .aspx web page coding.
Thanks for your reply DoubleDP,
Instead of L("string") if I just use "string" the project will not run/build and the editor shows a syntax error. If I use L("Microsoft") then the menu shows [Microsoft] instead of just Microsoft !?
Yes, the adjustment to C# may be a little tricky, but most of my custom code is JavaScript so I should be able to survive. I do have some WebService .asmx in my prototype that returns JSON data if you pass it the name of a .sql file or SQL query and I think what I will do with that is keep it as a separate project in VB.NET.
My project is fairly simple, so I'm hoping most of ASP.NET Zero I can leave alone and not have to worry about learning how it intricately works, or have to learn C# too much, I just want to throw in a good few dozen pages into the Mpa model each linked by the menu system or urls within each other. In my prototype, I centralised the whole navmenu into a single .ascx User Control and called this from each page, with a tiny JavaScript running on each page to set the desired menu item as "active". I am glad to see that the ASP.NET Zero project centralises the menu and takes care of this for me.
I hope some of the more advanced forums users might help us in overcoming some of these first hurdles in using ASP.NET Zero.
Thanks!
Andy
I prefer the original metronic theme presentation of keeping the icons for navigation sub-menu/sub-items at the same size and colour throughout the entire navigation menu, but ASP.NET Zero seems to shrink icons slightly for sub-items and also change to same colour as the sub-item font.
How do I change this to keep sub-item icon same as parent/top-level style?
Thanks!
I think I've solved this by poking around with the page inspector. I have added;
font-size: 16px; color: #a7bdcd;
to the simple-line-icons.min.css.
looks much better!
I have noticed that when I publish my website to an IIS server (local or remote) there seems to be an issue that prevents the site from locating some of the .png files used in the css. When I build/run the project in VS using the inbuilt IISExpress, everything renders correctly and using Google Chrome to inspect the page I see that the menu-toggler in the light.css is resolved to "http://localhost:6234/metronic/assets/admin/layout4/img/sidebar-toggle-light.png".
However, when the site is published to IIS, the debug tools in chrome show error 404 when trying to find the .png files for the menu-toggler and the close button on the sample note portlet. Using the Google Chrome Page inspector the url it is looking for do not exist:
"http://mysite.mydomain.com/Bundles/img/sidebar-toggle-light.png" "http://mysite.mydomain.com/Bundles/Mpa/img/remove-icon-small.png"
In fact, you can see the second url there is also different from the first, even though the .png files are in the same folder. I verified that both files exist by typing in their URL manually as below, and they exist.
"http://mylivesite.mydomain.com/metronic/assets/admin/layout4/img/sidebar-toggle-light.png" "http://mylivesite.mydomain.com/metronic/assets/global/img/remove-icon-small.png"
So there doesn't seem to be a file missing/publishing error - more some sort of code/IIS issue with how the 'bundle' config works?
What gives?
I just noticed that this issue also manifests itself in the ASP.NET Zero demo we created, so I am glad it is not something I am doing wrong.
I have requested access to the GitHub repository so that I can follow this issue.
Hi,
In my web forms based version of my application, I have centralised my navigation menu by having the code for it inside a User Control, and I reference the UC on each page. This saves greatly when adding new pages/menu items as I do not need to amend all the existing pages. I realise that ASP.NET Zero accomplishes this centralisation for me, which is a very good thing, however I wish to amend the code for the whole menu tree that gets generated.
Specifically, I wish to be able to identify LI items in the menu system by assigning them an ID=value, so that I can do something with the menu in client-side JavaScript once the page is ready. The code snippet below is what I want to be able to do...
<li class="nav-item" id="menu-parent01">
<a href="javascript:;">
<i class="icon-puzzle"></i>
<span class="title">Parent 01</span>
<span class="arrow "></span>
</a>
<ul class="sub-menu">
<li class="nav-item start" id="menu-parent01-child01">
<a href="/parent01/child01.aspx">
<i class="icon-grid"></i>
Child 01</a>
</li>
<li class="nav-item" id="menu-parent01-child02">
<a href="parent01/child02.aspx">
<i class="icon-globe"></i>
Child 02</a>
</li>
<li class="nav-item" id="menu-parent01-child03">
<a href="parent01/child03.aspx">
<i class="icon-screen-desktop"></i>
Child 03</a>
</li>
Why? In short, I am dynamically adding sub-items to the Nav-Menu using JavaScript, to represent temporary/dynamic pages that exist in my application when the user drills through into data. For instance, when they drill through a list of computer names they get a page containing details of that computer, and the Nav Menu is modified to include a sub-menu item which shows the name of the computer they are looking at.
So, where do I start? I can see that the mpaNavigationProvider.cs provides for a "customData" parameter? Is this where I might be able to add an ID when I perform the .AddItem(new MenuItemDefinition...)
Thanks,
Andy
OK, so I might be on the right track - but can I actually use the customData parameter to add an id="myid" inside the <li> tag, or is customData simply a way of adding attributes in the menu object and not a means to output something in client facing html code?
I wish to be able to use JavaScript document.getElementById function to find an <li> in the DOM, by id, so that I can re-use my existing JavaScript code to inject a sub-item into the menu when the page has loaded. Here is my working function below;
<script type="text/javascript">
// Add a Dynamic Menu Item linking back to the parent page and make it active.
var li = document.getElementById('menu-parent01-child01');
var dynul = document.createElement('ul');
var dynli = document.createElement('li');
dynul.classList.add('sub-menu');
dynli.setAttribute('id', 'menu-parent01-child01-temp01');
dynli.classList.add('active');
dynul.appendChild(dynli);
li.appendChild(dynul);
dynli.innerHTML = '<i class=icon-bar-chart></i>MenuName';
</script>
The function above would add a new menu item to the child01 menu item in the menu code I previously posted. or is there an alternative, more modern/MVC solution to finding the current menu item using the abp.application.navigation classes and then the page view adding in a new menu at runtime?
Thanks for your support.
Any idea?
I'd like to integrate the JQuery.CounterUp.js module into my solution. I had this working when I was using webforms, but I am struggling with ASPNETZERO.
I have figured out that I should include a @section Scripts in my view page, and I do have some working code in there that uses AJAX to retrieve some data and populate this into the DOM. However, I do not seem to be able to get the CounterUp module working. I added the script src entries for the waypoint and counterup js files into my script section and I have a span class=counter in my DOM, but when I run the page I get:
Error: Unable to get property 'replace' of undefined or null reference
That error is coming from the counterup.js.
Help!?