I am working on an AspNetCore 3.1 app using a scaffolded Identity. I managed to use External Identity Providers successfully, I could customize Login.cshtml and Register.cshtml using my own styling, what I want to do now is changing the pictured page below to fit my styling but I couldn't find where the view is, I am aware that aspnet core 3.x identity is not an mvc patterned anymore and that the code is inside all razor pages but I couldn't find any view or action that produce the shown elements. Please help and execuse my ignorance about razor pages if it is the reason :) . Thanks!
View I want to Customize:
My Identity Files:
I am aware that aspnet core 3.x identity is not an mvc patterned anymore and that the code is inside all razor pages but I couldn't find any view or action that produce the shown elements.
ASP.NET Core Identity is provided as a Razor Class Library in ASP.NET Core. And applications that include Identity can apply the scaffolder to selectively add the source code contained in the Identity Razor Class Library (RCL).
what I want to do now is changing the pictured page below to fit my styling but I couldn't find where the view is.
To achieve your requirement, you can add and override Account\ExternalLogin, like below.
And the content of ExternalLogin.cshtml would be same as below, you can customize it with your expected style based on your actual requirement.
#page
#model ExternalLoginModel
#{
ViewData["Title"] = "Register";
}
<h1>#ViewData["Title"]</h1>
<h4>Associate your #Model.LoginProvider account.</h4>
<hr />
<p class="text-info">
You've successfully authenticated with <strong>#Model.LoginProvider</strong>.
Please enter an email address for this site below and click the Register button to finish
logging in.
</p>
<div class="row">
<div class="col-md-4">
<form asp-page-handler="Confirmation" asp-route-returnUrl="#Model.ReturnUrl" method="post">
<div asp-validation-summary="All" class="text-danger"></div>
<div class="form-group">
<label asp-for="Input.Email"></label>
<input asp-for="Input.Email" class="form-control" />
<span asp-validation-for="Input.Email" class="text-danger"></span>
</div>
<button type="submit" class="btn btn-primary">Register</button>
</form>
</div>
</div>
#section Scripts {
<partial name="_ValidationScriptsPartial" />
}
Related
How can I navigate between Razor pages in an Blazor Hybrid App? I found this explanation: https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/routing?view=aspnetcore-6.0
But I have no idea how to set the target (Razor Page) in a button for example. I like to create a navigation bar. Sorry I’m new in Blazor and Hybrid Apps.
Yes you can navigate to it via code as well.
To navigate via code you need to inject the NavigationManager class.
#inject NavigationManager navManager
and then in the code you can do this:
navManager.NavigateTo("test");
Does your question is How to set the target (Razor Component) in a button? Because Blazor App can't host a Razor Pages App, So I think it may be that you wrote Razor Component as Razor Page or I misunderstood your question. IF you want to set the target (Razor Component) in a button in navigation bar, You can do it by following the steps below:
(.NET MAUI Blazor App )
First, create a new Razor Component and set the link
#*set the link to this page *#
#page "/Test"
<h1> This is a new Test Page</h1>
#code {
//.......
}
Then in Shared/NavMenu.razor, Set the target (Razor Component) in a button in navigation bar
<div class="#NavMenuCssClass" #onclick="ToggleNavMenu">
<nav class="flex-column">
#*other navigation button*#
#*add the new button here*#
<div class="nav-item px-3">
#*set the link of the button*#
<NavLink class="nav-link" href="Test">
<span class="oi oi-list-rich" aria-hidden="true"></span> Test
</NavLink>
</div>
</nav>
</div>
The new navigation button you created will be displayed here.
(If I misunderstood your question please let me know and I will change my answer as soon as possible)
I recently started building a simple web app using the following tools:
Vue.js
Carbon Design System
The next step is to include a mailing list. I would like to add a simple form with two components: a text box and a subscribe button.
I am backend agnostic and considered using MailChimp or SendGrid. However I run into the following issue. Both MailChimp and SendGrid allow the user to generate custom forms in HTML that can be copied to your webpage. The issue is that the style doesn't match the Carbon Design System. I would like to use the official components cv-button instead of the standard button for instance.
I tried two approaches to address the issue. First I fiddled with css styling. This is not the way to go as my Carbon Design System uses scss instead of css and setting a custom css for just this form will inevitably lead to an inconsistent design in the future.
Secondly I tried working with both MailChimp and SendGrid APIs directly. This however is a tedious and time consuming endeavour. Moreover it introduces a lot of complexity to the project.
My question: What is the best practice when it comes to including a subscription button to a node js (vue.js) app and third party email marketing solution (mailchimp / sendgrid) that is consistent with a custom design system.
This is my current mailchimp code:
<template>
<div>
<!-- Begin Mailchimp Signup Form -->
<link
href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css"
rel="stylesheet"
type="text/css"
/>
<div id="mc_embed_signup">
<form
action="https://pm.us1.list-manage.com/subscribe/post?u=5119408c70596654ef4da6c1a&id=987baf3d10"
method="post"
id="mc-embedded-subscribe-form"
name="mc-embedded-subscribe-form"
class="validate"
target="_blank"
novalidate
>
<div id="mc_embed_signup_scroll">
<label for="mce-EMAIL">Join Waiting List</label>
<input
type="email"
value=""
name="EMAIL"
class="email"
id="mce-EMAIL"
placeholder="email address"
required
/>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true">
<input
type="text"
name="b_5119408c70596654ef4da6c1a_987baf3d10"
tabindex="-1"
value=""
/>
</div>
<div class="clear">
<input
type="submit"
value="Subscribe"
name="subscribe"
id="mc-embedded-subscribe"
class="button"
/>
</div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
</div>
</template>
<script>
export default {
name: "SignupForm",
components: {}
};
</script>
That renders as:
which is different than the style of official Carbon components such as cv-button etc.
Removing
<link
href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css"
rel="stylesheet"
type="text/css"
/>
should fix this
I am developing a web application on Asp.Net Core 2.0 MVC, there is a sign-up modal form that will be used across all pages and not being able to understand how should I do the user model binding since every page will have it's own model.
For example, there is a news page that will use the News model and while on that page, a user will want to either sign-up or sign-in (2 modal forms that are integrated in the main layout).
Below is the form section of the sign-up modal:
<form action="/Account/RegisterAccount" method="post">
#Html.AntiForgeryToken()
<div class="cfield">
<input name="username" type="text" placeholder="Username" />
</div>
<div class="cfield">
<input name="email" type="text" placeholder="E-mail address" />
</div>
<div class="cfield">
<input name="password" type="password" placeholder="Password" />
</div>
<div class="cfield">
<input type="password" placeholder="Confirm Password" />
</div>
<button type="submit">Register</button>
</form>
What I did so far is simply submitted the form data without a model, but I was thinking maybe it would be better to find a way to bind the model so I can also do the model validation.
Also, if someone could give me an advice on what is the best practice to manage the logged in user, would be a very good help.
This is my very first post here, and I am totally new at Core and MVC.
Never, never, never attach a model to a layout. Just don't. The correct approach here is a view component. Create a ViewComponents directory and add a class file like SignUpViewComponent.cs to that. In that file, you'll need something like:
public class SignUpViewComponent : ViewComponent
{
public async Task<IViewComponentResult> InvokeAsync()
{
// set up your model
return View(model);
}
}
View components support injection, so you can follow the tradition DI pattern of adding a constructor with the params you want to inject and setting private fields on your class with those values. This allows you to easily bring in things like your context, if you need to utilize it to build your model.
Then, create the view Views\Shared\Components\SignUp\Default.cshtml. In that file you can set the model to the your sign up form model as you want, and then just add your signup form HTML, utilizing that model.
Finally, in your layout, add the following line where you want the signup form to appear:
#await Component.InvokeAsync("SignUp")
For more information on view components, refer to the documentation.
I am working on a asp.net core 1.1 web application. In one of the create views i need to use ckeditor.
i can use ckeditor well but i want to change default language.
how can i change language in ckeditor? and Where should I make changes?
my code:
<div class="form-group">
<label asp-for="BookDescription" class="col-lg-4 col-sm-4 control-label"></label>
<div class="col-lg-6">
<textarea id="editor1" name="editor1"></textarea>
</div>
<script type="text/javascript">
CKEDITOR.replace('editor1');
</script>
</div>
Hamid, you can specify default language in your view, like this -
CKEDITOR.replace('editor1', {language: 'en'});
Or you can add to CKEditor config.js file like this
config.language = 'en';
Please, check more information here https://docs.ckeditor.com/#!/guide/dev_uilanguage
I'm using WinJS (JavaScript) to create a Windows 8 app.
I wish to make a container, either a DIv or something else, that I can put content in to and can be used for scrolling by touch.
I've looked at flex box, but that appears to be just for Internet Explorer?
Am I missing something?
This is my markup so far, I want to make the wrapper scrollable
<div id="wrapper">
<div class="login_box">
<form method="post">
<label class="login_label">Username:</label>
<input type="text" class="login_input" name="login_username" />
<label class="login_label">Password:</label>
<input type="password" class="login_input" name="login_password" />
<input type="submit" id="login_submit" name="login_submit" />
</form>
</div>
</div>
Is this done via CSS?
For WinJS, you can add the .win-scrollview class to your wrapper div and then use the overflow-x and overflow-y css properties to control scrolling behavior.