jurioli / blazor.webform.components Goto Github PK
View Code? Open in Web Editor NEWASP.NET Web Forms System.Web.UI.WebControls Razor Components For Blazor WebAssembly, Blazor Hybrid, Blazor Server.
License: MIT License
ASP.NET Web Forms System.Web.UI.WebControls Razor Components For Blazor WebAssembly, Blazor Hybrid, Blazor Server.
License: MIT License
Hi Jurioli, will this work with .net 8 Blazor SSR? Probably worth it to update the readme.md as well as any limitations. Thanks!
Sample code attached. If i hit the Test 1 button, the text in the textbox shows "test". If i change the text in the textbox manually, then hit the same Test 1 button again, the textbox is not updated. This is a bug, or at least not the intended behavior according to WebForms. Can you help me understand why this is happening and what a good workaround would be?
@page "/"
@using Blazor.WebForm.UI.ControlComponents;
@using System.Web.UI;
@inherits ControlComponent
<asp.TextBox @ref="txtTest"></asp.TextBox>
<asp.Button @ref="btnTest" OnClick="btnTest_Click">Test 1</asp.Button>
<asp.Button @ref="btnTest2" OnClick="btnTest2_Click">Test 2</asp.Button>
asp.Button btnTest;
asp.Button btnTest2;
asp.TextBox txtTest;
protected void btnTest_Click(object sender, EventArgs e)
{
this.txtTest.Text = "test";
this.RequestRefresh();
}
protected void btnTest2_Click(object sender, EventArgs e)
{
this.txtTest.Text = "1234";
this.RequestRefresh();
}
}
I have this gridview:
<asp.GridView AllowPaging="true" AllowSorting="true" AllowCustomPaging="true" AutoGenerateColumns="false" CellPadding="4"
DataKeyNames="Id" @ref="gv" DataSourceID="freesrc" ID="grdview"
PageSize="5" ShowHeaderWhenEmpty="true" CssClass="w-100 table-responsive"
OnRowUpdating="GVUpdating" OnRowUpdated="GVUpdated" OnRowEditing="GVRowEditing"
OnRowDataBound="GVRowBound" OnDataBinding="GVBinding" OnDataBound="GVBound">
<HeaderStyle CssClass="bg-primary text-start small" ForeColor="White">
</HeaderStyle>
<EmptyDataRowStyle CssClass="text-center small">
</EmptyDataRowStyle>
<EditItemStyle CssClass="text-start" HorizontalAlign="UI.HorizontalAlign.Center">
</EditItemStyle>
<ItemStyle CssClass="text-start"></ItemStyle>
<Columns>
<asp.TemplateField>
<EditItemTemplate TItem="GreenPaperItem">
<asp.Button Text="Update" CommandName="Update" CssClass="btn btn-success">
</asp.Button>
<asp.Button Text="Cancel" CommandName="Cancel" CssClass="btn btn-warning">
</asp.Button>
</EditItemTemplate>
<ItemTemplate TItem="GreenPaperItem">
<asp.Button Text="Delete" CommandName="Delete" CssClass="btn btn-danger">
</asp.Button>
<asp.Button Text="Edit" CommandName="Edit" CssClass="btn btn-primary">
</asp.Button>
</ItemTemplate>
</asp.TemplateField>
<asp.TemplateField HeaderText="Date">
<EditItemTemplate TItem="GreenPaperItem">
<asp.TextBox ID="txtTime" TextMode="UI.TextBoxMode.Time"
CssClass="form-control"
OnTextChanged="((s, e) =>
{
var timeText = ((UI.TextBox)s).Text;
var arr = timeText.Split(':');
var h = Convert.ToInt32(arr[0]);
var m = Convert.ToInt32(arr[1]);
AddingTime = new DateTime(2000, 1, 1, h, m, 0);
StateHasChanged();
})">
</asp.TextBox>
</EditItemTemplate>
<ItemTemplate TItem="GreenPaperItem">
<asp.Label ID="lblDate" Text="@($"{context.Date.Hour}:{context.Date.Minute}")"></asp.Label>
</ItemTemplate>
</asp.TemplateField>
<asp.TemplateField HeaderText="Title">
<EditItemTemplate TItem="GreenPaperItem">
<asp.TextBox ID="txtTitle" @bind-Text="@context.Title" CssClass="form-control"></asp.TextBox>
</EditItemTemplate>
<ItemTemplate TItem="GreenPaperItem">
<asp.Label ID="lblTitle" Text="@context.Title"></asp.Label>
</ItemTemplate>
</asp.TemplateField>
</Columns>
</asp.GridView>
<asp.FreeDataSource ID="freesrc" OnExecuteSelected="this.Selected"
OnExecuteUpdated="this.Updated"
@ref="fds">
</asp.FreeDataSource>
<br />
<h1>@msg</h1>
<br />
@code {
string msg = "";
protected void GVRowBound(object sender, UI.GridViewRowEventArgs e)
{
msg += "GV Row Bound, ";
if (e.Row.RowType == UI.DataControlRowType.DataRow)
{
if (e.Row.RowState == UI.DataControlRowState.Edit)
{
var item = (GreenPaperItem)e.Row.DataItem;
var txtbox = e.Row.FindControl("txtTime") as UI.TextBox; // or e.Row.Cells[1].FindControl("txtTime") as UI.TextBox;
txtbox.Text = $"{item.Date.Hour}:{item.Date.Minute}"; // txtBox is null
//AddingTime = null;
}
}
}
}
and I removed all non asp.net components from this grid, I expected to get a reference to the txtTime
control inside gridview but it is null. is this possible?
we have more than 5 projects with approx. 1000 pages in these project. I wanted to know that anyone has migrated his project which is running in production?
it is using Blazor.WebForm.UI in source code, but i did not find this project in open source code.
I have these properties in my code and I didn't find the correlation using GridView component
itens
ItemStyle-Wrap
ItemStyle-ForeColor
ItemStyle-HorizontalAlign
HeaderStyle-Wrap
ItemStyle-CssClass
HeaderStyle-CssClass
sample
<asp.BoundField DataField="code1" HeaderText="code1" ItemStyle-Wrap="false" />
<asp.BoundField DataField="code2" HeaderText="code2" SortExpression="code" ItemStyle-ForeColor="blue" />
<asp.BoundField DataField="code3" HeaderText="code3" ItemStyle-HorizontalAlign="Right" HeaderStyle-Wrap="false" />
<asp.BoundField DataField="code4" HeaderText="" ItemStyle-CssClass="hiddencol" HeaderStyle-CssClass="hiddencol" SortExpression="value" />
Can you please explain how you publish the demo on https://github.com/BlazorWebFormDemo/BlazorWebFormDemo.github.io ?
Hello, I am new to this package but I used Asp.Net years ago.
Please see my question about blazor that I asked some years ago at stackoverflow Here
based on this question and answer, it is not possible to set component properties directly and answers suggest to use a method and call that method on the component.
Now my question is: at the time I wrote that question it was not possible to set component properties with out first defining a variable for that property and then set that variable. I tested it a lot, But maybe currently it is possible. So how it is guarantied that in the future, the microsoft team doesn't remove this ability and makes your package and many people that depend on it nonfunctional.
It is also important to me, since I like your package and reduced code it produced compared to other packages. And I really want to do part of my work with it.
I used this code for page lifecycle:
@page "/mypage"
@inherits ControlComponent
<asp.TextBox ID="Val" TextMode="UI.TextBoxMode.Date" @ref="this.myval">
</asp.TextBox>
<asp.Button Text="Add" OnClick="this.AddButton_Click" />
<h1>@res.ToString()</h1>
<h1>@msg</h1>
@code {
string msg = "";
protected override void OnInitialized()
{
this.Control.Init += OnInit;
this.Control.PreRender += OnPreRender;
base.OnInitialized();
}
public void OnInit(object sender, EventArgs e)
{
msg += "Init, ";
}
protected override void OnLoad(object sender, EventArgs e)
{
if (!this.Page.IsPostBack)
{
msg += "First Load, ";
}
else
{
msg += "Postback Load, ";
}
}
public void OnPreRender(object sender, EventArgs e)
{
msg += "Prerender, ";
}
UI.TextBox myval = null;
DateTime? res = null;
protected void AddButton_Click(object sender, EventArgs e)
{
res = Convert.ToDateTime(myval.Text);
msg += "Click Handler, ";
this.RequestRefresh();
StateHasChanged();
}
protected override void OnUpdate(object sender, StateUpdateEventArgs e)
{
// how to use this?
base.OnUpdate(sender, e);
dialogService.Alert("Update.");
}
But the order of events that are fired is: Init, First Load, Prerender, Click Handler, Postback Load, Prerender,
It should be: Init, First Load, Prerender, Postback Load, Click Handler, Prerender,
Is this by design? since asp.net click and change events are fired between load and prerender events.
Is there any plans to add the remaining asp.net controls: Treeview, Menu and Chart?
I'm opening the wizzard page from your demo app and I get this exception:
https://blazorwebformdemo.github.io/Standard/Wizard/
crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
Unhandled exception rendering component: Unable to set property 'FontSize' on object of type 'asp.Wizard'. The error was: The numeric part ('0.8') of '0.8em' cannot be parsed as a numeric part of a Em unit.
System.InvalidOperationException: Unable to set property 'FontSize' on object of type 'asp.Wizard'. The error was: The numeric part ('0.8') of '0.8em' cannot be parsed as a numeric part of a Em unit.
---> System.FormatException: The numeric part ('0.8') of '0.8em' cannot be parsed as a numeric part of a Em unit.
at System.Web.UI.WebControls.Unit..ctor(String value, CultureInfo culture, UnitType defaultType)
at System.Web.UI.WebControls.FontUnit..ctor(String value, CultureInfo culture)
at System.Web.UI.WebControls.FontUnit.Parse(String s, CultureInfo culture)
at System.Web.UI.WebControls.FontUnitConverter.ConvertFrom(ITypeDescriptorContext context, CultureInfo culture, Object value)
at System.ComponentModel.TypeConverter.ConvertFromString(ITypeDescriptorContext , CultureInfo , String )
at Blazor.WebForm.UI.ControlParameterViewComponentExtensions.ConvertFromString[FontUnit](IParameterViewComponent component, String value)
at Blazor.WebForm.UI.ControlComponents.WebControlComponent`1[[System.Web.UI.WebControls.Wizard, Blazor.WebForm.UI, Version=2.3.0.3, Culture=neutral, PublicKeyToken=fe1bd156e56b2897]].set_FontSize(String value)
at Microsoft.AspNetCore.Components.Reflection.PropertySetter.CallPropertySetter[Wizard,String](Action`2 setter, Object target, Object value)
at Microsoft.AspNetCore.Components.Reflection.PropertySetter.SetValue(Object , Object )
at Microsoft.AspNetCore.Components.Reflection.ComponentProperties.<SetProperties>g__SetProperty|3_0(Object , PropertySetter , String , Object )
Exception_EndOfInnerExceptionStack
at Microsoft.AspNetCore.Components.Reflection.ComponentProperties.<SetProperties>g__SetProperty|3_0(Object , PropertySetter , String , Object )
at Microsoft.AspNetCore.Components.Reflection.ComponentProperties.SetProperties(ParameterView& , Object )
at Microsoft.AspNetCore.Components.ParameterView.SetParameterProperties(Object )
at System.Web.UI.ControlComponent`1[[System.Web.UI.WebControls.Wizard, Blazor.WebForm.UI, Version=2.3.0.3, Culture=neutral, PublicKeyToken=fe1bd156e56b2897]].SetParametersAsync(ParameterView parameters)
at Blazor.WebForm.UI.ControlComponents.ControlComponentBase`1[[System.Web.UI.WebControls.Wizard, Blazor.WebForm.UI, Version=2.3.0.3, Culture=neutral, PublicKeyToken=fe1bd156e56b2897]].SetParametersAsync(ParameterView parameters)
at Microsoft.AspNetCore.Components.Rendering.ComponentState.SupplyCombinedParameters(ParameterView )
My browser locale is de-DE
So that it can be used by others
This is the result of a CustomValidator when it is invalid:
<span data-val-controltovalidate="txtb" data-val-errormessage="Should be even." data-val-isvalid="False" data-val-validationgroup="g1" id="ea8e6d25f8ef438db3376cd76bf6ddd3" data-val="true" data-val-evaluationfunction="CustomValidatorEvaluateIsValid" style="color:Red;font-family:verdana;font-size:10pt;
visibility:hidden;">Should be even.</span>
its visibility is hidden. is it a bug?
<asp.TextBox ID="txtb" Text="hello" TextMode="UI.TextBoxMode.Number"
ValidationGroup="g1" @ref="txtNum">
</asp.TextBox>
<asp.CustomValidator ControlToValidate="txtb" ErrorMessage="Should be even." Display="UI.ValidatorDisplay.Static" ValidationGroup="g1"
ForeColor="red"
FontNames="verdana"
FontSize="10pt"
OnServerValidate="((s, e) => {
if (Convert.ToInt32(e.Value) % 2 == 0)
{
e.IsValid = true;
}
else
{
e.IsValid = false;
} //lblLengthError.Visible = !e.IsValid;
StateHasChanged();
})">
</asp.CustomValidator>
<asp.Button CausesValidation="true" ValidationGroup="g1" CssClass="btn btn-primary"
Text="Click" OnClick="((s, e) => { a = Convert.ToInt32(txtNum.Text); StateHasChanged(); })">
</asp.Button>
I have this checkbox in my GridView:
<ItemTemplate TItem="GreenPaperItem">
<asp.CheckBox ID="CheckBox" OnCheckedChanged="((s, e) => this.GVCheckBox_CheckedChanged(s, e/*, context.Id*/))" AutoPostBack="true">
</asp.CheckBox>
<asp.Button Text="Delete" CommandName="Delete" CssClass="btn btn-danger">
</asp.Button>
<asp.Button Text="Edit" CommandName="Edit" CssClass="btn btn-primary">
</asp.Button>
</ItemTemplate>
And here is the event handler:
List<int> selectedRowIds = new List<int>();
protected void GVCheckBox_CheckedChanged(object sender, EventArgs e/*, int id*/)
{
UI.CheckBox chk = (UI.CheckBox)sender;
Task.Delay(100);
InvokeAsync(() => StateHasChanged());
UI.GridViewRow gr = (UI.GridViewRow)chk.Parent.Parent; //<< the first parent returns null
int id = (int)gv.DataKeys[gr.RowIndex].Value;
if (chk.Checked && !selectedRowIds.Contains(id))
selectedRowIds.Add(id);
else if (!chk.Checked && selectedRowIds.Contains(id))
selectedRowIds.Remove(id);
StateHasChanged();
}
But the parents are null. Is there any way so that this code works? Currently I have to send ites item Id to the method.
I faced with this issue when I want to edit my listview items, But the update is wrong. the Id I receive in the datasource updated method should be 2454 (the editing row) but is 2453. this causes wrong update.
Where can I find the Blazor.WebForm.UI project repository to study the viability of using the component Blazor.WebForm.Components in my project?
I need to analyze all the code befose using it
Thanks
Hi, I created a new Blazor Server project on .NET (8.0.100) and installed the Blazor.WebForm.Components version (2.4.0.1).
I added the ScriptManagerCircuitHandler class to the Program.cs.
I added some webform components to the Home and when I click on the button nothing happens. An error appears in the Google Console (see figure).
Even if I insert a breakpoint in the button click event the application does not stop at the breakpoint.
On .NET 7 it works fine.
GridView select command and selectedindexchanged event stops page circuit. after executing the event handler, the gridview and the page are disabled:
OnSelectedIndexChanged="Selected_Changed"
<ItemTemplate TItem="GreenPaperItem">
<asp.LinkButton Text="Select" CommandName="Select">
</asp.LinkButton>
<asp.Button Text="Delete" CommandName="Delete" CssClass="btn btn-danger">
</asp.Button>
<asp.Button Text="Edit" CommandName="Edit" CssClass="btn btn-primary">
</asp.Button>
</ItemTemplate>
int selectedValue = -1;
protected void Selected_Changed(object sender, EventArgs e)
{
gvSelectedValue = Convert.ToInt32(gv.SelectedValue);
StateHasChanged();
}
When I hover the mouse on Edit and Delete buttons nothing appears but when I hover on Select Button a "_doPostback.." appears under the page. probably this feature is not implemented yet.
the problem can be easily solved by passing context.Id to event handler and attach event handler to the button, but then it is not the asp.net way.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.