4

When I use <InputText/> component in Blazor it throws me this error:

Error: System.NullReferenceException: Object reference not set to an instance of an object.
   at UniversityApplication.Pages.Shared.AddUserForm.BuildRenderTree(RenderTreeBuilder __builder)
   at Microsoft.AspNetCore.Components.ComponentBase.<.ctor>b__6_0(RenderTreeBuilder builder)
   at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.RenderInExistingBatch(RenderQueueEntry renderQueueEntry)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()
window.console.error @ console.js:223
e.log @ blazor.server.js:15
C @ blazor.server.js:8
(anonymous) @ blazor.server.js:8
(anonymous) @ blazor.server.js:1
e.invokeClientMethod @ blazor.server.js:1
e.processIncomingData @ blazor.server.js:1
connection.onreceive @ blazor.server.js:1
i.onmessage @ blazor.server.js:1

I'm using 3.1.101 dotnet core version

alynurly
  • 889
  • 9
  • 14
  • 1
    Please read [ask]. – Enigmativity Mar 13 '20 at 05:09
  • 1
    No, this is not a duplicate of the question referenced above. This is a new question, which requires an answer as done by the user Aarsh below. You specifically should be told that the InputText component must be embedded within the EditForm component, otherwise, like many Blazor developers, you are in the dark , never being able to understand the source of the error. I know why the error, and not because I was born smart...Only because I read about it in an issue in Github... – enet Mar 13 '20 at 07:34
  • @enet thanks, I indeed didn't use it inside EditForm – alynurly Mar 13 '20 at 09:29

1 Answers1

2

You have to use InputText like this in your razor page , you can use this as a reference:

<EditForm Model="@SearchTestCoupon">
    <div class="card-outer">
        <div class="row align-items-center">
            <div class="form-group col-md-4 col-lg-4">
                <label>Lot no</label>
                <InputText @bind-Value="SearchTestCoupon.LotNo" class="form-control"></InputText>
            </div>

            <div class="form-group col-md-4 col-lg-4">
                <label>Material ID</label>
                <InputText @bind-Value="SearchTestCoupon.MaterialId" class="form-control"></InputText>
            </div>

            <div class="form-group col-md-4 col-lg-4">
                <button type="button" class="btn btn-primary ml-2 mt-3" @onclick="SearchTestCouponClicked">
                    <span>Search</span>
                </button>
                <button type="button" class="btn btn-secondary ml-2 mt-3" @onclick="ClearSearch">
                    <span>Clear</span>
                </button>
            </div>
        </div>
    </div>
</EditForm>

Follow this and you are good to go.

  1. You have to use EditForm if you want to access InputText or InputNumber.
  2. You should assign model variable to your EditForm.
  3. You have to bind value to your InputText using that model.
Aarsh
  • 2,467
  • 14
  • 29