Blazor Succinctly^®
by Michael Washington

CHAPTER 7

Creating New Tickets

In this chapter, we will create a page that will contain a form to create help desk tickets.

OwningComponentBase

We need to use the SyncfusionHelpDeskService, created in the previous chapter, to access the database. However, with Blazor Server, a service will persist for the duration of the time a user is connected to the application, once it’s loaded. Meaning, even when they go to another page, the service will persist in memory.

To scope the service to only the current page, we use OwningComponentBase.

Open the index.razor page and add the following under the @page directive.

Code Listing 25: OwningComponentBase

@using SyncfusionHelpDesk.Data;

@inherits OwningComponentBase<SyncfusionHelpDeskService>

The @using statement is required to support access to the types in the SyncfusionHelpDeskService service.

Blazor Toast component

We will use the Syncfusion Blazor Toast component to display a brief pop-up message when a help desk ticket is submitted. To enable this, add the following code markup.

Code Listing 26: Toast Control

<SfToast ID="toast_default"

@ref="ToastObj"

Title="Help Desk Ticket"

Content="@ToastContent" TimeOut="5000">

</SfToast>

Next, add the following to the @code section.

Code Listing 27: Toast Properties

SfToast ToastObj;

private string ToastContent { get; set; } = "";

The ToastObj will provide programmatic access to the control, for example to open it and close it, and the ToastContent property will allow us to set the text that is displayed in the control.

Forms and validation

Blazor provides a method for you to create forms with validation to collect data.

Forms

Blazor provides an EditForm control that allows us to validate a form using data annotations. These data annotations are defined in a class that is specified in the Model property of the EditForm control.

Validation

The EditForm control defines a method to handle OnValidSubmit. This method is triggered only when the data in the form satisfies all the validation rules defined by the data annotations.

Any validation errors are displayed using the DataAnnotationsValidator and/or the ValidationSummary control.

HelpDeskTicket class

To support the forms and validation that we will implement, in the Data folder, create a new folder named Models, add the following class that will be bound to the form, and provide the validation attributes.

Code Listing 28: HelpDeskTicket.cs

using System;

using System.ComponentModel.DataAnnotations;

namespace SyncfusionHelpDesk.Data

