We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Error when using EditForm inside modal.

Thread ID:

Created:

Updated:

Platform:

Replies:

146451 Aug 4,2019 07:21 PM UTC Aug 6,2019 08:03 PM UTC Blazor 4
loading
Tags: File Upload
Ivan Petrov
Asked On August 4, 2019 07:21 PM UTC

Hello,
I get the following error: Error: System.NullReferenceException: Object reference not set to an instance of an object. when trying to close a modal that has an EditForm in it. My code is the following:

@page "/"
@using Syncfusion.EJ2.Blazor.Inputs
@using Syncfusion.EJ2.Blazor.Popups
@using Microsoft.AspNetCore.Components.Forms;

@if (this.IsVisible)
{
    <EjsDialog id="dialog" header=@("Analysis") width="800px" isModal=@true allowDragging=@true ShowCloseIcon=true>
        <DialogEvents OnClose=@this.OnIconClose></DialogEvents>
        <EditForm Model=@(new object { }) OnValidSubmit=@(() => this.Save())>
            <div class="form-group row mt-2">
                <label for="Attachments" class="col-2 col-form-label">Attachments:</label>
                <div class="col-4">
                    <EjsUploader ID="UploadFiles"
                                 DropArea=".control-fluid"
                                 AsyncSettings=@this.AsyncSettings
                                 maxFileSize="2000000">
                        <UploaderEvents OnUploadStart=this.OnFileUpload></UploaderEvents>
                    </EjsUploader>
                </div>
            </div>
            <button @onclick=@(() => this.IsVisible = false)>click</button>
        </EditForm>
    </EjsDialog>
}


<button @onclick=@(() => this.IsVisible = true)>click</button>
@code{
    public UploaderAsyncSettings AsyncSettings { get; set; } = new UploaderAsyncSettings
    {
        SaveUrl = "https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save",
        RemoveUrl = "https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove"
    };

    public bool IsVisible { get; set; } = false;

    public void OnIconClose(BeforeCloseEventArgs args)
    {
        args.Cancel = true;
        this.IsVisible = false;
    }

    public void OnFileUpload(UploadingEventArgs arg)
    {
        arg.Cancel = true;

    }

    public void Save()
    {

    }
}


The problem seems to come from the file upload component's UploaderEvents. Moreover, if I take the file upload component outside of the edit form no error is thrown. Hovewer, I would like to have it inside.

Pandiyaraj Muniyandi [Syncfusion]
Replied On August 5, 2019 05:18 PM UTC

Hi Krasimir, 
 
Greetings from Syncfusion support. 
 
Further analysis from the provided code, we find that you bound the empty new object to the model for the EditForm. In this case, every changes in the model goes to the component re-rendering. This is the cause of the reported problem. But, this is already known issue in Blazor platform and this issue will be fixed once Preview 8 has been rolled out. We will intimate you once this issue has been fixed.   
 
Please find the GitHub link from below. 
 
 
So, we suggest you to assign the empty model with new class to the EditForm model as mentioned in the below code example.  
 
@using Syncfusion.EJ2.Blazor.Inputs 
@using Syncfusion.EJ2.Blazor.Popups 
@using Microsoft.AspNetCore.Components.Forms; 
 
@if (this.IsVisible) 
{ 
    <EjsDialog id="dialog" header=@("Analysis") width="800px" isModal=@true allowDragging=@true ShowCloseIcon=true> 
        <DialogEvents OnClose=@this.OnIconClose></DialogEvents> 
        <EditForm Model="@model" OnValidSubmit=@(() => this.Save())> 
            <div class="form-group row mt-2"> 
                <label for="Attachments" class="col-2 col-form-label">Attachments:</label> 
                <div class="col-4"> 
                    <EjsUploader ID="UploadFiles" 
                                 DropArea=".control-fluid" 
                                 AsyncSettings=@this.AsyncSettings 
                                 maxFileSize="2000000"> 
                        <UploaderEvents OnUploadStart=this.OnFileUpload></UploaderEvents> 
                    </EjsUploader> 
                </div> 
            </div> 
            <button @onclick=@(() => this.IsVisible = false)>click</button> 
        </EditForm> 
    </EjsDialog> 
} 
 
 
<button @onclick=@(() => this.IsVisible = true)>click</button> 
 
