I'm creating a application using SyncFusion and Blazor. In this application I have a login page which looks like this:
Using this code:
<EditForm Model="#ModelValue">
<SfTextBox #ref="user" Placeholder="E-mail" Created="#onCreateUser" CssClass="custom-login" Type="InputType.Email" #bind-Value="#ModelValue.Email" required></SfTextBox>
<SfTextBox #ref="password" Placeholder="Password" Created="#onCreatePassword" CssClass="custom-login" Type="InputType.Password" #bind-Value="#ModelValue.Password" required minlength="7"></SfTextBox>
<SfCheckBox Label="Stay Signed In" #bind-Checked="rememberUser" CssClass="stay-signed-in-checkbox"></SfCheckBox>
<SfButton CssClass="forgot-password-button">Forgot Password?</SfButton>
<SfButton CssClass="login-button" OnClick="validateForm">LOGIN</SfButton>
</EditForm>
#code {
SfTextBox user;
SfTextBox password;
private bool rememberUser;
private User ModelValue = new User();
public void validateForm()
{
}
/*ICON*/
public void onCreateUser()
{
this.user.AddIcon("prepend", "oi oi-person");
}
public void onCreatePassword()
{
this.password.AddIcon("prepend", "oi oi-key");
}
}
In this form are html browser validation popups applied(automatically). These work kind of weird in my situation therefore i created a video illustration it properly:
https://drive.google.com/file/d/1PhETRPkgDag_DHWYlBFJL1qnodxDpaQ_/view?usp=sharing
As u can see the email field works fine, html form validation occurs every time when button is pressed. In the Password field this is not the case, theres required a minimum of 7 characters and when i press submit button with only 3 characters filled in im not getting any warnings.
Does someone know how to fix this?
If you want to use the html5 form validation, the minlengthattribute won't work. If you want to do that validation you should use pattern attribute and pass it like pattern=".{7,}". This is explained in this answer.
If you want to use the blazor validation (which is much better and recommended), you need to use data annotations in your User model.
For your particular case, you can use the MinLength attribute.
public class User
{
// other propeties
// Passing data annotations
[MinLength(7, ErrorMessage = "Password Min Length is 7")]
public string Password { get; set; }
}
And for the data annotations validation to work, don't forget that you need to have the DataAnnotationsValidator component inside the EditForm
<EditForm Model="#ModelValue">
<DataAnnotationsValidator />
#* rest of components *#
</EditForm>
Related
Is it possible to cache the output of a RenderFragment in Blazor WebAssembly?
Specifically, this is to retain components shown intermittently without rendering them to the browser. With "rendering to the browser" here I mean outputting HTML to the browser.
I am trying to get this to work to improve performance in a library I am writing where two-dimensional data is shown in the browser. The resulting grid is virtualized to prevent having tens of thousands of elements in the DOM since having that many elements results in a degraded experience.
When virtualizing, elements outside the view are not rendered only to be rendered when they shift into view.
The caching mechanism should preserve the HTML output of Razor Components such that the components can be removed from and added to the DOM without having to be reinitialized and rerendered.
Currently, I have not found a way to achieve this.
A basic set-up to reproduce what I have tried so far is as follows:
create a Blazor WebAssembly project using the default template without hosting.
Add a Razor Component with the name ConsoleWriter.razor to Shared and set the contents as follows:
<h3>ConsoleWriter #Name</h3>
#code {
[Parameter]
public string? Name { get; set; }
protected override void OnInitialized() {
Console.WriteLine($"ConsoleWriter {this.Name} initialized");
}
protected override void OnAfterRender(bool firstRender) {
if(firstRender) {
Console.WriteLine($"ConsoleWriter {this.Name} rendered");
} else {
Console.WriteLine($"ConsoleWriter {this.Name} re-rendered");
}
}
// Trying to stop rerendering with ShouldRender.
// Does not stop the rendering in scenario's where the component has just been initialized.
protected override bool ShouldRender() => false;
}
Replace the contents of Index.razor with the following code:
#page "/"
<p>Components are showing: #showComponents</p>
<button #onclick="() => this.showComponents=!this.showComponents">Toggle</button>
#* Here the components are in the DOM but can be hidden from view, still bogging down the DOM if there are too many. *#
<div style="#(this.showComponents ? null : "display:none;")">
<ConsoleWriter Name="OnlyHidden" /> #* Does not intialize or rerender when showComponents is toggled *#
</div>
#* Here the components are not in the DOM at all when hidden, which is the intended scenario but this initializes the components every time they are shown. *#
#if(this.showComponents) {
<ConsoleWriter Name="Default" /> #* Intializes and rerenders when showComponents is toggled *#
#consoleWriter #* Intializes and rerenders when showComponents is toggled *#
<ConsoleWriter #key="consoleWriterKey" Name="WithKey" /> #* Intializes and rerenders when showComponents is toggled *#
}
#code {
private bool showComponents = false;
private object consoleWriterKey = new object();
private RenderFragment consoleWriter { get; } = builder => {
builder.OpenComponent<ConsoleWriter>(0);
builder.AddAttribute(1, nameof(ConsoleWriter.Name), "RenderFragment");
builder.CloseComponent();
};
}
When running the project and checking the browser console, you can see which components report being reinitialized or rerendered.
The components can be toggled by clicking the button.
Unfortunately, all of those being removed from and added to the DOM report back whenever being toggled to be shown despite their content never changing.
Does anyone have another idea how to approach this?
I'm trying to achive a search functionality for Blazor-server where the idea is to use it anytime on the site by typing on a search box which causes the page to change the #Body for a component that shows the results of the search.
Currently I'm able to do the search well on the MainLayout but this is by having already a list there and the Body component either below or on top. What I need is to only show the List AFTER I input something on the search bar and to replace it with the Body.
Here is what works but whithout the issue I am having.
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" #oninput="(ChangeEventArgs e)=>SearchHandler(e)" />
<BrowseListShared #ref="BrowseListShared" />
#Body
code{
public string Searched { get; set; }
protected BrowseListShared BrowseListShared;
public void SearchHandler(ChangeEventArgs e)
{
Searched = e.Value.ToString();
BrowseListShared.UpdadeMe(Searched);
}
}
And this is my attempt at trying to make the replacement which gives me the error "Object reference not set to an instance of an object.", the Error shows when I type something in the search box.
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" #oninput="(ChangeEventArgs e)=>SearchHandler(e)" />
#if (setVisible){
<BrowseListShared #ref="BrowseListShared" />
}else{
#Body
}
code{
public string Searched { get; set; }
protected BrowseListShared BrowseListShared;
private bool setVisible=false;
public void SearchHandler(ChangeEventArgs e)
{
if (e != null && e.Value.ToString() != ""){
setVisible = true;
}else{
setVisible=false;
}
Searched = e.Value.ToString();
BrowseListShared.UpdadeMe(Searched);
}
}
Hope someone can give me some direction to deal with this, thank you.
Edit:
Adding if(BrowseLit != null) to avoid error does make it work with some issues.
1- the first character makes so it shows just the list without the search because on the first character the code doesnt have the reference yet for the BrowseListShared so it skips the BrowseListShared.UpdateMe for the first tipe.
2- On deleting the text in the box completely until its blank and typing again will cause this error 'Cannot access a disposed object.'
There shouldn't be an issue to add a small if-block, the following is a basic concept that works for me:
<button #onclick="#( () => test = !test )">test</button>
#if (!test)
{
#Body
}
else
{
<span>some other search content - use a component here
and pass the data as a parameter to it, and its OnParametersSetAsync
can fetch needed data: #test</span>
}
#code{
bool test { get; set; }
}
I would also suggest you try using parameters for the search details instead of a reference.
If you want to show a particular page with search results, you can consider navigating the user to that page (e.g., pass the search query as a route parameter to it) - then it will render only what you want in the #Body - which can range from nothing, to search results, to a lot of other things.
I am trying to make my input text always be uppercase in a blazor input text field. I tried creating a custom InputText like the below but it doesn't update the binding (appears as uppercase but doesn't bind as such). What am I doing wrong here? Is there a better way?
#inherits InputText
<input #attributes="AdditionalAttributes"
class="#CssClass"
value="#CurrentValue"
#oninput="EventCallback.Factory.CreateBinder<string>(
this, __value => CurrentValueAsString = __value.ToUpper(), CurrentValueAsString.ToUpper())" />
Simplicity works for me.
<input type="text" oninput="this.value=this.value.toUpperCase()" #bind=CurrentValueAsString />
For simplicity and (in my opinion) UX reasons, let's assume that the user is allowed to type lowercase letters, but the application will ToUpper the input after they leave that field.
First, make a new component so we can reuse the logic. I called mine UppercaseTextInput.razor
<input value="#UserInput"
#onchange="async e => await OnChange(e)" />
#code {
[Parameter]
public string UserInput { get; set; }
[Parameter]
public EventCallback<string> UserInputChanged { get; set; }
private async Task OnChange(ChangeEventArgs e)
{
var upperCase = (e.Value as string).ToUpperInvariant();
await UserInputChanged.InvokeAsync(upperCase);
}
}
The private method OnChange gets called whenever the input loses focus. Change #onchange to #oninput to make this happen every keystroke.
Now you can use this component in another page or component. For example, in the index page:
#page "/"
<h1>Hello, world!</h1>
<UppercaseTextInput #bind-UserInput="UserInput" />
<p>You typed: #UserInput</p>
#code {
public string UserInput { get; set; } = "Initial";
}
In this example, I have "Initial" as the starting text, which will be printed inside the text box. As soon as you leave the element, the text inside will be transformed to be uppercase.
The benefit of using a component is that you can do a standard #bind- with your properties.
I was using an old reference to the input which was causing the error. There was a bug in the code though (if the input was null). The corrected version can be seen here:
#inherits InputText
<input #attributes="AdditionalAttributes"
class="#CssClass"
value="#CurrentValue"
#oninput="EventCallback.Factory.CreateBinder<string>(
this, __value => CurrentValueAsString = __value?.ToUpper(), CurrentValueAsString?.ToUpper())" />
The answer to this was easier than all the answers: it can be solved using CSS text-transform: uppercase;. This is all you needed and it doesn't take any processing power because it's included in the browser's engine.
I'm using MudBlazor.
I scratched my head for a while why the heck adding
Style="text-transform: uppercase;"
to <MudInput> is not working, even with !important attribute the default user agent style (text-transform: none;) was applied.
C# or JS seemed overkill for the task in my opinion.
What finally worked for me was adding
input {
text-transform: uppercase;
}
to the site's CSS sheet (index.css in my case).
This eventually overwritten the default user agent style.
I'm building a website application that will have two different types of users, let's call one A and the other is B. They have some similar data, such as: 'name', 'password', etc., and the rest are different. I have done 2 tables for them separately because I need it like that, but I have an idea and I'm not sure whether I can do it!
The idea is that when the user goes to the Registration Page, they will be shown a registration form that contains the data that is similar between A and B, and then I will let the user check a check box indicating whether it's an A user or a B user. Depending on what they have chosen, the rest of the form will appear in the same page to let them continue registration.
I'm working with ASP.NET in C# and I'm wondering whether this idea is applicable? My problem is with the check box - how do I let the rest of the registration form appear depending on what they have chosen, then add it to the right table?
MVC?
2 options:
Either have both of the forms in your html, with attribute ID = 'form a', 'form b'. Make sure to submit the forms to different actions.
Show hide either form like this:
$('.radioBtn').click(function() {
var formType = $(this).val();
//alert(formType);
if (formType == "A") {
$('#FormA').show();
$('#FormB').hide();
} else {
$('#FormB').show();
$('#FormA').hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<form style="display: none" id="FormA" action="/actionA">
.... your html FORM A
</form>
<form style="display: none" id="FormB" action="/actionB">
.... your html FORM B
</form>
<input type="radio" name="typeOfForm" class="radioBtn" value="A">Form A
<input type="radio" name="typeOfForm" class="radioBtn" value="B">Form B
Also, if you want to show the forms just don't do display:none
inside the form have a which is set to no display until a user makes a choice.
--
OR
Use ajax, have your forms as partial views and upload them into a target div once the radio is clicked. (let us know if this is needed)
I think the first show / hide is enough for your case. There is no reason to upload since the form is just an empty set of inputs.
EDIT
Next, we catch these submitted forms in your controller. Each form will submit to the same action, or you wish different actions, this does not make a difference - your preference.
option 1.
The form on the page:
<form action='#Url.Action("YourRegisterAction", "controller")' >
<input type="hidden" name="FormType" value="A"/> <!--place B for B form-->
<input type="text" name="Name" placeholder ="enter your name"/>
<input type="text" name="Password" placeholder ="enter your name"/>
<input type="submit" value="Register Me!"/>
</form>
The controller
[HttpPost]
public ActionResult YourRegisterAction(char formType, string name, string password)
{
if (formType == 'A')
bool success = BL.Server.Instance.SaveMyNewUserToDBTypeA(name, password);
else if (formType == 'B')
bool success = BL.Server.Instance.SaveMyNewUserToDBTypeB(name, password);
return View("ThankYou", success);
}
option 2.
Use models.
The model
public class YourRegisterAction
{
public string Name { get; set; }
public string Password { get; set; }
public char FormType { get; set; }
}
The view
#model Domain.UI.Models
<form action='#Url.Action("YourRegisterAction", "controller")' >
#Html.HiddenFor(m=>m.FormType)
#Html.TextBoxFor(m=>m.Name)
#Html.TextBoxFor(m=>m.Password)
<input type="submit" value="Register Me!"/>
</form>
The controller
[HttpPost]
public ActionResult YourRegisterAction(RegisterViewModel m)
{
if (m.FormType == 'A')
bool success = BL.Server.Instance.SaveMyNewUserToDBTypeA(m.Name, m.Password);
else if (m.FormType == 'B')
bool success = BL.Server.Instance.SaveMyNewUserToDBTypeB(m.Name, m.Password);
return View("ThankYou", success);
}
After you have the submitted form in your controller. Just persist in the DB as you normally would.
Also please use #using (Html.BeginForm) instead of the form tags. You can find plenty of info on this here.
Like #Fel said on Comment,
You should better use the radio buttons,
Let call them as rb1 and rb2, grouping the radio buttons by give them a same groupname.
And Also Give AutoPostBack="True" for both, So that only you can change the rest of the fields while the radiobutton is checked.
Create the rest of forms for both users separately as Panels p1 for A and p2 for B
In the rb1_checkedchanged event, show p1,
In the rb2_checkedchanged event, show p2
When click the Submit button
if (rb1.checked=true)
display form for A;
store it in a Table for A;
else
display form for B;
store it in a Table for B;
Hope this Helps...
All the Best...
I have a master page which has a content section with the id cpMainContent.
I am using this master page on every webform I am creating for college project. One of such form is frmSearchPersonnel. The purpose of frmSearchPersonnel is to ask user last name of the person they want to search in a textbox and then click on search button. The ID of TextBox is
txtSearchName
Search button will do postbackUrl transfer to another form which I have named frmViewPersonnel.
In frmViewPersonnel I am trying to use following code.
NameValueCollection myRequest = Request.Form;
if(!string.IsEmptyOrNull(myRequest["txtSearchName"]))
string strSearch = myRequest["txtSearchName"];
The problem I ran into is that this didn't find any control with the name of txtSearchName. While debugging I found this in myRequest object,
[5] "ctl00$cpMainContent$txtSearchName" string
Even though when I added textbox I gave it ID of txtSearchName but when page is rendered it is adding extra string from master page.
How can I stop this? I have to use master page so don't say not to use master page :)
Why is it doing that?
Update
While Googling and Binging I found that I can use Control.ClientID in this case so looking into it.
Update 2
As suggested below to add ClientIDMode="static" in the html of control or add it in page directive. What it does is, it keeps the ID static to txtSearchName but problem is this,
<input name="ctl00$cpMainContent$txtSearchName" type="text" id="txtSearchName" />
Here name is still using ctl00 and the code I showed above,
string strSearch = myRequest["txtSearchName"]
it still won't work because nvc collection is either searchable by index or name not the id directly.
==============
You need to add a ClientIDMode="Static" to the html of the textbox:
<asp:TextBox ID="txtSearchName" runat="server" ClientIDMode="Static" />
It happens to prevent duplicate ID's. Usually it happens when you use master pages as it contains nested pages
If you want all controls with ClientIDMode="Static", you can put it in the page header of the master file.
<%# Page Language="C#" ClientIDMode="Static" %>
If you are posting to another page that uses the same master page (called SiteMaster in my case), the name of the textbox should be same the same.
string val = Request[((SiteMaster)Master).txtSearchName.UniqueID];
If you're NOT posting to a page with the same master, well, then are you using the viewstate for the textbox at all since you're posting to another page? If not, just make the control a non asp.net control:
<input type="text" name="txtSearchName"/>
If you are using viewstate and posting to another page with a different master page, well, you should use PreviousPage.
Little late here. Appreciate #aquinas and #rudeovski ze bear. Interesting and good answers.
I'd same issue and I solved it differently.
In fact, I used a public Interface.
public interface ISearch
{
string SearchText { get; }
}
Then implement ISearch interface in two aspx page say One.aspx and Two.aspx classes.
--One.aspx-- (Where I'v added TextBox1, and Button1 and set Button1.PostBackUrl="~/Two.aspx")
public partial class One : System.Web.UI.Page , ISearch
{
public string SearchText
{
get
{
return TextBox1.Text;
}
}
}
--Two.aspx--
public partial class Two : System.Web.UI.Page, ISearch
{
protected void Page_Load(object sender, EventArgs e)
{
ISearch search = (ISearch) PreviousPage;
Label1.Text = search.SearchText;
}
public string SearchText
{
get
{
throw new NotImplementedException();
}
}
}
If your try to access the input element value in code behind on post back instead of for example:
var emailAddress = Request.Form["ctl00$ctl00$ctl00$ContentContainer$MainContent$MainContent$ContentBottom$ProfileFormView$emailaddress1"];
Use
var emailAddressKeyName = Request.Form.AllKeys.FirstOrDefault(a => a.Contains("emailaddress1"));
var emailAddress = Request.Form[emailAddressKeyName];