{

public class HelpDeskTicket

{

public int Id { get; set; }

[Required]

public string TicketStatus { get; set; }

[Required]

public DateTime TicketDate { get; set; }

[Required]

[StringLength(50, MinimumLength = 2,

ErrorMessage =

"Description must be a minimum of 2 and maximum of 50 characters.")]

public string TicketDescription { get; set; }

[Required]

[EmailAddress]

public string TicketRequesterEmail { get; set; }

public string TicketGuid { get; set; }

}

Syncfusion Blazor controls

We will also employ the following Syncfusion controls in our form:

Syncfusion TextBox: A control that allows us to gather data from the user and later display existing data.
Syncfusion DatePicker: A control that allows the user to enter a date value and later display an existing date value.
Syncfusion Dropdown List: Presents a list of predefined values, in our example a list of ticket status values, that allows the user to choose a single value. Later we will use this control to display an existing selected value, also.

The Dropdown List control requires a data collection for the display options. To enable this, in the Models folder, add the following class.

Code Listing 29: HelpDeskStatus.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Threading.Tasks;

namespace SyncfusionHelpDesk.Data

{

public class HelpDeskStatus

{

public string ID { get; set; }

public string Text { get; set; }

public static List<HelpDeskStatus> Statuses =

new List<HelpDeskStatus>() {

new HelpDeskStatus(){ ID= "New", Text= "New" },

new HelpDeskStatus(){ ID= "Open", Text= "Open" },

new HelpDeskStatus(){ ID= "Urgent", Text= "Urgent" },

new HelpDeskStatus(){ ID= "Closed", Text= "Closed" },

};

}

Note: You can get more information on Syncfusion Blazor controls at: https://blazor.syncfusion.com/.

New ticket form

We will now add the code to display the form.

Add the following markup.

Code Listing 30: Help Desk Form

<h3>New Help Desk Ticket</h3>

<br />

<EditForm ID="new-doctor-form" Model="@objHelpDeskTicket"

OnValidSubmit="@HandleValidSubmit">

<div>

<SfDropDownList TItem="HelpDeskStatus" TValue="string"

PopupHeight="230px" Index=0

Placeholder="Ticket Status"

DataSource="@HelpDeskStatus.Statuses"

FloatLabelType="@FloatLabelType.Always"

@bind-Value="@objHelpDeskTicket.TicketStatus">

<DropDownListFieldSettings Text="Text"

Value="ID"></DropDownListFieldSettings>

</SfDropDownList>

</div>

<div>

<SfDatePicker ID="TicketDate" Placeholder="Ticket Date"

FloatLabelType="@FloatLabelType.Always"

@bind-Value="@objHelpDeskTicket.TicketDate"

Max="DateTime.Now"

ShowClearButton="false"></SfDatePicker>

<ValidationMessage For="@(() => objHelpDeskTicket.TicketDate)" />

</div>

<div>

<SfTextBox Placeholder="Ticket Description"

FloatLabelType="@FloatLabelType.Always"

@bind-Value="@objHelpDeskTicket.TicketDescription"></SfTextBox>

<ValidationMessage For="@(() => objHelpDeskTicket.TicketDescription)" />

</div>

<div>

<SfTextBox Placeholder="Requester Email"

FloatLabelType="@FloatLabelType.Always"

@bind-Value="@objHelpDeskTicket.TicketRequesterEmail"></SfTextBox>

<ValidationMessage For="@(() => objHelpDeskTicket.TicketRequesterEmail)" />

</div>

</div>

</EditForm>

Add the following to the @code section.

Code Listing 31: HelpDeskTicket Property

// Global property for the help desk ticket.

HelpDeskTicket objHelpDeskTicket =

new HelpDeskTicket() { TicketDate = DateTime.Now };

Finally, add the following code to insert the data into the database by calling the CreateTicketAsync method of the SyncfusionHelpDeskService when the form has successfully passed validation.

Code Listing 32: HandleValidSubmit

public async Task HandleValidSubmit(EditContext context)

{

try

{

// Create a HelpDeskTickets.

HelpDeskTickets NewHelpDeskTickets =

new HelpDeskTickets();

// Set the values to the values entered

// in the form.

NewHelpDeskTickets.TicketDate =

objHelpDeskTicket.TicketDate;

NewHelpDeskTickets.TicketDescription =

objHelpDeskTicket.TicketDescription;

NewHelpDeskTickets.TicketRequesterEmail =

objHelpDeskTicket.TicketRequesterEmail;

NewHelpDeskTickets.TicketStatus =

objHelpDeskTicket.TicketStatus;

// Create a new GUID for this help desk ticket.

NewHelpDeskTickets.TicketGuid =

System.Guid.NewGuid().ToString();

// Save the new help desk ticket.

var result =

@Service.CreateTicketAsync(NewHelpDeskTickets);

// Clear the form.

objHelpDeskTicket = new HelpDeskTicket();

// Show the Toast.

ToastContent = "Saved!";

await Task.Delay(100);

await this.ToastObj.Show();

}

catch (Exception ex)

{

ToastContent = ex.GetBaseException().Message;

await this.ToastObj.Show();

}

Test the form

We can now run the project and enter new help desk tickets.

New Help Desk Ticket Form

Figure 49: New Help Desk Ticket Form

The user is presented with a New Help Desk Ticket form.

Select Ticket Status

Figure 50: Select Ticket Status

The user can select a ticket status using the Dropdown List control.

Select Ticket Date

Figure 51: Select Ticket Date

The user can select a Ticket Date using the DatePicker control.

Validation Errors

Figure 52: Validation Errors

If the user tries to save an incomplete record, they will see validation errors.

Save Ticket

Figure 53: Save Ticket

With a properly completed form, the user can click SAVE to save the data.

Toast Confirmation

Figure 54: Toast Confirmation

They will see a brief confirmation message by the Toast control.

View Data in the Database

Figure 55: View Data in the Database

If we look in the database, we will see the data has been added.

Enter data for at least six help desk tickets so that you will have enough data to demonstrate paging in the Syncfusion Data Grid covered in the following chapter.

Build modern Blazor apps

using Syncfusion® Blazor component suite

80+ high performance Blazor components.
Lightweight and user friendly.
Stunning Built-in themes with customization.

Get Your Free Trial Now

Creating New Tickets

OwningComponentBase

Blazor Toast component

Forms and validation

Forms

Validation

HelpDeskTicket class

Syncfusion Blazor controls

New ticket form

Test the form

DISCLAIMER: Web reader is currently in beta. Please report any issues through our support system. PDF and Kindle format files are also available for download.