@code{ 
 
public EditModel model = new EditModel(); 
 
public int? numericVale { get; set; } = 10; 
public UploaderAsyncSettings AsyncSettings { get; set; } = new UploaderAsyncSettings 
{ 
}; 
 
public bool IsVisible { get; set; } = false; 
 
public void OnIconClose(BeforeCloseEventArgs args) 
{ 
    args.Cancel = true; 
    this.IsVisible = false; 
} 
public void ValueChange(ChangeEventArgs args) 
{ 
    Console.WriteLine(args.Value); 
} 
 
public class EditModel 
{ 
    
} 
 
public void OnFileUpload(UploadingEventArgs arg) 
{ 
    arg.Cancel = true; 
 
} 
 
 
public void Save() 
{ 
 
} 
} 
 
 
Note: args.cancel support in the Uploading event not provided for the Uploader component in Blazor platform.  
 
Regards, 
Pandiyaraj M 


Ivan Petrov
Replied On August 5, 2019 06:47 PM UTC

Ok but even when I give it a valid model it still throws the same exception. My code is:

@page "/"
@using Syncfusion.EJ2.Blazor.Inputs
@using Syncfusion.EJ2.Blazor.Popups
@using Microsoft.AspNetCore.Components.Forms;
@using System.ComponentModel.DataAnnotations;

@if (this.IsVisible)
{
    <EjsDialog id="dialog" header=@("Sample modal") width="800px" isModal=@true allowDragging=@true ShowCloseIcon=true>
        <DialogEvents OnClose=@this.OnIconClose></DialogEvents>
        <EditForm Model=@this.ValidationModel OnValidSubmit=@(() => this.Save())>
            <DataAnnotationsValidator />
            <div class="form-group row">
                <label class="col-2 col-form-label">Number</label>
                <div class="col-4">
                    <input class="form-control" @bind="@this.ValidationModel.Number" />
                    <ValidationMessage For="@(() => this.ValidationModel.Number)" />
                </div>
            </div>

            <div class="form-group row mt-2">
                <label for="Attachments" class="col-2 col-form-label">Attachments:</label>
                <div class="col-4">
                    <EjsUploader ID="UploadFiles"
                                 DropArea=".control-fluid"
                                 AsyncSettings=@this.AsyncSettings
                                 maxFileSize="2000000">
                        <UploaderEvents OnUploadStart=this.OnFileUpload></UploaderEvents>
                    </EjsUploader>
                </div>
            </div>
            <button type="submit">click</button>
        </EditForm>
    </EjsDialog>
}


<button @onclick=@(() => this.IsVisible = true)>click</button>
@code{
    public UploaderAsyncSettings AsyncSettings { get; set; } = new UploaderAsyncSettings
    {
        SaveUrl = "https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save",
        RemoveUrl = "https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove"
    };

    public MyValidationModel ValidationModel { get; set; } = new MyValidationModel();

    public bool IsVisible { get; set; } = false;

    public void OnIconClose(BeforeCloseEventArgs args)
    {
        args.Cancel = true;
        this.IsVisible = false;
    }

    public void OnFileUpload(UploadingEventArgs arg)
    {
        //arg.Cancel = true;

    }

    public void Save()
    {
        this.IsVisible = false;
    }

    public class MyValidationModel
    {
        [Required(ErrorMessage = "Number is required")]
        public string Number { get; set; }
    }
}


Berly Christopher [Syncfusion]
Replied On August 6, 2019 11:01 AM UTC

Hi Krasimir, 

  
As we said already, if the component destroyed and re-rendered based on condition, we will face this object reference exception. We will wait for preview 8 update from Microsoft to resolve this issue. 

  
Until then, could you please use this workaround solution that achieved your requirement using Show/Hide method of Dialog? We prepared the sample based on your requirement. 

  
  
  
Regards, 
Berly B.C 


Ivan Petrov
Replied On August 6, 2019 08:03 PM UTC

Yes, I seem to have made a mistake. Thank you for your support!

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon