Create a Card View of data from database

Question

I'm trying to create a card view to loop products from the "product" table in the database

ProductCode
ProductDesription
ProductUnitPrice
CategoryName

ProductImage

I'd like to use Unit Price for the card title
Category for Subtitle and Content for Description

I've tried couple of ways but cant seem to make it work, kindly assist.
I want to create something like this with one button that opens a dialog box containing a editform to submit

Gunasekar Kuppusamy · Accepted Answer

Hi Boot, We have validated your query and we can display the cards with the pagination support by using the Grid Pager component. We have prepared a sample for your reference and we have done the following things in the below sample. Using the OnInitialized lifecycle, we displayed the three cards data on the UI (You can change the count as your need) When the page forward/backward buttons click, we have passed the corresponding particular number of cards data to the forEach loop to render the cards. When the product is clicked, we open a dialog with the form, we have also saved the current product code in the currentProduct variable. On the HandleValidSubmit method, we can get the entered data and selected product code when the form submit button is clicked. You can insert this data into the stored procedure. Code snippets:

@foreach (var data in newData) { iPhone X

Click }

Form

Data

@code { public double CurPage { get; set; } = 1; public string currentProduct { get; set; } private bool Visibility { get; set; } = false; private bool ShowButton { get; set; } = false; public class MobileData { public string ProductCode { get; set; } public string ProductDesription { get; set; } public string ProductUnitPrice { get; set; } public string CategoryName { get; set; } } protected override void OnInitialized() { newData = mobileData.Take(3); } private IEnumerable newData { get; set; } private IEnumerable mobileData = new[] { new MobileData { ProductCode="1000" , ProductDesription="The iPhone is the first smartphone designed and marketed by Apple Inc. After years of rumors and speculation, it was officially announced in January 2007, and was released in the United States in June." , ProductUnitPrice="10,000" ,CategoryName="Mobile" }, . . . new MobileData { ProductCode="1015" , ProductDesription="The iPhone is the first smartphone designed and marketed by Apple Inc. After years of rumors and speculation, it was officially announced in January 2007, and was released in the United States in June." , ProductUnitPrice="20,000" ,CategoryName="Mobile" } }; private void CardClick(string id) { currentProduct = id; this.Visibility = true; } public class ExampleModel { [Required] [StringLength(10, ErrorMessage = "Name is too long.")] public string Name { get; set; } } private ExampleModel exampleModel = new(); private void HandleValidSubmit(EditContext context) { ExampleModel contextModel = (ExampleModel)context.Model; var code = currentProduct; //You can get the selected item product code and entered details here. } //pager click event public void click(PageChangedEventArgs args) { newData = mobileData.Skip((int)(3 * (args.CurrentPage - 1))).Take(3); // updte the currentpage CurPage = args.CurrentPage; }} sample: https://www.syncfusion.com/downloads/support/forum/167987/ze/Blazor_App313986365 Please check the sample and update us if the sample meets your requirementsRegards, Gunasekar

Gunasekar Kuppusamy · Answer

Hi Boot, Greetings from Syncfusion support. We have validated your requirement "I'm trying to create a card view to loop products from the "product" table in the database". Yes, we can achieve this requirement using the card and dialog components. We have created a sample for your reference. We have done the following things on the sample, The list data has been iterated to render the list of card components. We have used UnitPrice for the card title,Category for Subtitle, and Content for Description. Also rendered a button inside the card. On that button click, we have opened a dialog with the form and submit button. You can change the fields as needed. When clicking the submit button, HandleValidSubmit method will be triggered. You can handle the action here. Code snippets:

@foreach (var data in mobileData) { iPhone X

check }

Form

Data

@code { private bool Visibility { get; set; } = false; private bool ShowButton { get; set; } = false; public class MobileData { public string ProductCode { get; set; } public string ProductDesription { get; set; } public string ProductUnitPrice { get; set; } public string CategoryName { get; set; } } private IEnumerable mobileData = new[] { new MobileData { ProductCode="1000" , ProductDesription= "The iPhone is the first smartphone designed and marketed by Apple Inc. After years of rumors and speculation, it was officially announced in January 2007, and was released in the United States in June." , ProductUnitPrice="10,000" ,CategoryName="Mobile" }, new MobileData { ProductCode="1001" , ProductDesription= "The iPhone is the first smartphone designed and marketed by Apple Inc. After years of rumors and speculation, it was officially announced in January 2007, and was released in the United States in June." , ProductUnitPrice="20,000" ,CategoryName="Mobile" } }; private void OnBtnClick() { this.Visibility = true; } public class ExampleModel { [Required] [StringLength(10, ErrorMessage = "Name is too long.")] public string Name { get; set; } } private ExampleModel exampleModel = new(); private void HandleValidSubmit() { // Process the valid form } Sample: https://www.syncfusion.com/downloads/support/forum/167987/ze/Blazor_App1613678728Please check the sample and let us know if the sample meets your requirement. Regards, Gunasekar

Boot Dat · Answer

Hello Gunasekar, thanks for your response. So i created a card view successfully per my liking. Now the problem is, i have many list in my product database and all are showing as a long list.. How can i include paging to the sfcard component so it shows at least 10 products in each page And another issue im trying to figure out is how to get the ProductID from a card which a user clicks on it button the button opens a dialog containing an edit form to submit. I'd want to submit the data including the selected ProductID into a database using an insert stored procedure i already haveMy code so far belowSnippet

@foreach (var cardview in products) { cake

Order }

@dialogHeaderText

@code { IEnumerable cardviewByProduct; IEnumerable flavor; Product productCard = new Product(); [Parameter] public int ProductID { get; set; } bool Clicked = false; string dialogHeaderText = ""; SfDialog DialogAddEditOrderLine; SfCard ProductCard; WarningPage Warning; string WarningHeaderMessage = ""; string WarningContentMessage = ""; public CustomerOrder addeditOrderLine = new CustomerOrder(); public List products = new List(); protected override async Task OnInitializedAsync() { productCard = await ProductService.Product_GetOne(ProductID); //cardviewByProduct = ProductService.ProductList; cardviewByProduct = await ProductService.ProductList(); products = cardviewByProduct.ToList(); //Convert from IEnumable to List addeditOrderLine.OrderDeliveryDate = DateTime.Now; addeditOrderLine.OrderPickupTime = DateTime.Now; } private void onToggleClick(Microsoft.AspNetCore.Components.Web.MouseEventArgs args) { } private async Task OrderLineSave() { } public async Task OnClick() { Clicked = !Clicked; if (Clicked) { dialogHeaderText = "Please Fill in Details"; //Opens Dialog addeditOrderLine = new CustomerOrder(); // Ensures a blank form when adding await this.DialogAddEditOrderLine.Show(); } else { // } } private async Task CloseDialog() { await this.DialogAddEditOrderLine.Hide(); } }

Boot Dat · Answer

For better clarification if needed . I want that during the opening of the dialog box, a code should run to pick the ProductID of that specific Card view product that the end user clicked on its button to make an order. and when the user fills in details and clicks on "Place Order". the "Place Order" button calls an insert stored procedure and inserts the details filled in the edit form INCLUDING the ProductID of the product selected.

Boot Dat · Answer

Hi Gunasekar

I wanted to check if the ProductID number was picked by the press of the button

<CardFooterContent>
 <SfButton CssClass="e-btn e-outline e-primary" @onclick="() => CardClick(cardview.ProductID)">Order</SfButton>
</CardFooterContent>

so i added a numberic textbox to view it in the editform

<SfNumericTextBox Enabled="false" Placeholder="Product ID"
                                     FloatLabelType="@FloatLabelType.Always"
                                     ShowSpinButton="false"
                                     Format="n0"
                                     @bind-Value="addeditOrderLine.OrderProductID"
                                     CssClass="e-style">
                                     
</SfNumericTextBox>

and i passed currentproduct which i presume should contain the ProductID to the numeric textbox bind value

private async Task CardClick(int id)
    {
        currentProduct = id;
        addeditOrderLine.OrderProductID = currentProduct;
 
        //Opens Dialog
 
        dialogHeaderText = "Please Fill in Details";
 
        addeditOrderLine = new CustomerOrder();          // Ensures a blank form when adding
        await this.DialogAddEditOrderLine.Show();
    }

number but it comes back as 0 for any card selected

I'd like to know if i'm doing something wrong.

and with the paging i get an error 'Product' does not contain a definition for 'Skip'

Snippet

IEnumerable<Product> cardviewByProduct;

Snippet

//pager click event
  public void nextpage(PageChangedEventArgs args)
  {
      products = Product.Skip((int)(3 * (args.CurrentPage - 1))).Take(3);
      // updte the currentpage
      CurPage = args.CurrentPage;
  }

Boot Dat · Answer

Hi,  i just figured why the productID wasnt working and was coming as 0 . I had a code beneath that ensures a blank form when the dialog opens. So i commented it out and i now get the ProductID. Thanks for your help GunasekarSnippetprivate async Task CardClick(int id)
   {
       currentProduct = id;
       addeditOrderLine.OrderProductID = currentProduct;
 
       //Opens Dialog
 
       dialogHeaderText = "Please Fill in Details";
 
       //*ddeditOrderLine = new CustomerOrder();          // Ensures a blank form when adding*/
       await this.DialogAddEditOrderLine.Show();
   }​

Gunasekar Kuppusamy · Answer

Hi Boot,  
  
Thanks for the update.  
We are glad that you have resolved the issue from yoursend. Please let us know if you need further assistance.  
  
Regards,  
Gunasekar

Boot Dat · Answer

Hi Gunasekar,

I'd like to inform you again that the paging for the sfcard doesnt work. Can you kindly help me resolve it ?

Snippet

IEnumerable <Product> cardviewByProduct;
private IEnumerable<Product> newData { get; set; }

Snippet

//pager click event
   public void nextpage(PageChangedEventArgs args)
   {
       newData = cardviewByProduct.Skip((int)(3 * (args.CurrentPage - 1))).Take(3);
       // updte the currentpage
       CurPage = args.CurrentPage;
   }

Indrajith Srinivasan · Answer

Hi Boot, 
 
Good day to you, 
 
We have checked the already shared sample, in the forum in which the paging for the SfCard works fine. Below is the ensured sample,  are you facing any issues with the shared sample ? 
 
Sample: https://www.syncfusion.com/downloads/support/forum/167987/ze/Blazor_App313986365  
 
Also, we suspect the reported issue occurs due to missing assembly references, check the below shared link for reference.  
 
StackOverflow link: https://stackoverflow.com/a/15812962/8319836 
 
Please get back to us if you are still facing the reported issue, 
 
Regards, 
Indrajith

Boot Dat · Answer

Hello Indrajith Srinivasan TotalRecordsCount="5"Which means the pages are limited to the number i put there..How can i change that so it auto gives the total number pages due to the total number of products the sfcard is displaying by the mobileData.Take(3); ?

Indrajith Srinivasan · Answer

Hi Boot,

We have validated your reported query. You can find the total cards to be loaded in the mobileData.Count(), from which you can split the pages based on the record count taken and assign it for the RecordCount property. Check the below shared ode blocks for reference.

Code blocks:

@code {

protected override void OnInitialized()

{

newData = mobileData.Take(3);

RecordCount = mobileData.Count() / newData.Count();

}

Please let us know if you have any concerns,

Regards,

Indrajith

Boot Dat · Answer

Hi

Indrajith Srinivasan, Thanks for your feedback, was really helpful. But i believe with

RecordCount = newData.Count();  what it means is that, it will make RecordCount value = 3 or perhaps it will make the value any number we set

mobileData.Take() because we are assigning that to newData.for instance, if  protected override void OnInitialized()     {         newData = mobileData.Take(3);         RecordCount = newData.Count();     } then RecordCount value will be 3so if i have 16 cards in total, it means i'll only get 3 pages which will be only 9 cards to display  (3 per page)But i cant seem to get the count of the number of cards that should be displayed in total. if i do, what i'll then do is divide the count by the number in Take() so i will get the accurate value for RecordCount.

Indrajith Srinivasan · Answer

Hi Boot, 
 
We have validated your reported query. You can find the total cards to be loaded in the mobileData.Count(), from which you can split the pages based on the record count taken and assign it for the RecordCount property. Check the below shared ode blocks for reference. 
 
Code blocks: 
 




@code { 
   protected override void OnInitialized() 
    { 
        newData = mobileData.Take(3); 
        RecordCount = mobileData.Count() / newData.Count(); 
    } 
} 
 
Please let us know if you have any concerns, 
 
Regards, 
Indrajith

Boot Dat · Answer

Hi

IndrajithThat helped .thanks

Indrajith Srinivasan · Answer

Hi Boot,Welcome,Please get back to us if you need any further assistance.Regards,Indrajith

Boot Dat · Answer

HI Indrajith Srinivasan

    private async Task OnChangeCategory(Syncfusion.Blazor.DropDowns.ChangeEventArgs<int, Category> args)
    {
        productCard = await ProductService.Product_GetOne(ProductID);
        cardviewByProduct = await ProductService.ProductListbyCategoryAndImage(args.ItemData.CategoryID);
        CurPage = 1;
        products = cardviewByProduct.Take(4);
        RecordCount = cardviewByProduct.Count() / products.Count() + 1;
    }

After i query products by category and select a product, enter details in the dialog box and save with the below method

  private async Task OrderLineSave()
    {
        // Insert customer inputed details into customer order table
        await CustomerOrderService.CustomerOrderInsert(addeditOrderLine);
        // insert details into POheader table to create an order header
        await OrderHeaderLineSave();
        //hide addedit dialog box
        await this.DialogAddEditOrderLine.Hide();
        await this.ToastObj.Show(Toast[1]);
        // clear data in addedit dialong
        addeditOrderLine = new CustomerOrder();
        await this.ToastObj.Show(Toast[3]);
    }

I get an error in

private async Task OnChangeCategory(Syncfusion.Blazor.DropDowns.ChangeEventArgs<int, Category> args)

saying (args.ItemData.CategoryID); is null. I understand the problem, but i'd like to understand why after i use private async Task OrderLineSave() it goes back to make my category ID null in

private async Task OnChangeCategory(Syncfusion.Blazor.DropDowns.ChangeEventArgs<int, Category> args)

Indrajith Srinivasan · Answer

Hi Boot, 
 
We have validated the reported query “i'd like to understand why after i use private async Task OrderLineSave() it goes back to make my category ID null in”. We are not clear with the exact issue, you are facing can you please share us the following details to understand further on the reported issue ? 
 

Can you please share us the code blocks used in your application ?
Can you please share us any minimal issue reproducing steps or sample, to replicate the issue from our end ?
 
The above details will be helpful for us to further investigate on the reported issue and suggest you a solution. 
 
Regards, 
Indrajith

Boot Dat · Answer

Hi

IndrajithIve figured out why i was getting the error and fixed it. Thanks very much for all the su

Vinitha Jeyakumar · Answer

Hi Boot,We are glad that your issue has been resolved. Please get
back to us if you need any further assistance.Regards,Vinitha