right layout for page with c#

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 

---

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 


link of result photo https://ibb.co/5spC157
please i need help 

Answer 1

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

Answer 2

User801846202 posted

Hi sean fang 

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

Answer 3

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

Answer 4

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