ASP.NET, Twitter.Bootstrap.MVC4, ASP.NET and Menus using Navigation Routes - asp.net-mvc-4

I installed Twitter.Bootstrap.mvc4 in a VS2010 project. I also installed Glimpse.
I found that the Menus using Navigation Routes that the Twitter.Bootstrap.mvc4 offers is "broken" by Glimpse. In the NavigationExensions.cs file, the RouteCollection is wrapped in Castle proxies causing the variable navigationRoutes to always return 0.
public static IEnumerable<NamedRoute> GetRoutesForCurrentRequest(RouteCollection routes,IEnumerable<INavigationRouteFilter> routeFilters)
{
var navigationRoutes = routes.OfType<NamedRoute>().Where(r=>r.IsChild==false).ToList();
I can see the information in the watch window and even get the information to show in the Immediate window using "((Castle.Proxies.RouteProxy_1)routes[5]).__target". So I thought to loop through the routes and looked for a named route. However, I don't know what to do to get the references I need to access the proxies. The Castle code is buried in the Glimpse.Core library.
I uninstalled Glimpse to make sure that was causing the problem (it is).

There is currently an issue which reflects the same problem, albeit in a different context.
There is currently no real fix, since GetRoutesForCurrentRequest checks for NamedRoute instances and Glimpse uses proxies, but you can always disable a part of Glimpse so that the navigation issue is fixed in the meanwhile.
To make it work again, you
must disable the RouteInspector of Glimpse
(optionally) remove the Routes tab from the Glimpse dashboard, since it will now show only partial information due to the missing inspector. Although this option is not required and the Routes tab might still show you some information you might want to see.
This can be done in the configuration section of Glimpse
<glimpse defaultRuntimePolicy="On" endpointBaseUri="~/Glimpse.axd">
<inspectors>
<ignoredTypes>
<add type="Glimpse.AspNet.Inspector.RoutesInspector, Glimpse.AspNet"/>
</ignoredTypes>
</inspectors>
<tabs>
<ignoredTypes>
<add type="Glimpse.AspNet.Tab.Routes, Glimpse.AspNet"/>
</ignoredTypes>
</tabs>
</glimpse>

Related

Vue JS keep tab component alive

All,
I need some help making keepAlive in VueJS3 composition api work.
I have a page to configure profiles ( business feature ) where I have some tabs created dynamicly based on user selection from a drop down.
Here is my profile model :
So Each tab is an entry to the realm attribute array.
The VTAB component I am using is from vuero library : https://vuero.cssninja.io/
That I am using this way :
While making modifications, the user should be able to switch tabs without losing the modification he made while switching tabs.
From official documentation, keepalive is the directive to be used for such use case. Unfortunatly I am not able to make it work. I lose all the modifications when I switch the tab.
Do you have any suggestions, to make this work .
Thanks A lot.
It seems to be a limitation from vuero component.
I went with a cutsom solution. By listening on the onBeforeUnmont

Refresh button in React-admin

I'm trying to access the refresh button in react-admin project. I tried using getElementsbyClassName it returns HTMLComponents Object but it isn't accessible i.e I can see the component on printing it to console but isn't accessible by code. Is there a way for me to disable this refresh button wherever I want?
I'm not sure the exact use case here, but you can create your own custom AppBar that renders essentially whatever you want: https://marmelab.com/react-admin/Theming.html#replacing-the-appbar.
also see this GitHub issue that mentions removing it entirely: https://github.com/marmelab/react-admin/issues/3383
Within your custom AppBar you could have some logic checks within your custom AppBar if you know ahead of time when you'll want it disabled (like on a certain page/component).
If you need it to be more dyanimcally disabled, you could probably have a very high-level context/state to control that as well..
**NOTE: I have built a custom AppBar before, but I haven't done any selective rendering or disabling within it. So, I can't guarantee that this is exactly correct, but it fits with other custom components I've built.

Bootstrap tooltip not showing in ASP.Net MVC application

I've got a rather weird scenario going on here. I am trying to add tooltips to an existing ASP.Net MVC application in which I'm upgrading Bootstrap to 4.6.2. The upgrade was very smooth with no complications; I just want to replace the default display of titles with the nicer looking tooltips, but for some reason they're not appearing. I tried to simplify things by creating a new view to isolate the problem, and still no tooltip. I tried again with completely new solution, and wouldn't you know it, it works! So my question isn't "how do I create tooltips", but "how can I debug what's going on in the failing project?"
Here's what I've discovered so far. I believe you can see everything that's relevant in this screenshot of the nearly-empty view. All the included script files are there in the right order, my script is there, initializing the tooltip, and there are no messages in the console. When I hover over the link, a new <div> element is added to the DOM. In DevTools, I use the arrows to expand the tree, showing everything in the tooltip. The .fade:not(.show) CSS selector is the reason I don't see it. In the working solution, the show class is properly added to the tooltip's <div>.
So, could there be some setting in the existing application preventing the addition of the show class? Is something failing in the tooltip code,causing it to never add the show class without reporting errors? How should I continue debugging this? I tried stepping through the bootstap.js file, but being a JS noob, I'm getting a little lost. The screenshot is from Chrome, but I see the same behavior in Firefox.
This turned out to be one of those embarrassing oversights. My BundleConfig.cs file was still pointing to old Javascript files that were still hanging around after the upgrade. I should have seen it in the version numbers in the <script> tags.

The new <SaveContextProvider>, deprecated-message of React-Admin

I have this message in the Chrome console since I updated react-admin to version 3.10.0, I tried to dig into the document but can't find any information or example. Anyone encounter this, or luckily any members of react-admin seeing this, please help!
Edit or Create child components must be used inside a <SaveContextProvider>. Relying on props rather than context to get persistence related data and callbacks is deprecated and won't be supported in the next major version of react-admin.
I have a form component, using <SimpleForm>, that is used in <Edit> and <Create> components. There is no warnings when app is running.
But I have the same issue when unit tests are running on the form component. I tried to wrap it inside a <SaveContextProvider> without success... if someone have solution ! 👋
So if you encounter the issue during runtime you should verify that your form component is well wrapped as mentioned in the warning.

Nested Nuxt instances

Not really a code problem more a discussion/brainstroming-post.
I would like to build some light CMS in Vue/Nuxt, which will output a static website in the end.
So I thought about going for one Nuxt-page (does not have to be a Nuxt-page necessarily) containing all the CMS-related stuff and handle the actual website inside a nuxt-child component to keep code tidy.
Problem is, that i can not access the inner Nuxt page, so any editing will be impossible (I want to achieve some simple inline-editing).
For visualization the editor of webflow may be helpful (Directlink to the video). What i want to achieve is a similar version. I would like to have the page separated from the CMS. The CMS would be the lower bottom-bar and provide stuff like the editor for the inline-editing.
Currently my best solution was to define the editing directly inside the page, which is working, but needs to be stripped out for production and makes a future separation impossible.
Is there any solution for this? Or am I thinking the wrong way?
Can I link both instances with a common vuex-store?
You could created two seperate components, one for editing and one for rendering.
These could utilize components themselves to keep the overhead to a minimun.
You could also use the same component, but lazy load the editor features based on some condition like:
If youre fine with having the Editor only available during development you can create an env variable and check for process.env.NODE_ENV !== 'production'
Another way would be to have some sort of authorization that combined with v-if would show the editor or hide it.