Quantcast
Channel: ASP.NET Core
Viewing all articles
Browse latest Browse all 9386

Wrapping InputBase Types and Data Binding

$
0
0

I'm trying to wrap derivatives of InputBase components in my own custom component to suit my application.

However, I don't seem to be able to get the data-binding to work with the property values always coming back as null.

So, I have the following code:

InputTextField.razor

<Field Label="@Label" ColumnSpan="6"><EditContent><InputText @bind-Value="@Value" class="main-element form-control"></InputText></EditContent><DetailContent>
		@Value</DetailContent></Field>

@code {

	[Parameter] public string Label { get; set; }
	[Parameter] public string Value { get; set; }

	[Parameter] public EventCallback<string> ValueChanged { get; set; }

}

Field.razor

@inject NavigationManager _navManager<div class="cell col-sm-@ColumnSpan form-group" @onmouseover="ShowInlineEdit" @onmouseout="HideInlineEdit"><a href="javascript:;" class="pull-right inline-cancel-link @(Mode == FieldMode.InlineEdit ? "" : "hidden")" @onclick="SetDetailMode" @onclick:preventDefault>Cancel</a><a href="javascript:;" class="pull-right inline-save-link @(Mode == FieldMode.InlineEdit ? "" : "hidden")">Update</a>

		@if (Mode == FieldMode.Detail)
		{
			<a href="" class="pull-right inline-edit-link @InlineEditCss" @onclick="SetInlineEditMode" @onclick:preventDefault><span class="fas fa-pencil-alt"></span></a>
		}<label class="control-label"><span class="label-text">@Label</span></label><div class="field">
			@if (Mode == FieldMode.Detail)
			{
				@DetailContent
			}
			else
			{
				@EditContent
			}</div></div>

@code {

	[Parameter] public string Label { get;set; }
	[Parameter] public int ColumnSpan { get; set; } = 6;
	[Parameter] public bool IsRequired { get; set; }
	public FieldMode Mode { get; set; } = FieldMode.Detail;

	[Parameter] public RenderFragment EditContent { get; set; }
	[Parameter] public RenderFragment DetailContent { get; set; }

	private string InlineEditCss = "hidden";

	protected override void OnInitialized()
	{
		base.OnInitialized();

		var url = _navManager.Uri;

		this.Mode = FieldMode.Detail;

		if (url.Contains("Create") || url.Contains("Edit"))
		{
			this.Mode = FieldMode.CreateOrEdit;
		}
	}

	void SetInlineEditMode()
	{
		this.Mode = FieldMode.InlineEdit;
		StateHasChanged();
	}

	void SetDetailMode()
	{
		this.Mode = FieldMode.Detail;
		StateHasChanged();
	}

	void ShowInlineEdit()
	{
		InlineEditCss = "";
		StateHasChanged();
	}

	void HideInlineEdit()
	{
		InlineEditCss = "hidden";
		StateHasChanged();
	}

}

And I come to use it inside an EditForm as follows:

<InputTextField Label="Name" @bind-Value="@account.Name"></InputTextField>

However, when I hit a breakpoint inside the OnValidSubmit handler for the EditForm, the "Name" field is null.

If I change back to a standard <InputText> component, the data binding works just fine.

Can anyone help, please?

UPDATE

If I check the EditContext within the OnValidSubmit event callback, the "_fieldStates" sees the value of the "Name" property but its just not reflected in the bound Model.


Viewing all articles
Browse latest Browse all 9386

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>