Asked by:
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
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 helpSunday, 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