How to Create TestiMonials Display Repeater Control With Database Using JavaScript in Asp.Net C#.

01:45:00  , , , ,  1 comment

Create TestiMonials Using JavaScript


Create Testimonials Using JavaScript and Display the Reprater Control Directly Call the SqlDataSource in Asp.Net C#.

 DEMO


                     Download Coding

                             Download


               HTML CODING

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <link href="StyleSheet.css" rel="stylesheet" />

<style type="text/css">
.testimonial
{
margin: 0;
background: #F88FBA;
padding: 10px 50px;
position: relative;
font-family: Georgia, serif;
color: #666;
border-radius: 5px;
font-style: italic;
text-shadow: 0 1px 0 #BBDCFD;
background-image: linear-gradient(#FFFFFF, #FFFFFF);
}
.testimonial:before, .testimonial:after
{
content: "\201C";
position: absolute;
font-size: 80px;
line-height: 1;
color: #FFFFFF;
font-style: normal;
}
.testimonial:before
{
top: 0;
left: 10px;
}
.testimonial:after
{
content: "\201D";
right: 10px;
bottom: -0.5em;
}

.arrow-down
{
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid #F648C3;
margin: 0 0 0 25px;
}
.testimonial-author
{
margin: 0 0 0 25px;
font-family: Arial, Helvetica, sans-serif;
color: #999;
text-align:left;
}
.testimonial-author span
{
font-size: 12px;
color: #666;
}
</style>
</head>
<body>
    <form id="form1" runat="server">
   <div style="width:50%">
        <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1" OnItemCommand="Repeater1_ItemCommand">

        <ItemTemplate>
    <blockquote class="testimonial">

        
<%#Eval("message")%>
        

        </blockquote>
<div class="arrow-down"></div>
<p class="testimonial-author"><%#Eval("author")%> | <span>   <%#Eval("address")%></span></p>
        </ItemTemplate>


        </asp:Repeater>
        <asp:SqlDataSource ID="SqlDataSource1" 
runat="server" ConnectionString="<%$ ConnectionStrings:dbcon %>" SelectCommand="SELECT * FROM [test]"></asp:SqlDataSource>

    </div>
    </form>
</body>
</html>



 First - Create New WebForm - Add Repeater Control 



Next - Repeater Control  - New DataSource Add



Next - Select DataBase - OK





Next - Select - DataBase Name - Next




Next - Select Related DataBase Table & Fields







Next - Select Test Query - Finish.





Next - Assigned DataBase Fields 






Html Coding for SqlDatasource Connection








 Next - Bind The Repeater Contols Item Templates DataBase Fields
Next - Add Css Files For Repeater Control All  Display Details




Next - Show The All Binded Data & Css  Files Added Display Repeater 






Next - Add DataBase Fields 




Next - Run[F5] the Form - Display the Testimonials


1 comment:

  1. Unknown27 December 2020 at 11:06

    Not all heroes wear capes. Thank you bucket loads for this solution

    ReplyDelete