1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Display different toast if Submit successful

Display different toast if Submit successful

I am using .Net Core Razor pages to create word document using DocIO based on inputs in a form.  At the end of the form, there is a submit button.  If the form is filled out and passes validation (fields are not left blank, appropriate length, etc.), the function runs and the word document generates using the CreateDoc() function.  In that instance, I want to display a Success toast.  

If some part of the form is not filled out, the function returns the page with the error messages on the fields that were not properly filled out.  In that case, I want to display a warning toast.

Right now, the success toast is displayed even if the validation fails. I can't figure out how to display a toast only after it passes validation.  

This is what I have in the index.cshtml:


<ejs-toast id="element" title="Success!" showclosebutton="true" content="Document has been created." cssclass="e-toast-success" icon="e-success toast-icons" created="created">

            <e-toast-position x="Right"></e-toast-position>

</ejs-toast>

 <ejs-button id="SubmitBtn" content="Generate Document" cssclass="e-btn e-control"></ejs-button>

And this is what I have in the index.cshtml.cs:

public IActionResult OnPost() 

 { 

 if (ModelState.IsValid == false) 

 { 

 return Page(); 

 } 

 return CreateDoc(); 

 }


4 Replies
IS Indrajith Srinivasan Syncfusion Team September 6, 2021 11:29 AM UTC

Hi Kevin, 
 
Greetings from Syncfusion support,  
 
We have validated your reported query, with the shared code block example you have used the toast type class (e-toast-success) directly for the CssClass property. You can use the property binding for the CssClass property, which can be updated dynamically based on the validation performed Success/Failed. We have also prepared a sample, that tries to meet your requirements. 
 
Code blocks: 
 
 
@using Microsoft.Extensions.Logging 
@using ServerApp.Data 
@using Syncfusion.Blazor.Notifications 
 
<EditForm EditContext="@editContext" OnSubmit="@HandleSubmit"> 
    <DataAnnotationsValidator /> 
    <ValidationSummary /> 
 
    <p> 
        <label> 
            Identifier: 
            <InputText @bind-Value="starship.Identifier" /> 
        </label> 
    </p> 
 
    <button type="submit">Submit</button> 
</EditForm> 
 
<SfToast @ref="ToastObj" Title="@ToastTitle" Content="@ToastContent" CssClass="@ToastCssClass"> 
    <ToastPosition X="Right" Y="Bottom"></ToastPosition> 
</SfToast> 
 
@code { 
    SfToast ToastObj; 
    private string ToastTitle = ""; 
    private string ToastContent = ""; 
    private string ToastCssClass = ""; 
 
    protected override void OnInitialized() 
    { 
        editContext = new(starship); 
    } 
 
    private async Task HandleSubmit() 
    { 
        if (editContext.Validate()) 
        { 
            this.ToastTitle = "This is a success toast"; 
            this.ToastContent = "SUCCESS..!"; 
            this.ToastCssClass = "e-toast-success"; 
            await Task.Delay(50); 
            await this.ToastObj.ShowAsync(); 
        } 
        else 
        { 
            this.ToastTitle = "This is a error toast"; 
            this.ToastContent = "ERROR..!"; 
            this.ToastCssClass = "e-toast-danger"; 
            await Task.Delay(50); 
            await this.ToastObj.ShowAsync(); 
        } 
    } 
} 
 
 
Can you please check the above sample and let us know if it meets your requirements ? 
 
Regards, 
Indrajith 


KE Kevin September 7, 2021 07:19 AM UTC

This looks like Blazor.  I'm using .Net Core Web Application (using Razor Pages).


GK Gunasekar Kuppusamy Syncfusion Team September 10, 2021 03:04 AM UTC

Hi Kevin,

Good day to you.

We are currently preparing a sample for your requirement with .NET Core Web Application (using Razor Pages).We will update the further details within two business days on or before 14th September.

Regards,
Gunasekar


GK Gunasekar Kuppusamy Syncfusion Team September 20, 2021 04:35 PM UTC

Hi Kevin,

Sorry for the delay.

We have created a sample using .NET Core Web Application (using Razor Pages). We have showed success or error toast based on the validation status.

Refer the below code snippets.

Accout.cs
namespace Razorpages.Entities
{
    public class Account
    {
        [Required]
        [MinLength(3)]
        [MaxLength(10)]
        public string Username { get; set; }
    }
}

Index.cshtml
<form method="post" asp-page="index">
<table>
    <tr>
        <td>Username</td>
        <td>
            <input asp-for="@Model.account.Username" />
        </td>
        <td>
            <span asp-validation-for="@Model.account.Username" class="error"></span>
        </td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>
            <input type="submit" value="Save" />
        </td>
    </tr>
</table>
</form>

@if (@ViewData["Status"] != null)
{
<ejs-toast id="element" created="oncreated" content="@ViewData["Content"]" cssClass="@ViewData["CssClass"]" icon="e-success toast-icons">
    <e-toast-position X="Right"></e-toast-position>
</ejs-toast>
}

<script>
var toastObj;
function oncreated() {

toastObj = this;
toastObj.show()
}
</script>


Index.cshtml.cs
namespace Razorpages.Pages
{
    public class IndexModel : PageModel
    {
        [BindProperty]
        public Account account { get; set; }

        public void OnGet( )
        {
            account = new Account();
            if (HttpContext.Request.Query["status"].Count > 0)
            {
                var value = HttpContext.Request.Query["status"][0];
                if (value != "")
                {
                    if (value == "true")
                    {
                        ViewData["Content"] = "Success";
                        ViewData["CssClass"] = "e-toast-success";
                        
                    }
                    else if (value == "false")
                    {
                        ViewData["Content"] = "Failed";
                        ViewData["CssClass"] = "e-toast-danger";
                    }
                    ViewData["Status"] = true;
                }
                else
                {
                    ViewData["Status"] = false;
                }
            }
        }

        public IActionResult OnPost(Account account)

        {
            if (ModelState.IsValid == true)
            {
                string url = string.Format("Index?status={0}", "true");
                //You can call your controller page.
                return Redirect(url);
            }
            else
            {
                string url = string.Format("Index?status={0}", "false");
                return Redirect(url);
            }
        }
    }
}

Sample: https://www.syncfusion.com/downloads/support/forum/168599/ze/Razorpages-1509244268

Please check the sample and let us know if the sample meets your requirement.

Regards,
Gunasekar


Loader.
Up arrow icon