locked
right layout for page with c# RRS feed

  • Question

  • User801846202 posted

    hi everyone i need help to present my page to be something like the photo number one i have try to make  a code in aspx page to convert the data in list to buttons but didn't work correctly because i try do paging system like the photo 


    photo1

    https://ibb.co/pWxnTr5 photo1 link 

    https://ibb.co/wW5f1Fb

    and what i have tried is this code 

    aspx code :

               
                    <div class="myslider owl-carousel owl-theme">
                        <div class="item" data-dot="<button><% paging.ToString();%></button>">
                            <div class="justify-content-center px-md-5 px-3 row pt-3">
                                <div class="justify-content-center px-md-5 px-3 row pt-3">
    
                                    <%
                                        foreach (var item in datas)
                                        {
                                            curitem = item;
                                            temp++;
                                            paging = (temp / 10) + 1;
                                    %>
    
                                    <div class=" col-md-2 col-6 p-0 game-section">
                                        <a onclick="gameonclick" title="<% curitem.game_name.ToString(); %>" id="<%curitem.id.ToString();%>">
                                            <img src="https://livedemo00.template-help.com/wt_52652/images/page1_img2.png"
                                                class="img-fluid" />
                                        </a>
                                    </div>
                                    <% } %>
                                </div>
                            </div>
    
                        </div> 
                      
                    </div>
    

    and i get this with list behinde the code with list of class (gameInstraction)

    onload method :

     
        public List datas;
        public GameInstractionDTO curitem;
        public int temp = 0;
        public  int paging = 1;
        string lobbyUrl = ConfigurationManager.AppSettings["Baseurl"].ToString();
        protected void Page_Load(object sender, EventArgs e)
        {
            var t = Task.Run(() => GetURI(new Uri(lobbyUrl + "api/Lobby/getgames")));
            t.Wait();
             datas = JsonConvert.DeserializeObject<List>(t.Result);
    
        
            
        }
    
    
        static async Task GetURI(Uri u)
        {
            var response = string.Empty;
            using (var client = new HttpClient())
            {
                HttpResponseMessage result = await client.GetAsync(u);
                if (result.IsSuccessStatusCode)
                {
                    response = await result.Content.ReadAsStringAsync();
                }
            }
            return response;
        }
    
    public class GameInstractionDTO
    {
        public int id { get; set; }
        public string game_name { get; set; }
        public string game_url { get; set; }
        public string game_image { get; set; }
        
    }

    and my result it's always like this
    result

    link of result photo https://ibb.co/5spC157
    please i need help
    Sunday, November 8, 2020 7:27 PM

