jurioli / blazor.webform.components Goto Github PK

ASP.NET Web Forms System.Web.UI.WebControls Razor Components For Blazor WebAssembly, Blazor Hybrid, Blazor Server.

License: MIT License

C# 60.42% HTML 39.58%

asp-net asp-net-core blazor blazor-component blazor-components blazor-server blazor-webassembly blazor-webforms components csharp dotnet wasm webassembly webforms

blazor.webform.components's People

Contributors

Stargazers

Watchers

Forkers

rickiswright blazorhub huafangyun weiplanet naksupapa anu-prakash-dev anuprakashelgi marciogoularte

blazor.webform.components's Issues

Blazor.WebForm.UI

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

asp.GridView / asp.BoundField

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" />

For ListView: The datasource keys["Id"] for OnExecuteUpdated method is lower than the actual Id

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.

Textbox fails to update when post triggered from same button

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>

@code{

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();
}

}

Anyone migrated from webform to blazor?

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.

Wizzard crash

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

GridView "Select" command and SelectedIndexChanged stops the circuit

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.

CheckBox's Parent is null (in Gridview)

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.

Will this work with .net 8 Blazor SSR

Hi Jurioli, will this work with .net 8 Blazor SSR? Probably worth it to update the readme.md as well as any limitations. Thanks!

Order of lifecycle events

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.

components don't work on .net 8

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.

Getting a reference to a control inside gridview row in OnRowDataBound

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?

Custom Validator not showing

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>

Setting component's Properties by their References (@ref)

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.

About the demo

Can you please explain how you publish the demo on https://github.com/BlazorWebFormDemo/BlazorWebFormDemo.github.io ?

The remaining controls

Is there any plans to add the remaining asp.net controls: Treeview, Menu and Chart?