How to insert a modal Login form with in the navigation bar
I'm building a new website and one of the requirements is to have the login form be a modal window.
I'm trying to include it in the top navigation bar and it's only being rendered if the user is not logged in.
If I delete the model and let an empty modal everything works perfectly but when I add it again it doesn't work, because the model of the page (in this case the index page) is a different one then the one from the modal login.
How can I add this modal window with it's on model inside the top navbar? Are there any alternatives?
P.S. I'm using Razor Pages and ASP.NET Core 2.2.
Thanks!
asp.net razor asp.net-core razor-pages asp.net-core-2.2
asked Jan 18 at 14:07
Andrés GarganoAndrés Gargano
458
add a comment |
I'm building a new website and one of the requirements is to have the login form be a modal window.
I'm trying to include it in the top navigation bar and it's only being rendered if the user is not logged in.
If I delete the model and let an empty modal everything works perfectly but when I add it again it doesn't work, because the model of the page (in this case the index page) is a different one then the one from the modal login.
How can I add this modal window with it's on model inside the top navbar? Are there any alternatives?
P.S. I'm using Razor Pages and ASP.NET Core 2.2.
Thanks!
asp.net razor asp.net-core razor-pages asp.net-core-2.2
asked Jan 18 at 14:07
Andrés GarganoAndrés Gargano
458
add a comment |
I'm building a new website and one of the requirements is to have the login form be a modal window.
I'm trying to include it in the top navigation bar and it's only being rendered if the user is not logged in.
If I delete the model and let an empty modal everything works perfectly but when I add it again it doesn't work, because the model of the page (in this case the index page) is a different one then the one from the modal login.
How can I add this modal window with it's on model inside the top navbar? Are there any alternatives?
P.S. I'm using Razor Pages and ASP.NET Core 2.2.
Thanks!
asp.net razor asp.net-core razor-pages asp.net-core-2.2
asked Jan 18 at 14:07
Andrés GarganoAndrés Gargano
458
I'm building a new website and one of the requirements is to have the login form be a modal window.
I'm trying to include it in the top navigation bar and it's only being rendered if the user is not logged in.
If I delete the model and let an empty modal everything works perfectly but when I add it again it doesn't work, because the model of the page (in this case the index page) is a different one then the one from the modal login.
How can I add this modal window with it's on model inside the top navbar? Are there any alternatives?
P.S. I'm using Razor Pages and ASP.NET Core 2.2.
Thanks!
asp.net razor asp.net-core razor-pages asp.net-core-2.2
asp.net razor asp.net-core razor-pages asp.net-core-2.2
asked Jan 18 at 14:07
Andrés GarganoAndrés Gargano
458
asked Jan 18 at 14:07
Andrés GarganoAndrés Gargano
458
asked Jan 18 at 14:07
Andrés GarganoAndrés Gargano
458
asked Jan 18 at 14:07
Andrés GarganoAndrés Gargano
458
asked Jan 18 at 14:07
Andrés GarganoAndrés Gargano
458
458
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
You need to use a view component:
public class LoginViewComponent : ViewComponent
{
public async Task<IViewComponentResult> InvokeAsync()
{
var model = await GetModelAsync();
return View(model);
}
public Task<LoginViewModel> GetModelAsync() =>
Task.FromResult(new LoginViewModel());
}
Then, create the view ViewsSharedComponentsLoginDefault.cshtml and add your login form code there. Finally, in your layout where you want the login form to be:
@await Component.InvokeAsync("Login")
You'll need a page or handler that can respond to the form post. You cannot post to a view component; that's just about rendering a partial view with it's own model in a self-contained way that can be dropped in. You should have a hidden input in your login form for a "return URL" which you'll fill with Request.Path. Then, on successful login, you redirect the user back to this URL. That way, the login will be seamless, as if they never let the page they were on.
On failure, you should simply redisplay the login form like you would do normally. It's easier and more seamless to just return this as the view. As such, you can piggy-back on the the login page's built-in post handler. Again, just add your return URL field and fill it with the return URL from the request, so that the user will eventually make it back to the page they were initially on when starting the login process.
answered Jan 18 at 14:33
Chris PrattChris Pratt
153k20237301
Thanks for the answer! Is it possible to have this but in a project that only uses Razor Pages?
– Andrés Gargano
Jan 18 at 15:00
It makes no difference.
– Chris Pratt
Jan 18 at 16:28
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%2f54255673%2fhow-to-insert-a-modal-login-form-with-in-the-navigation-bar%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
You need to use a view component:
public class LoginViewComponent : ViewComponent
{
public async Task<IViewComponentResult> InvokeAsync()
{
var model = await GetModelAsync();
return View(model);
}
public Task<LoginViewModel> GetModelAsync() =>
Task.FromResult(new LoginViewModel());
}
Then, create the view ViewsSharedComponentsLoginDefault.cshtml and add your login form code there. Finally, in your layout where you want the login form to be:
@await Component.InvokeAsync("Login")
You'll need a page or handler that can respond to the form post. You cannot post to a view component; that's just about rendering a partial view with it's own model in a self-contained way that can be dropped in. You should have a hidden input in your login form for a "return URL" which you'll fill with Request.Path. Then, on successful login, you redirect the user back to this URL. That way, the login will be seamless, as if they never let the page they were on.
On failure, you should simply redisplay the login form like you would do normally. It's easier and more seamless to just return this as the view. As such, you can piggy-back on the the login page's built-in post handler. Again, just add your return URL field and fill it with the return URL from the request, so that the user will eventually make it back to the page they were initially on when starting the login process.
answered Jan 18 at 14:33
Chris PrattChris Pratt
153k20237301
Thanks for the answer! Is it possible to have this but in a project that only uses Razor Pages?
– Andrés Gargano
Jan 18 at 15:00
It makes no difference.
– Chris Pratt
Jan 18 at 16:28
add a comment |
You need to use a view component:
public class LoginViewComponent : ViewComponent
{
public async Task<IViewComponentResult> InvokeAsync()
{
var model = await GetModelAsync();
return View(model);
}
public Task<LoginViewModel> GetModelAsync() =>
Task.FromResult(new LoginViewModel());
}
Then, create the view ViewsSharedComponentsLoginDefault.cshtml and add your login form code there. Finally, in your layout where you want the login form to be:
@await Component.InvokeAsync("Login")
You'll need a page or handler that can respond to the form post. You cannot post to a view component; that's just about rendering a partial view with it's own model in a self-contained way that can be dropped in. You should have a hidden input in your login form for a "return URL" which you'll fill with Request.Path. Then, on successful login, you redirect the user back to this URL. That way, the login will be seamless, as if they never let the page they were on.
On failure, you should simply redisplay the login form like you would do normally. It's easier and more seamless to just return this as the view. As such, you can piggy-back on the the login page's built-in post handler. Again, just add your return URL field and fill it with the return URL from the request, so that the user will eventually make it back to the page they were initially on when starting the login process.
answered Jan 18 at 14:33
Chris PrattChris Pratt
153k20237301
Thanks for the answer! Is it possible to have this but in a project that only uses Razor Pages?
– Andrés Gargano
Jan 18 at 15:00
It makes no difference.
– Chris Pratt
Jan 18 at 16:28
add a comment |
You need to use a view component:
public class LoginViewComponent : ViewComponent
{
public async Task<IViewComponentResult> InvokeAsync()
{
var model = await GetModelAsync();
return View(model);
}
public Task<LoginViewModel> GetModelAsync() =>
Task.FromResult(new LoginViewModel());
}
Then, create the view ViewsSharedComponentsLoginDefault.cshtml and add your login form code there. Finally, in your layout where you want the login form to be:
@await Component.InvokeAsync("Login")
You'll need a page or handler that can respond to the form post. You cannot post to a view component; that's just about rendering a partial view with it's own model in a self-contained way that can be dropped in. You should have a hidden input in your login form for a "return URL" which you'll fill with Request.Path. Then, on successful login, you redirect the user back to this URL. That way, the login will be seamless, as if they never let the page they were on.
On failure, you should simply redisplay the login form like you would do normally. It's easier and more seamless to just return this as the view. As such, you can piggy-back on the the login page's built-in post handler. Again, just add your return URL field and fill it with the return URL from the request, so that the user will eventually make it back to the page they were initially on when starting the login process.
answered Jan 18 at 14:33
Chris PrattChris Pratt
153k20237301
You need to use a view component:
public class LoginViewComponent : ViewComponent
{
public async Task<IViewComponentResult> InvokeAsync()
{
var model = await GetModelAsync();
return View(model);
}
public Task<LoginViewModel> GetModelAsync() =>
Task.FromResult(new LoginViewModel());
}
Then, create the view ViewsSharedComponentsLoginDefault.cshtml and add your login form code there. Finally, in your layout where you want the login form to be:
@await Component.InvokeAsync("Login")
You'll need a page or handler that can respond to the form post. You cannot post to a view component; that's just about rendering a partial view with it's own model in a self-contained way that can be dropped in. You should have a hidden input in your login form for a "return URL" which you'll fill with Request.Path. Then, on successful login, you redirect the user back to this URL. That way, the login will be seamless, as if they never let the page they were on.
On failure, you should simply redisplay the login form like you would do normally. It's easier and more seamless to just return this as the view. As such, you can piggy-back on the the login page's built-in post handler. Again, just add your return URL field and fill it with the return URL from the request, so that the user will eventually make it back to the page they were initially on when starting the login process.
answered Jan 18 at 14:33
Chris PrattChris Pratt
153k20237301
answered Jan 18 at 14:33
Chris PrattChris Pratt
153k20237301
answered Jan 18 at 14:33
Chris PrattChris Pratt
153k20237301
answered Jan 18 at 14:33
Chris PrattChris Pratt
153k20237301
153k20237301
Thanks for the answer! Is it possible to have this but in a project that only uses Razor Pages?
– Andrés Gargano
Jan 18 at 15:00
It makes no difference.
– Chris Pratt
Jan 18 at 16:28
add a comment |
Thanks for the answer! Is it possible to have this but in a project that only uses Razor Pages?
– Andrés Gargano
Jan 18 at 15:00
It makes no difference.
– Chris Pratt
Jan 18 at 16:28
Thanks for the answer! Is it possible to have this but in a project that only uses Razor Pages?
– Andrés Gargano
Jan 18 at 15:00
Thanks for the answer! Is it possible to have this but in a project that only uses Razor Pages?
– Andrés Gargano
Jan 18 at 15:00
It makes no difference.
– Chris Pratt
Jan 18 at 16:28
It makes no difference.
– Chris Pratt
Jan 18 at 16:28
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%2f54255673%2fhow-to-insert-a-modal-login-form-with-in-the-navigation-bar%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