All replies

  • User-1330468790 posted

    Hi josh1520,

     

    I think the problem is that you don't change the image for different items.

    As you can see in below codes:

     <div class="myslider owl-carousel owl-theme">
                        <div class="item" data-dot="<button><% paging.ToString();%></button>">
                            <div class="justify-content-center px-md-5 px-3 row pt-3">
                                <div class="justify-content-center px-md-5 px-3 row pt-3">
    
                                    <%
                                        foreach (var item in datas)
                                        {
                                            curitem = item;
                                            temp++;
                                            paging = (temp / 10) + 1;
                                    %>
    
                                    <div class=" col-md-2 col-6 p-0 game-section">
                                        <a onclick="gameonclick" title="<% curitem.game_name.ToString(); %>" id="<%curitem.id.ToString();%>">
                                            <img src="https://livedemo00.template-help.com/wt_52652/images/page1_img2.png"
                                                class="img-fluid" />
                                        </a>
                                    </div>
                                    <% } %>
                                </div>
                            </div>
    
                        </div> 
                      
                    </div>

    The codes marked with dark yellow background don't get changed and remain the url "https://livedemo00.template-help.com/wt_52652/images/page1_img2.png". 

    The image looks like:

     

    You might use <%%> to bind the property "game_image" of the class "GameInstractionDTO", which should be the url for the images.

     

    Hope helps.

    Best regards,

    Sean

    Monday, November 9, 2020 8:37 AM
  • User801846202 posted

    Hi sean fang 

    I know I made the photo static but i try to do the paging system 

    Monday, November 9, 2020 2:17 PM
  • User-1330468790 posted

    Hi josh1520,

     

    I understand that you want to know how to use owl carousel to construct a paging navigation, correct?

    If you have populated the data to the page correctly, then you will need to call owlCarousel() js function as below:

    $(document).ready(function () {
                $(".owl-carousel").owlCarousel({
                    items: 1,
                    nav: false,
                    dots: true,
                    dotsData: true
                });
            });

    More details, you could refer to below codes: 5 pictures per item, static data instead of querying from api.

    aspx:

    <form id="form1" runat="server">
            <div>
                <div class="myslider owl-carousel owl-theme">
                        <div class="item" data-dot="<button>1</button>">
                            <div class="justify-content-center px-md-5 px-3 row pt-3">
                                <div class="justify-content-center px-md-5 px-3 row pt-3">
                                    <div class=" col-md-2 col-6 p-0 game-section">
                                        <a onclick="gameonclick">
                                            <img src="https://livedemo00.template-help.com/wt_52652/images/page1_img2.png"
                                                class="img-fluid" />
                                        </a>
                                    </div>
                                     <div class=" col-md-2 col-6 p-0 game-section">
                                        <a onclick="gameonclick">
                                            <img src="https://livedemo00.template-help.com/wt_52652/images/page1_img2.png"
                                                class="img-fluid" />
                                        </a>
                                    </div>
                                     <div class=" col-md-2 col-6 p-0 game-section">
                                        <a onclick="gameonclick">
                                            <img src="https://livedemo00.template-help.com/wt_52652/images/page1_img2.png"
                                                class="img-fluid" />
                                        </a>
                                    </div>
                                     <div class=" col-md-2 col-6 p-0 game-section">
                                        <a onclick="gameonclick">
                                            <img src="https://livedemo00.template-help.com/wt_52652/images/page1_img2.png"
                                                class="img-fluid" />
                                        </a>
                                    </div>
                                     <div class=" col-md-2 col-6 p-0 game-section">
                                        <a onclick="gameonclick">
                                            <img src="https://livedemo00.template-help.com/wt_52652/images/page1_img2.png"
                                                class="img-fluid" />
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div> 
                    <div class="item" data-dot="<button>2</button>">
                            <div class="justify-content-center px-md-5 px-3 row pt-3">
                                <div class="justify-content-center px-md-5 px-3 row pt-3">
                                    <div class=" col-md-2 col-6 p-0 game-section">
                                        <a onclick="gameonclick">
                                            <img src="https://livedemo00.template-help.com/wt_52652/images/page1_img2.png"
                                                class="img-fluid" />
                                        </a>
                                    </div>
                                     <div class=" col-md-2 col-6 p-0 game-section">
                                        <a onclick="gameonclick">
                                            <img src="https://livedemo00.template-help.com/wt_52652/images/page1_img2.png"
                                                class="img-fluid" />
                                        </a>
                                    </div>
                                     <div class=" col-md-2 col-6 p-0 game-section">
                                        <a onclick="gameonclick">
                                            <img src="https://livedemo00.template-help.com/wt_52652/images/page1_img2.png"
                                                class="img-fluid" />
                                        </a>
                                    </div>
                                     <div class=" col-md-2 col-6 p-0 game-section">
                                        <a onclick="gameonclick">
                                            <img src="https://livedemo00.template-help.com/wt_52652/images/page1_img2.png"
                                                class="img-fluid" />
                                        </a>
                                    </div>
                                     <div class=" col-md-2 col-6 p-0 game-section">
                                        <a onclick="gameonclick">
                                            <img src="https://livedemo00.template-help.com/wt_52652/images/page1_img2.png"
                                                class="img-fluid" />
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    <div class="item" data-dot="<button>3</button>">
                            <div class="justify-content-center px-md-5 px-3 row pt-3">
                                <div class="justify-content-center px-md-5 px-3 row pt-3">
                                    <div class=" col-md-2 col-6 p-0 game-section">
                                        <a onclick="gameonclick">
                                            <img src="https://livedemo00.template-help.com/wt_52652/images/page1_img2.png"
                                                class="img-fluid" />
                                        </a>
                                    </div>
                                     <div class=" col-md-2 col-6 p-0 game-section">
                                        <a onclick="gameonclick">
                                            <img src="https://livedemo00.template-help.com/wt_52652/images/page1_img2.png"
                                                class="img-fluid" />
                                        </a>
                                    </div>
                                     <div class=" col-md-2 col-6 p-0 game-section">
                                        <a onclick="gameonclick">
                                            <img src="https://livedemo00.template-help.com/wt_52652/images/page1_img2.png"
                                                class="img-fluid" />
                                        </a>
                                    </div>
                                     <div class=" col-md-2 col-6 p-0 game-section">
                                        <a onclick="gameonclick">
                                            <img src="https://livedemo00.template-help.com/wt_52652/images/page1_img2.png"
                                                class="img-fluid" />
                                        </a>
                                    </div>
                                     <div class=" col-md-2 col-6 p-0 game-section">
                                        <a onclick="gameonclick">
                                            <img src="https://livedemo00.template-help.com/wt_52652/images/page1_img2.png"
                                                class="img-fluid" />
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                </div>
            </div>
        </form>

    JS function:

     <script>
            $(document).ready(function () {
                $(".owl-carousel").owlCarousel({
                    items: 1,
                    nav: false,
                    dots: true,
                    dotsData: true
                });
            });
        </script>

    Demo:

     

    Is this what you expect?

     

    Best regards,

    Sean

    Tuesday, November 10, 2020 7:57 AM
  • User801846202 posted

    yes that exactly the exception handling but i try to do with my css something like this 

            <div class="myslider owl-carousel owl-theme">

                        <%
                            foreach (var item in datas)
                            {


                                if (temp == temppaging)
                                {
                                    paging++;
                                    temppaging += 12;
                        %>

                        <div class="item" data-dot="<button><%paging.ToString();%></button>">
                            <div class="justify-content-center px-md-5 px-3 row pt-3">
                                <div class="justify-content-center px-md-5 px-3 row pt-3">

                                    <%    

                                        curitem = item;

                                        temp++;
                                    %>
                                    <div class=" col-md-2 col-6 p-0 game-section">
                                        <a onclick="gameonclick" id="<%curitem.id.ToString();%>">
                                            <img src="https://livedemo00.template-help.com/wt_52652/images/page1_img2.png"
                                                class="img-fluid" />
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <%
                                continue;
                            }
                            else
                            {

                                curitem = item;
                                temp++;
                        %>
                        <div class="item" data-dot="<button><%paging.ToString();%></button>">
                            <div class="justify-content-center px-md-5 px-3 row pt-3">
                                <div class="justify-content-center px-md-5 px-3 row pt-3">

                                    <div class=" col-md-2 col-6 p-0 game-section">
                                        <a onclick="gameonclick" id="<%curitem.id.ToString();%>">
                                            <img src="https://livedemo00.template-help.com/wt_52652/images/page1_img2.png"
                                                class="img-fluid" />
                                        </a>
                                    </div>
                                    <%
                                        continue;
                                    %>
                                </div>
                            </div>

                        </div>

                        <% 
                                
                                }
                            }
                        %>
                    </div>

    but in first if statement it display just one button and when the code is go in else it display the other with the  button number 2 and what i have in footer htm so exactly i have 15 elements in dates and i need to make a code display dynamically 12 elements in every pages

    thanks for you time to help me out

    Best regards,

    george

    Tuesday, November 10, 2020 8:30 PM