Using multiple models in tabs with Razor Pages Viewcomponent .Net Core 2.1
I have a slightly more complex requirement than your average single Viewcomponent that I'm trying to solve for.
I've built a web app with Razor Pages using .Net Core 2.1 and Entity Framework
On one of the pages I have a tabbed view that I use to input and display information in various formats, I've built each "tab" as an individual razor page for now as they all use multiple models, one to display and one to capture data.
I've tried using partial views without any luck as when I try change the tab the whole page reloads, not ideal and quite a bit slower.
Enter Viewcomponents, I can get a simple viewcomponent that consumes one model to work fine, but for the other tabs where I have 2-3 models injected/bound I cannot seem to find a way of implementing this.
Am I asking too much of the framework?
NB. I'm trying to do this using only razor pages with CSharp and no Javascript.
Is this even possible or should I throw in the towel and just move to Angular-MVC?
c# razor entity-framework-core asp.net-core-2.1 asp.net-core-viewcomponent
asked Nov 13 '18 at 13:42
Kevin TKevin T
478
add a comment |
I have a slightly more complex requirement than your average single Viewcomponent that I'm trying to solve for.
I've built a web app with Razor Pages using .Net Core 2.1 and Entity Framework
On one of the pages I have a tabbed view that I use to input and display information in various formats, I've built each "tab" as an individual razor page for now as they all use multiple models, one to display and one to capture data.
I've tried using partial views without any luck as when I try change the tab the whole page reloads, not ideal and quite a bit slower.
Enter Viewcomponents, I can get a simple viewcomponent that consumes one model to work fine, but for the other tabs where I have 2-3 models injected/bound I cannot seem to find a way of implementing this.
Am I asking too much of the framework?
NB. I'm trying to do this using only razor pages with CSharp and no Javascript.
Is this even possible or should I throw in the towel and just move to Angular-MVC?
c# razor entity-framework-core asp.net-core-2.1 asp.net-core-viewcomponent
asked Nov 13 '18 at 13:42
Kevin TKevin T
478
Razor renders on the server-side, which is why it "loads slower" for each page. Angular loads slower on initial load, so it depends on your use case. If you want a SPA-like behaviour, you'll definitely want to use JavaScript on top of Razor.
– Brian
Nov 13 '18 at 13:53
@Brian thanks for confirming, I was hoping to get away with it without incorporating JavaScript.
– Kevin T
Nov 13 '18 at 14:34
add a comment |
I have a slightly more complex requirement than your average single Viewcomponent that I'm trying to solve for.
I've built a web app with Razor Pages using .Net Core 2.1 and Entity Framework
On one of the pages I have a tabbed view that I use to input and display information in various formats, I've built each "tab" as an individual razor page for now as they all use multiple models, one to display and one to capture data.
I've tried using partial views without any luck as when I try change the tab the whole page reloads, not ideal and quite a bit slower.
Enter Viewcomponents, I can get a simple viewcomponent that consumes one model to work fine, but for the other tabs where I have 2-3 models injected/bound I cannot seem to find a way of implementing this.
Am I asking too much of the framework?
NB. I'm trying to do this using only razor pages with CSharp and no Javascript.
Is this even possible or should I throw in the towel and just move to Angular-MVC?
c# razor entity-framework-core asp.net-core-2.1 asp.net-core-viewcomponent
asked Nov 13 '18 at 13:42
Kevin TKevin T
478
I have a slightly more complex requirement than your average single Viewcomponent that I'm trying to solve for.
I've built a web app with Razor Pages using .Net Core 2.1 and Entity Framework
On one of the pages I have a tabbed view that I use to input and display information in various formats, I've built each "tab" as an individual razor page for now as they all use multiple models, one to display and one to capture data.
I've tried using partial views without any luck as when I try change the tab the whole page reloads, not ideal and quite a bit slower.
Enter Viewcomponents, I can get a simple viewcomponent that consumes one model to work fine, but for the other tabs where I have 2-3 models injected/bound I cannot seem to find a way of implementing this.
Am I asking too much of the framework?
NB. I'm trying to do this using only razor pages with CSharp and no Javascript.
Is this even possible or should I throw in the towel and just move to Angular-MVC?
c# razor entity-framework-core asp.net-core-2.1 asp.net-core-viewcomponent
c# razor entity-framework-core asp.net-core-2.1 asp.net-core-viewcomponent
asked Nov 13 '18 at 13:42
Kevin TKevin T
478
asked Nov 13 '18 at 13:42
Kevin TKevin T
478
edited Nov 13 '18 at 14:33
Kevin T
asked Nov 13 '18 at 13:42
Kevin TKevin T
478
asked Nov 13 '18 at 13:42
Kevin TKevin T
478
asked Nov 13 '18 at 13:42
Kevin TKevin T
478
478
Razor renders on the server-side, which is why it "loads slower" for each page. Angular loads slower on initial load, so it depends on your use case. If you want a SPA-like behaviour, you'll definitely want to use JavaScript on top of Razor.
– Brian
Nov 13 '18 at 13:53
@Brian thanks for confirming, I was hoping to get away with it without incorporating JavaScript.
– Kevin T
Nov 13 '18 at 14:34
add a comment |
Razor renders on the server-side, which is why it "loads slower" for each page. Angular loads slower on initial load, so it depends on your use case. If you want a SPA-like behaviour, you'll definitely want to use JavaScript on top of Razor.
– Brian
Nov 13 '18 at 13:53
@Brian thanks for confirming, I was hoping to get away with it without incorporating JavaScript.
– Kevin T
Nov 13 '18 at 14:34
Razor renders on the server-side, which is why it "loads slower" for each page. Angular loads slower on initial load, so it depends on your use case. If you want a SPA-like behaviour, you'll definitely want to use JavaScript on top of Razor.
– Brian
Nov 13 '18 at 13:53
Razor renders on the server-side, which is why it "loads slower" for each page. Angular loads slower on initial load, so it depends on your use case. If you want a SPA-like behaviour, you'll definitely want to use JavaScript on top of Razor.
– Brian
Nov 13 '18 at 13:53
@Brian thanks for confirming, I was hoping to get away with it without incorporating JavaScript.
– Kevin T
Nov 13 '18 at 14:34
@Brian thanks for confirming, I was hoping to get away with it without incorporating JavaScript.
– Kevin T
Nov 13 '18 at 14:34
add a comment |
1 Answer
1
active
oldest
votes
There's a few options available to you. Your best path forward, honestly, is a wrapper class, essentially a model of models, if you will. You simply create a class with properties on it for each of the individual models you actually need. This then allows you to use this as the model for your page, but still access all your individual models for the tabs.
View components are a valid approach, but there's two things you should realize:
View component rendering is entirely self-contained. In other words, your main action/view turns into basically a stub, not really doing anything on its own. Instead, all the logic for building your model and passing it to the view for each tab is contained in the view component corresponding to that tab.
View components are just about rendering HTML to a page. You cannot post to a view component. You'd still be posting to your actual main action, so that would need to be setup to handle whatever the tab in question is doing.
Finally, you're at least going to need JavaScript for your tab interface, if you don't want to roundtrip to the server each time you change tabs. Tab switching while staying put is dynamic functionality that is only possible with JavaScript.
answered Nov 13 '18 at 14:17
Chris PrattChris Pratt
152k20235299
thanks, I've considered the wrapper class, but I'm using EF and the table models to display and edit data, I was just pondering the intricacies of going that route with modified state datamodels and if it was even possible without a mountain of manual updating on the server side. I already have all that logic sitting in the PageModels at the moment so including it in the viewcomponent will be easy enough. It's looking like Javascript would just be easier in this instance. Here I was hoping to prove a point without it.
– Kevin T
Nov 13 '18 at 14:41
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53282368%2fusing-multiple-models-in-tabs-with-razor-pages-viewcomponent-net-core-2-1%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
There's a few options available to you. Your best path forward, honestly, is a wrapper class, essentially a model of models, if you will. You simply create a class with properties on it for each of the individual models you actually need. This then allows you to use this as the model for your page, but still access all your individual models for the tabs.
View components are a valid approach, but there's two things you should realize:
View component rendering is entirely self-contained. In other words, your main action/view turns into basically a stub, not really doing anything on its own. Instead, all the logic for building your model and passing it to the view for each tab is contained in the view component corresponding to that tab.
View components are just about rendering HTML to a page. You cannot post to a view component. You'd still be posting to your actual main action, so that would need to be setup to handle whatever the tab in question is doing.
Finally, you're at least going to need JavaScript for your tab interface, if you don't want to roundtrip to the server each time you change tabs. Tab switching while staying put is dynamic functionality that is only possible with JavaScript.
answered Nov 13 '18 at 14:17
Chris PrattChris Pratt
152k20235299
thanks, I've considered the wrapper class, but I'm using EF and the table models to display and edit data, I was just pondering the intricacies of going that route with modified state datamodels and if it was even possible without a mountain of manual updating on the server side. I already have all that logic sitting in the PageModels at the moment so including it in the viewcomponent will be easy enough. It's looking like Javascript would just be easier in this instance. Here I was hoping to prove a point without it.
– Kevin T
Nov 13 '18 at 14:41
add a comment |
There's a few options available to you. Your best path forward, honestly, is a wrapper class, essentially a model of models, if you will. You simply create a class with properties on it for each of the individual models you actually need. This then allows you to use this as the model for your page, but still access all your individual models for the tabs.
View components are a valid approach, but there's two things you should realize:
View component rendering is entirely self-contained. In other words, your main action/view turns into basically a stub, not really doing anything on its own. Instead, all the logic for building your model and passing it to the view for each tab is contained in the view component corresponding to that tab.
View components are just about rendering HTML to a page. You cannot post to a view component. You'd still be posting to your actual main action, so that would need to be setup to handle whatever the tab in question is doing.
Finally, you're at least going to need JavaScript for your tab interface, if you don't want to roundtrip to the server each time you change tabs. Tab switching while staying put is dynamic functionality that is only possible with JavaScript.
answered Nov 13 '18 at 14:17
Chris PrattChris Pratt
152k20235299
thanks, I've considered the wrapper class, but I'm using EF and the table models to display and edit data, I was just pondering the intricacies of going that route with modified state datamodels and if it was even possible without a mountain of manual updating on the server side. I already have all that logic sitting in the PageModels at the moment so including it in the viewcomponent will be easy enough. It's looking like Javascript would just be easier in this instance. Here I was hoping to prove a point without it.
– Kevin T
Nov 13 '18 at 14:41
add a comment |
There's a few options available to you. Your best path forward, honestly, is a wrapper class, essentially a model of models, if you will. You simply create a class with properties on it for each of the individual models you actually need. This then allows you to use this as the model for your page, but still access all your individual models for the tabs.
View components are a valid approach, but there's two things you should realize:
View component rendering is entirely self-contained. In other words, your main action/view turns into basically a stub, not really doing anything on its own. Instead, all the logic for building your model and passing it to the view for each tab is contained in the view component corresponding to that tab.
View components are just about rendering HTML to a page. You cannot post to a view component. You'd still be posting to your actual main action, so that would need to be setup to handle whatever the tab in question is doing.
Finally, you're at least going to need JavaScript for your tab interface, if you don't want to roundtrip to the server each time you change tabs. Tab switching while staying put is dynamic functionality that is only possible with JavaScript.
answered Nov 13 '18 at 14:17
Chris PrattChris Pratt
152k20235299
There's a few options available to you. Your best path forward, honestly, is a wrapper class, essentially a model of models, if you will. You simply create a class with properties on it for each of the individual models you actually need. This then allows you to use this as the model for your page, but still access all your individual models for the tabs.
View components are a valid approach, but there's two things you should realize:
View component rendering is entirely self-contained. In other words, your main action/view turns into basically a stub, not really doing anything on its own. Instead, all the logic for building your model and passing it to the view for each tab is contained in the view component corresponding to that tab.
View components are just about rendering HTML to a page. You cannot post to a view component. You'd still be posting to your actual main action, so that would need to be setup to handle whatever the tab in question is doing.
Finally, you're at least going to need JavaScript for your tab interface, if you don't want to roundtrip to the server each time you change tabs. Tab switching while staying put is dynamic functionality that is only possible with JavaScript.
answered Nov 13 '18 at 14:17
Chris PrattChris Pratt
152k20235299
answered Nov 13 '18 at 14:17
Chris PrattChris Pratt
152k20235299
answered Nov 13 '18 at 14:17
Chris PrattChris Pratt
152k20235299
answered Nov 13 '18 at 14:17
Chris PrattChris Pratt
152k20235299
152k20235299
thanks, I've considered the wrapper class, but I'm using EF and the table models to display and edit data, I was just pondering the intricacies of going that route with modified state datamodels and if it was even possible without a mountain of manual updating on the server side. I already have all that logic sitting in the PageModels at the moment so including it in the viewcomponent will be easy enough. It's looking like Javascript would just be easier in this instance. Here I was hoping to prove a point without it.
– Kevin T
Nov 13 '18 at 14:41
add a comment |
thanks, I've considered the wrapper class, but I'm using EF and the table models to display and edit data, I was just pondering the intricacies of going that route with modified state datamodels and if it was even possible without a mountain of manual updating on the server side. I already have all that logic sitting in the PageModels at the moment so including it in the viewcomponent will be easy enough. It's looking like Javascript would just be easier in this instance. Here I was hoping to prove a point without it.
– Kevin T
Nov 13 '18 at 14:41
thanks, I've considered the wrapper class, but I'm using EF and the table models to display and edit data, I was just pondering the intricacies of going that route with modified state datamodels and if it was even possible without a mountain of manual updating on the server side. I already have all that logic sitting in the PageModels at the moment so including it in the viewcomponent will be easy enough. It's looking like Javascript would just be easier in this instance. Here I was hoping to prove a point without it.
– Kevin T
Nov 13 '18 at 14:41
thanks, I've considered the wrapper class, but I'm using EF and the table models to display and edit data, I was just pondering the intricacies of going that route with modified state datamodels and if it was even possible without a mountain of manual updating on the server side. I already have all that logic sitting in the PageModels at the moment so including it in the viewcomponent will be easy enough. It's looking like Javascript would just be easier in this instance. Here I was hoping to prove a point without it.
– Kevin T
Nov 13 '18 at 14:41
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53282368%2fusing-multiple-models-in-tabs-with-razor-pages-viewcomponent-net-core-2-1%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Razor renders on the server-side, which is why it "loads slower" for each page. Angular loads slower on initial load, so it depends on your use case. If you want a SPA-like behaviour, you'll definitely want to use JavaScript on top of Razor.
– Brian
Nov 13 '18 at 13:53
@Brian thanks for confirming, I was hoping to get away with it without incorporating JavaScript.
– Kevin T
Nov 13 '18 at 14:34