How to Create CardView ?

[Nezar Alazzabi]

How to create CardView in ASP.NET WebForms ? am really lost , i want to display my products like ( Image , Price , and button ) in one card?

[Deepa Loganathan]

Hi Nezar,  

 

Thanks for contacting Syncfusion support.  

 

We understood your requirement to use Card component in Webforms application. Since EJ2 Card is a pure CSS component you can add it to your application just by referring the CSS in your master page layout as given below.  

………………… 

<link rel='nofollow' href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" rel="stylesheet" /> 

………………… 

 

Please check out the below help page to explore more about the usage of Card component.  

 

UG: https://ej2.syncfusion.com/javascript/documentation/card/es5-getting-started  

 

Demo: https://ej2.syncfusion.com/demos/#/material/card/tile.html  

 

Please find the code block required to display Image, price and a add button inside the Card component.  

 

 

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 

    <style> 

        .e-card { 

            width: 150px; 

        } 

 

        .label_amount, .amount { 

            display: inline-block; 

            width: 48%; 

        } 

 

        .e-card-actions { 

            display: block; 

            float:right; 

        } 

    </style> 

 

    <div class="control-section card-control-section"> 

        <div class="e-card-resize-container"> 

            <div> 

                <div class="row card-layout"> 

                    <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6"> 

                        <div tabindex="0" class="e-card"> 

                            <img class="img-responsive" src="Content/images/Tile_4.png" /> 

                            <div class="e-card-content"> 

                                <div class="label_amount">Price</div> 

                                <div class="amount">$80 </div> 

                                <div class="e-card-actions"> 

                                    <button class="e-card-btn">Add</button> 

                                </div> 

                            </div> 

                        </div> 

                    </div> 

                </div> 

            </div> 

        </div> 

    </div> 

</asp:Content> 

 

 

 

Please get back to if you have any further queries.  

 

Regards,  

Deepa L.