Using Net.Core 7 I have a few View Components which are located in:
/Pages/Components/Component1/Default.cshtml
/Pages/Components/Component2/Default.cshtml
...
I want to place all views in Components folder and use the Component's name:
/Pages/Components/Component1.cshtml
/Pages/Components/Component2.cshtml
...
I was able to change the name from Default to Component1 using:
public IViewComponentResult Invoke() {
return View("Component1");
}
Can this be accomplish with a global configuration?
What about placing all in Components folder and not using one folder per component?
You can use RazorViewEngineOptions e.g.
builder.Services.AddControllersWithViews();
builder.Services.Configure<RazorViewEngineOptions>(o =>
{
o.ViewLocationFormats.Clear(); //Or just add another
o.ViewLocationFormats.Add
("/Components/{0}" + RazorViewEngine.ViewExtension);
});
Be careful about o.ViewLocationFormats.Clear() it may make the other mvc controllers not work
Related
I have a generated-index page and I can see how to customize the on page title and description in the category.json for the directory, but is there a way to customize the items that are generated by the files that are in the same directory? for example:
tutorials
_category_.json
01-first-tutorial.md
02-second-tutorial.md
I want to be able to have an icon for each of the files and different text than what is pulled from those files first paragraph like seems to be the default. What I want perhaps looks something like this page, but the icons and text need to be links to the tutorial pages.
I have tried using a DocCardList, adding in descriptions, adding in items (failed), and changing each of my tutorial files, but so far no love.
EDIT:
They've come up with a new component called DocCardList which you can use in version 2.3.0.
Create an index.mdx file in your category folder.
Add the following:
import DocCardList from '#theme/DocCardList';
<DocCardList />
Swizzle or otherwise override this component in your src/theme folder to add custom styling, etc.
ORIGINAL ANSWER:
Maybe you could try swapping the generated index component using the docCategoryGeneratedIndexComponent prop (link to reference). That would replace all auto-generated index pages which might be what you want.
In docusaurus.config.js, in the presets section, add
presets: [
[
"classic",
/** #type {import('#docusaurus/preset-classic').Options} */
({
docs: {
sidebarPath: require.resolve("./sidebars.js"),
docCategoryGeneratedIndexComponent:
"#site/src/components/CategoryIndexPage",
},
// etc.
}),
],
],
And then try adding the following custom component under src/components/CategoryIndexPage.tsx:
import React from "react";
export default function CategoryIndexPage(props) {
return (
<pre>
<code>{JSON.stringify(props, null, 2)}</code>
</pre>
);
}
This will just show you what the prop structure is in the component.
When I looked in the theme component which generates this page, it uses
const category = useCurrentSidebarCategory();
But when I try that to get the list of items, I get the following error:
Hook useDocsSidebar is called outside the .
Maybe you can figure out the next steps, I was not able to. 😅
Alternatively, you can create an index.mdx file in your category folder and import a custom React component into that. That gives me the same context violation error, though.
# My custom category page
Some Markdown content here.
import CategoryIndex from "#site/src/components/CategoryIndex.tsx";
<CategoryIndex />
Trying to create a plugin with global mixin which would automatically look for specific element and change its attributes.
export default {
// called by Vue.use(ThisPlugin)
install(Vue, options) {
Vue.mixin({
created() {
console.log($("div").length); // get rid of jQuery and global content
},
});
},
};
As this is called on every vue component I want to limit content mixin accesses with similar like el parameter in directives or like components have element querySelector (this.$el.querySelector("div")) and to replace jquery usage. Is my approach correct and how would I access only components contents in a mixin?
Want to skip directives as those would need to modify tons of existing components, rather introduce a plugin for a component.
I have a vue.js 3 application that needs to dynamically create components and access them.
The proper way to dynamically create them and injected them in the DOM seems to be th wrap them in an app using createApp, and this part works, when I call test() a new copy of the components appears at the bottom of the DOM.
Now I need to be able to get a reference to that component son I can call public (exposed) methods on it.
In my (actual) code below, what would allow me to get a reference to my component ?
import { createApp, h } from "vue";
import ConfirmModal from '#/views/components/ui/confirm-modal.vue';
function test()
{
let componentApp = createApp({
setup() {
return () => h(ConfirmModal, { title: "Fuck yeah!", type: "primary" });
}
});
const wrapper = document.createElement('div');
wrapper.setAttribute('id', 'confirm-modal-0');
componentApp.mount(wrapper);
document.body.appendChild(wrapper);
let _confirmModal: ConfirmModal = ???????????????????
_confirmModal.show();
}
EDIT : Here's my use-case: I have a helper function in a service which is used to confirm actions (like deletes) using a Modal dialog. This helper/service is pure TS, not a Vue component, but needs to instanciate the modal (which is a vue component), have it injected in the DOM and have its public methods callable (by my helper/service).
Right now, the only thing that works is to have a sungle copy of the modal component in my root layout and have to root layout foward the ref to my service, which can then use the component. But this isn't great because I need multiple instances of the dialog, and isn't good SOC to have to root layout handle a modal dialog.
Context:
I have a section of a view that I want to update on a regular interval via JS.
What I have done so far:
Using the information given in: Viewcomponent alternative for ajax refresh
created a view component that encapsulates the region that I want to refresh
attempted to create a custom route to a view component as follows
options.Conventions.AddPageRoute("/Components/ViewComponent/default", "FriendlyRouteAlias");
use the following script to attempt to load the (updated) view component and inject the value into a div:
<script>
var container = $(".DataToUpdate");
var refreshComponent = function () {
$.get("Route/to/view/component", function (data) { container.html(data); });
};
$(function () { window.setInterval(refreshComponent, 1000); });
</script>
Is it even possible to load a View Component this way or should I be looking at another way of accomplishing this?
As the commenters suggested, I was able to get it working by using an MVC controller action to return the view component directly. I will add that I used an MVC controller rather than an API controller because I was dealing with a view rather than data. (see Difference between ApiController and Controller in ASP.NET MVC)
I want to create component templates, meaning that I define my own MyButton type in a separate QML file, and I also want to define several singleton instances, like:
Predefined.qml:
pragma Singleton
[...]
property MyButton quitButton : quitButtonItem
MyButton {
id: quitButtonItem
text: qsTr("Quit")
imagesource : "qrc:/icons/quit.png"
}
then use it as:
Predefined { id: predefined }
Rectangle {
predefined.quitButton {
onClicked: console.log ("quit pressed.");
anchors.bottom : parent.bottom
anchors.horizontalCenter : parent.horizontalCenter
}
}
a.) I don't want to use Loaders for this -> overkill
b.) Don't really want to define as my QML files as many components I want to
clone (eg QuitButton.qml, BackButtonQml, etc.)
Any idea how to have it done?
Thanks
It can't be done.
The only way to instantiate an object declaratively from QML without a Loader is to create a new file for each component.
My suggestion for your usecase would simply be to create the files.
Alternatively, it appears you are doing some sort of navigation bar. What about unifying this in a single component?
I see two ways: have a single global nav bar for all your app, for example in ApplicationWindow's header, or have a commonbase type like YourPage.qml where you implement your bar, and then simply inherit from it for your actual content.
Personally, I adopted the first solution.