In blazor, how do I let a razor component with a card pop up after a click on a button/pic

Ningran Meng 21

I am doing a web app that helps my colleagues search for projects, how do I make a razor component with project status pop up after a click event?

Accepted answer

Anonymous

2021-11-29T08:26:11.123+00:00

Hi @Ningran Meng ,

Welcome to Microsoft Q&A forum.

how do I make a razor component with project status pop up after a click event?

Not sure what effect you want to achieve in the end, can you make a simple sample to explain more detail about the popup card?

Besides, for the popup modal and cards, you could consider using the Boostrap Modals and Cards. You can also refer to the following articles:

Creating Your First Modal Pop Up Custom Component Using Blazor Web Assembly And .NET Core 3.1

Modal Popup Window In Blazor WebAssembly

Best Regards,
Dillion
Please sign in to rate this answer.
Ningran Meng 21 Reputation points

2021-12-02T22:50:18.017+00:00

Thanks a lot, these are all helpful. All your links are very helpful. Can I specify the effect as the ones similar to the ones in Wayfair.com, and can you post this answer as an official answer so I can officially say it's helpful and close this question?

Thanks.

Anonymous

2021-12-03T01:42:03.557+00:00

Hi @Ningran Meng ,

Glad to hear it did help resolve the problem. And I convert it as an answer, hoping it can help other community members quickly fix similar issues.

Can I specify the effect as the ones similar to the ones in Wayfair.com

From the Wayfair website, I didn't find the related behavior that using the popup with the cards, but found that it uses cards to list the product or category.

So, can you explain more detail about the effect? Do you mean you want to display the product or category using the card, and show the cards multiple per row?

To display multiple cards per row, you could use the Bootstrap Cards and the BootStrap Grid, you can also refer this sample.

The output is like this:

Best regards,
Dillion
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

1 additional answer

Michael Washington 921 Reputation points MVP

2021-11-28T19:49:16.487+00:00

See: Creating A Step-By-Step End-To-End Database Server-Side Blazor Application (updated to .Net 6)
Please sign in to rate this answer.

2 people found this answer helpful.

0 comments No comments
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Your answer