Googlemaps markers and links - google-maps-api-3

Googlemaps map icon problem. As you can see all map icons end up below the first link "Bendt Bil". Now all I need is to place the small map icons beside the links, one small map beside each link.
Example page 41
wrong and right pictures
<html>
<head>
<title>example_map41</title>
</head>
<body>
<table border=1>
<tr>
<td>
<a id="top"></a>
<img src="http://i60.tinypic.com/4i1xli.png">Bilar
<br>
<img src="http://i60.tinypic.com/4i1xli.png">Biluthyrning
<br>
</td>
<td></td>
</tr>
<tr>
<td colspan="2">
<!-- <script src="https://online.adservicemedia.dk/showflash.php?
bid=465284&id=7835" type="text/javascript" encoding="utf-8"></script> -->
<br>
</td>
</tr>
<tr>
<td>
<a id="bila"><b>BILAR</b></a>
<br>
<a href="http://www.bendtbil.se" style="color:black"
target="_blank">Bendt Bil AB</a> <div id="side_bar"
style="position:relative;right:0;top:0;"></div>
<br>
<a href="http://www.motorhalland.se" style="color:black"
target="_blank">Motor AB Halland</a>
<br>
<a href="http://www.bilmansson.com" style="color:black"
target="_blank">Bil-Månsson i Halland AB</a>
<br>
<br>
<a href="http://www.rejmesbil.se" style="color:black"
target="_blank">Rejmes Bil</a>
<br>
<br>
<a href="http://www.klasenbil.se" style="color:black"
target="_blank">Klasén Bil</a>
<br>
<br>
<a href="http://www.hedinbil.se" style="color:black"
target="_blank">Hedin Bil</a>
<br>
<br>
<a href="http://www.lpbilar.se" style="color:black"
target="_blank">LP-bilar i Halland AB</a>
<br>
<br>
<a href="http://toyotahalmstad.se" style="color:black"
target="_blank">Toyota-Center</a>
<br>
<br>
<a href="http://plus.google.com/102020664711772777647/about?
gl=se&hl=sv" style="color:black" target="_blank">Motorsalongen</a>
<br>
<br>
<a href="http://www.sannarpsbil.se" style="color:black"
target="_blank">Sannarps Bil AB</a>
<br>
<br>
<img src="http://i57.tinypic.com/2eftbft.png"> upp
<br>
<br>
<a href="http://www.flygstadensbil.se" style="color:black"
target="_blank">Flygstadens Bil</a>
<br>
<br>
<a href="http://plus.google.com/113011163701256911230/about?
gl=se&hl=sv" style="color:black" target="_blank">Sportpromotion J Greger AB</a>
<br>
<br>
<a href="http://www.gpbil.se" style="color:black" target="_blank">GP
Bil AB</a>
<br>
<br>
<a href="http://www.hitta.se/bilialen/halmstad/xRRP-4vUU1"
style="color:black" target="_blank">Bilialen</a>
<br>
<br>
<a href="http://www.halmstadbil.com" style="color:black"
target="_blank">Halmstad Bil</a>
<br>
<br>
<a href="http://www.bilgaraget.se/bilhandlare/gpetterssonbil"
style="color:black" target="_blank">Gösta Pettersson Bil AB</a>
<br>
<br>
<a href="http://plus.google.com/107958965564780755815/about?
gl=se&hl=sv" style="color:black" target="_blank">MH Bil</a>
<br>
<br>
<a href="http://www.wahlstromsbil.se" style="color:black"
target="_blank">Wahlströms Bil AB</a>
<br>
<br>
<img src="http://i57.tinypic.com/2eftbft.png"> upp
<br>
<br>
<a id="hyra"><b>BILUTHYRNING</b></a>
<br>
<br>
<a href="http://www.hertz.se/rentacar/location" style="color:black"
target="_blank">Hertz</a>
<br>
<br>
<a href="http://www.mabi.se/#!/offices/halmstad" style="color:black"
target="_blank">MABI</a>
<br>
<br>
<a href="http://www.rent-a-wreck.se/?hyrbil=halmstad"
style="color:black" target="_blank">Rent-A-Wreck</a>
<br>
<br>
<a href="http://se.sixt.com/biluthyrning/sverige/halmstad"
style="color:black" target="_blank">Sixt</a>
<br>
<br>
<a href="http://www.europcar.se/station-finder?countryCode=SE"
style="color:black" target="_blank">Europcar</a>
<br>
<br>
<a href="http://www.avis.se/hyrbil/Europa/Sverige/Halmstad"
style="color:black" target="_blank">Avis</a>
<br>
<br>
<a
href="http://www.budget.se/budgetonline/se/budget.nsf/c/kontor,biluthyrning-
halmstad" style="color:black" target="_blank">Budget</a>
<br>
<br>
<a href="http://www.allwayshyrfordon.se" style="color:black"
target="_blank">All Ways Hyrfordon AB</a>
<br>
<br>
<a href="http://www.okq8.se/hyrbil" style="color:black"
target="_blank">OKQ8</a>
<br>
<br>
<a href="http://rejmesbil.se/sida/rejmes-biluthyrning"
style="color:black" target="_blank">Rejmes Bil</a>
<br>
<br>
<a href="http://www.statoil.se/sv_SE/pg1334072572280/st1/Sok-
station.html?stationid=26233&countryid=se" style="color:black"
target="_blank">Statoil</a>
<br>
<br>
<a href="http://www.halmstadsbilpool.se" style="color:black"
target="_blank">Halmstads Bilpool</a>
<br>
<br>
<img src="http://i57.tinypic.com/2eftbft.png"> upp
<br>
<br>
</td>
<td valign="top">
<div id="map"
style="position:relative;width:500px;height:400px;top:0;left:0"></div>
<script src="https://maps.googleapis.com/maps/api/js?
v=3.exp&sensor=false"></script>
<script type="text/javascript">
//<![CDATA[
// this variable will collect the html which will be placed in the
side_bar
var side_bar_html = "";
// arrays to hold copies of the markers and html by the side_bar
// because the function closure trick doesnt work there
var gmarkers = [];
var infoWnd = new google.maps.InfoWindow();
// A function to create the marker and set up the event window
function createMarker(point, name, html) {
var marker = new google.maps.Marker({
position: point,
icon:'Pin-icon.png'
});
google.maps.event.addListener(marker, "click", function() {
infoWnd.setContent(html);
infoWnd.open(marker.getMap(), marker);
});
// save the info we need to use later for the side_bar
gmarkers.push(marker);
// add a line to the side_bar html
side_bar_html += '<a href="javascript:myclick(' +
(gmarkers.length - 1) + ')">' + name + '<\/a><br>';
return marker;
}
// This function picks up the click and opens the corresponding
info window
function myclick(i) {
google.maps.event.trigger(gmarkers[i], "click");
}
// create the map
function initialize() {
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(56.67437, 12.85779),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById
('map'), mapOptions);
// add the points
var point = new google.maps.LatLng(56.680652, 12.886448);
var marker = createMarker(point,'<img src="maps.png">','<a
href="http://www.bendtbil.se" style="color:black" target="_blank">Bendt Bil
AB</a>');
marker.setMap(map);
var point = new google.maps.LatLng(56.663724, 12.860540);
var marker = createMarker(point,'<img src="maps.png">','<a
href="http://www.motorhalland.se" style="color:black" target="_blank">Motor AB
Halland</a>');
marker.setMap(map);
var point = new google.maps.LatLng(56.680101, 12.810132);
var marker = createMarker(point,'<img src="maps.png">','<a
href="http://www.bilmansson.com" style="color:black" target="_blank">Bil-
Månsson i Halland AB</a>');
marker.setMap(map);
// put the assembled side_bar_html contents into the
side_bar div
document.getElementById("side_bar").innerHTML =
side_bar_html;
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</td>
</tr>
</table>
</body>
</html>


<html>
<head>
<title>example_map41</title>
</head>
<body>
<table border=1>
<tr>
<td>
<a id="top"></a>
<a href="#bila">
<img src="http://i60.tinypic.com/4i1xli.png">
</a>Bilar
<br>
<a href="#hyra">
<img src="http://i60.tinypic.com/4i1xli.png">
</a>Biluthyrning
<br>
</td>
<td></td>
</tr>
<tr>
<td colspan="2">
<!-- <script src="https://online.adservicemedia.dk/showflash.php?
bid=465284&id=7835" type="text/javascript" encoding="utf-8"></script> -->
<br>
</td>
</tr>
<tr>
<td>
<a id="bila"><b>BILAR</b></a>
<br>
Bendt Bil AB
<a href="javascript:;" id="googlemapLinkBendtBilAB">
<img src="maps.png" height="20" width="20">
</a>
<div id="side_bar" style="position:relative;right:0;top:0;"></div>
<br>
Motor AB Halland
<a href="javascript:;" id="googlemapLinkMotorABHalland">
<img src="maps.png" height="20" width="20">
</a>
<br>
Bil-Månsson i Halland AB
<a href="javascript:;" id="googlemapLinkBil-MnssoniHallandAB">
<img src="maps.png" height="20" width="20">
</a>
<br>
<br>
Rejmes Bil
<br>
<br>
Klasén Bil
<br>
<br>
Hedin Bil
<br>
<br>
LP-bilar i Halland AB
<br>
<br>
Toyota-Center
<br>
<br>
<a href="http://plus.google.com/102020664711772777647/about?
gl=se&hl=sv" style="color:black" target="_blank">Motorsalongen</a>
<br>
<br>
Sannarps Bil AB
<br>
<br>
<a href="#top">
<img src="http://i57.tinypic.com/2eftbft.png">
</a> upp
<br>
<br>
Flygstadens Bil
<br>
<br>
<a href="http://plus.google.com/113011163701256911230/about?
gl=se&hl=sv" style="color:black" target="_blank">Sportpromotion J Greger AB</a>
<br>
<br>
<a href="http://www.gpbil.se" style="color:black" target="_blank">GP
Bil AB</a>
<br>
<br>
Bilialen
<br>
<br>
Halmstad Bil
<br>
<br>
Gösta Pettersson Bil AB
<br>
<br>
<a href="http://plus.google.com/107958965564780755815/about?
gl=se&hl=sv" style="color:black" target="_blank">MH Bil</a>
<br>
<br>
Wahlströms Bil AB
<br>
<br>
<a href="#top">
<img src="http://i57.tinypic.com/2eftbft.png">
</a> upp
<br>
<br>
<a id="hyra"><b>BILUTHYRNING</b></a>
<br>
<br>
Hertz
<br>
<br>
MABI
<br>
<br>
Rent-A-Wreck
<br>
<br>
Sixt
<br>
<br>
Europcar
<br>
<br>
Avis
<br>
<br>
<a href="http://www.budget.se/budgetonline/se/budget.nsf/c/kontor,biluthyrning-
halmstad" style="color:black" target="_blank">Budget</a>
<br>
<br>
All Ways Hyrfordon AB
<br>
<br>
OKQ8
<br>
<br>
Rejmes Bil
<br>
<br>
<a href="http://www.statoil.se/sv_SE/pg1334072572280/st1/Sok-
station.html?stationid=26233&countryid=se" style="color:black" target="_blank">Statoil</a>
<br>
<br>
Halmstads Bilpool
<br>
<br>
<a href="#top">
<img src="http://i57.tinypic.com/2eftbft.png">
</a> upp
<br>
<br>
</td>
<td valign="top">
<div id="map" style="position:relative;width:500px;height:400px;top:0;left:0"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
//<![CDATA[
// this variable will collect the html which will be placed in the
side_bar
var side_bar_html = "";
// arrays to hold copies of the markers and html by the side_bar
// because the function closure trick doesnt work there
var gmarkers = [];
var infoWnd = new google.maps.InfoWindow();
// A function to create the marker and set up the event window
function createMarker(point, imageId, html) {
var marker = new google.maps.Marker({
position: point,
icon: 'Pin-icon.png'
});
google.maps.event.addListener(marker, "click", function() {
infoWnd.setContent(html);
infoWnd.open(marker.getMap(), marker);
});
// save the info we need to use later for the side_bar
gmarkers.push(marker);
// add href to each link
document.getElementById(imageId).href = 'javascript:myclick(' + (gmarkers.length - 1) + ')';
/*side_bar_html += '<a href="javascript:myclick(' +
(gmarkers.length - 1) + ')">' + name + '<\/a><br>';*/
return marker;
}
// This function picks up the click and opens the corresponding info window
function myclick(i) {
google.maps.event.trigger(gmarkers[i], "click");
}
// create the map
function initialize() {
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(56.67437, 12.85779),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById
('map'), mapOptions);
// add the points
var point = new google.maps.LatLng(56.680652, 12.886448);
var marker = createMarker(point, 'googlemapLinkBendtBilAB', 'Bendt Bil AB');
marker.setMap(map);
var point = new google.maps.LatLng(56.663724, 12.860540);
var marker = createMarker(point, 'googlemapLinkMotorABHalland', 'Motor AB Halland');
marker.setMap(map);
var point = new google.maps.LatLng(56.680101, 12.810132);
var marker = createMarker(point, 'googlemapLinkBil-MnssoniHallandAB', 'Bil-Månsson i Halland AB');
marker.setMap(map);
// put the assembled side_bar_html contents into the side_bar div
document.getElementById("side_bar").innerHTML = side_bar_html;
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</td>
</tr>
</table>
</body>
</html>

Related

how can i solve elevatezoom doesnt work correctly

i'm new on laravel,
i use elevatezoom in my gallery image. when i change photo, the photo change but elevatezoom show first image. how can i sove this problem.
my html code is here
<div class="col-md-10" id="product-gallery-image" style="float: left">
<img class="mainimage" id="zoom-product" src="{{url($product->thumbnail)}}"
data-zoom-image="{{url($product->img)}}" style="max-width: 100%">
</div>
<div class="col-md-2" style="float: right;padding: 0" id="product_galery">
<ul class="gallery-ul">
<li data-image="{{url($product->thumbnail)}}" data-main-image="{{url($product->img)}}">
<img src="{{url($product->thumbnail)}}"
style="width: 100%">
</li>
<li data-image="{{url($product->thumbnail1)}}" data-main-image="{{url($product->img1)}}">
<img style="max-width: 100%"
src="{{url($product->thumbnail1)}}">
</li>
<li data-image="{{url($product->thumbnail2)}}" data-main-image="{{url($product->img2)}}">
<img style="max-width: 100%"
src="{{url($product->thumbnail2)}}">
</li>
</ul>
</div>
and jquery codes are here,
<script>
var productgalery = $('#product_galery');
var subnailproductgalery = productgalery.find('.gallery-ul li');
subnailproductgalery.click(function () {
var index = $(this).index();
var mainimageurl = $(this).attr('data-main-image');
var thumbimageurl = $(this).attr('data-image');
$('.gallery-ul li').removeClass('activeli');
$(this).addClass('activeli');
showgallery(mainimageurl, thumbimageurl);
})
function showgallery(imageurl, thumb) {
var productgalleryimage = $('#product-gallery-image');
productgalleryimage.find('.mainimage')
.attr('src', thumb)
.attr('data-zoom-image', imageurl)
.elevateZoom();
}
$('#zoom-product').elevateZoom({
'zoomWindowOffetx': -880,
'zoomWindowWidth': 500,
});

X.PagedList .NET Core First Page always selected in #Html.PagedListPager

I have created pagination for .Net Core 3 project using X.PagedList nuget, when I click on page number it call action that retrieve partial view and update div for data list, all ok but when I click on page number 2 the data in list updated but current page selection is still on 1, it should changed to 2. and every time click on page greater that 1 the selection remain on 1 in PagedListPager.
#Html.PagedListPager(Model.OrderViewModels, page => Url.Action("OrdersSearch2", "Orders",
new { ViewBag.SearchName, page = page }),
PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new PagedListRenderOptions
{
LiElementClasses = new string[] { "page-item" },
PageClasses = new string[] { "page-link" },
}
, new AjaxOptions()
{
HttpMethod = "POST",
UpdateTargetId = "OrdersList",
}))
OrdersIndexViewModel
public class OrdersIndexViewModel
{
public IPagedList<OrderViewModel> OrderViewModels { get; set; }
public SearchOrderViewModel SearchOrderViewModel { get; set; }
}
And my Action in Orders controller
public ActionResult OrdersSearch2(int? page)
{
if (!ModelState.IsValid)
{
return View(mymodel);
}
OrderSearch ors = new OrderSearch();
ors.PageNumber = page ?? 1;
var entitiesList = orderService.FindBy(ors).ToPagedList(ors.PageNumber, 5);
var model = new OrdersIndexViewModel();
model.OrderViewModels = entitiesList.ToViewModels();
return PartialView("_OrdersListPartial", model.OrderViewModels);
}
Index.cshtml
#model OrdersIndexViewModel
<div id="OrdersList">
<partial name="_OrdersListPartial.cshtml" model="Model.OrderViewModels" />
</div>
_OrdersListPartial.cshtml
#model X.PagedList.IPagedList<OrderViewModel>
#{
int rowNo = 0;
}
<div id="basic-examples">
<div class="card">
<div class="card-content">
<div class="card-body">
<div class="row">
<div class="col-12">
<input type="submit" value="New Order" class="btn btn-primary mr-1 mb-1 waves-effect waves-light" onclick="location.href='#Url.Action("AddOrder", "Orders")'" />
</div>
</div>
<div class="" id="OrdersList">
#if (Model == null || Model.Count == 0)
{
<div class="alert alert-warning">No Orders</div>
}
else
{
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="mb-0">Orders List</h4>
</div>
<div class="card-content">
<div class="table-responsive mt-1">
<table class="table table-hover-animation mb-0">
<thead>
<tr>
<th>#</th>
<th>ID</th>
<th>CUSTOMER NAME</th>
<th>CREATED</th>
<th>DELIVERY DATE</th>
<th>STATUS</th>
<th>OPERATORS</th>
<th></th>
<th style="display:none"></th>
</tr>
</thead>
<tbody>
#foreach (var i in #Model)
{
rowNo = rowNo + 1;
<tr>
<td>#rowNo</td>
<td>#ViewBag.OrdersPrefix #i.ID</td>
<td><i class="fa fa-circle font-small-3 text-success mr-50"></i>#i.CustomerName</td>
<td>#Html.DisplayFor(x => i.CreatedDate)</td>
<td>#Html.DisplayFor(x => i.DeliveryDate)</td>
<td>#i.OrderStatusText</td>
<td class="p-1">
<ul class="list-unstyled users-list m-0 d-flex align-items-center">
<li data-toggle="tooltip" data-popup="tooltip-custom" data-placement="bottom" data-original-title="Vinnie Mostowy" class="avatar pull-up">
<img class="media-object rounded-circle" src="../../../app-assets/images/portrait/small/avatar-s-5.jpg" alt="Avatar" height="30" width="30">
</li>
<li data-toggle="tooltip" data-popup="tooltip-custom" data-placement="bottom" data-original-title="Elicia Rieske" class="avatar pull-up">
<img class="media-object rounded-circle" src="../../../app-assets/images/portrait/small/avatar-s-7.jpg" alt="Avatar" height="30" width="30">
</li>
<li data-toggle="tooltip" data-popup="tooltip-custom" data-placement="bottom" data-original-title="Julee Rossignol" class="avatar pull-up">
<img class="media-object rounded-circle" src="../../../app-assets/images/portrait/small/avatar-s-10.jpg" alt="Avatar" height="30" width="30">
</li>
<li data-toggle="tooltip" data-popup="tooltip-custom" data-placement="bottom" data-original-title="Darcey Nooner" class="avatar pull-up">
<img class="media-object rounded-circle" src="../../../app-assets/images/portrait/small/avatar-s-8.jpg" alt="Avatar" height="30" width="30">
</li>
</ul>
</td>
<td>
#Html.ActionLink("Edit", "EditOrder", "Orders", routeValues: new { ID = i.ID })
</td>
<td style="display:none">
<i class="feather icon-trash"></i>
#Html.ActionLink("Delete", "DeleteOrderDetailTempItem", "Orders", routeValues: new { ID = i.ID }, htmlAttributes: new
{
#data_ajax = "true",
#data_ajax_method = "Get",
#data_ajax_update = "#OrderDetailList",
#data_ajax_failure = "onFailureDefault",
#data_ajax_success = "ViewOnSuccess",
})
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
}
</div>
</div>
</div>
</div>

Bootstrap 3.3.7 vs Bootstrap 4

I've built my application on Bootstrap 4 and I've used Bootstrap-Table and Bootstrap-DateTime picker plugins. All worked fine till I decided to include Bootstrap-Select. Then the display went crazy.
By digging a bit, I notice that bootstrap.min.css was causing the problem (I can't yet speak for others files).
Wether I use the version (bootstrap-3.3.7) provided with Bootstrap-Select or the original I've been using so far that came with Bootstrap 4.
Below you'll see the rendering of both css files.
Rendering and issue with css from bootstrap-3.3.7 - Active tab does not display content until clicked on; controls are out of their canvas and characters are smaller:
Rendering and issue with css from bootstrap 4 - Select box does not display options, but characters rendering is correct:
At last here is my html file:
//**** NE FONCTIONNE PAS SI MIS DANS LE SECTION $(document).ready(function () {} ****
$('#table').bootstrapTable({
url: 'GetListeDemandeurs',
locale: 'fr-CA',
pagination: true,
paginationLoop: true,
search: true,
clickToSelect: true,
singleSelect: true,
sortable: true,
sortOrder: 'asc',
idField: 'Code_Demandeur',
sortName: 'Code_Demandeur',
});
var $table = $('#table');
//**** FIN SECTION NON FONCTIONNELLE ****
//**** Instance de la Bootstrap-DateTime picker ****
$('.form_date').datetimepicker({
language: 'fr',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
forceParse: 0
});
//**** FIN Bootstrap-DateTime picker ****
$(document).ready(function () {
var enregChoisi = null;
$(function () {
//**** Action click de la ligne ****
$table.on('click-row.bs.table', function (e, row, $element) { //**** SECTION MISE EN COMMENTAIRE: BOUTON NE FONCTIONNE PAS ****
$('.success').removeClass('success');
$($element).addClass('success');
//**** On encapsule la ligne choisie ****
var index = $table.find('tr.success').data('index');
enregChoisi = $table.bootstrapTable('getData')[index];
//**** Active les boutons modifier et supprimer a la selection d'une ligne ****
document.getElementById('btnModif').disabled = false;
document.getElementById('btnSupp').disabled = false;
});
});
});
<!DOCTYPE html>
<html>
<head>
#{
ViewBag.Title = "Demandeurs (Liste des)";
}
<title></title>
#* ========================================= *#
#* **** Required meta tags **** *#
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
#* **** END required meta tags **** *#
<script src="~/Scripts/jquery-3.3.1.min.js"></script> #**** Version de JQUERY **** *#
#* **** Bootstrap-Select **** *#
<script src="~/Scripts/umd/popper.min.js"></script>
#*<script src="~/Scripts/jquery-3.3.1.min.js"></script>*#
<script src="~/Scripts/bootstrap-3.3.7/js/bootstrap.min.js"></script>
<link href="~/Scripts/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="~/Content/bootstrap-select.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="~/Scripts/bootstrap-select.min.js"></script>
<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="~/Scripts/i18n/defaults-fr_FR.min.js"></script>
#* **** FIN **** *#
#* **** Bootstrap, Bootstrap-Table **** *#
#* **** MIS EN COMMENTAIRE CAR CRÉE UN AFFICHAGE TRÈS PETIT DES COOLES BOOTSTRAPS
<link rel="stylesheet" href="~/Content/bootstrap.css"> **** *#
<link href="~/Content/bootstrap-table.css" rel="stylesheet" />
<script src="~/Scripts/bootstrap-table/bootstrap-table.js"></script>
<script src="~/Scripts/bootstrap-table/locale/bootstrap-table-fr-FR.min.js"></script>
#* **** FIN référence **** *#
#* **** Bootstrap-DateTime picker **** *#
<link href="~/Content/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
#* **** FIN référence **** *#
#* **** Font-Awesome **** *#
<link href="~/css/font-awesome.min.css" rel="stylesheet">
#* **** FIN référence **** *#
#* *************** DivTable.com ou astérisque aux champs obligatoires ***************** *#
<link rel="stylesheet" href="~/Content/css/css_custom/DivTable.css" />
#* *************** Fin DivTable.com ***************** *#
#* *************** Fonctions communes ***************** *#
<script src="~/Scripts/CustomJS/Fonctions_Communes.js"></script>
#* *************** Fin ***************** *#
</head>
<body>
#* ====================== SECTION COLONNE DU BOOTSTRAP-TABLE ====================== *#
<div class="container" id="divGrille" style="border:1px solid #cecece; background-color: Snow">
<table id="table">
<thead>
<tr>
<th data-field="state" data-radio="true" data-sortable="false" data-searchable="false" data-formatter="stateFormatter"></th>
<th data-field="Code_Demandeur" data-sortable="true" data-searchable="true">Code<i class="fa fa-fw fa-sort"></i></th>
<th data-field="Nom_Demandeur" data-sortable="true" data-searchable="true">Nom<i class="fa fa-fw fa-sort"></i></th>
<th data-field="Prenoms_Demandeur" data-sortable="true" data-searchable="true">Prénoms<i class="fa fa-fw fa-sort"></i></th>
<th data-field="Date_Naissance_Demandeur" data-sortable="true" data-searchable="true" data-align="right" data-formatter="dateFormat">
Date de naissance<i class="fa fa-fw fa-sort"></i>
</th>
<th data-field="Nom_Sexe" data-sortable="true" data-searchable="true">Sexe<i class="fa fa-fw fa-sort"></i></th>
<th data-field="Adresse_Demandeur" data-sortable="true" data-searchable="true">Adresse<i class="fa fa-fw fa-sort"></i></th>
<th data-field="Nom_Ville" data-sortable="true" data-searchable="true">Ville<i class="fa fa-fw fa-sort"></i></th>
<th data-field="Nom_Province" data-sortable="true" data-searchable="true">Province<i class="fa fa-fw fa-sort"></i></th>
<th data-field="CodePostal_Demandeur" data-sortable="true" data-searchable="true">CP<i class="fa fa-fw fa-sort"></i></th>
<th data-field="Tel1_Demandeur" data-sortable="true" data-searchable="true">Téléphone 1<i class="fa fa-fw fa-sort"></i></th>
<th data-field="Tel2_Demandeur" data-sortable="true" data-searchable="true">Téléphone 2<i class="fa fa-fw fa-sort"></i></th>
<th data-field="Tel3_Demandeur" data-sortable="true" data-searchable="true">Fax<i class="fa fa-fw fa-sort"></i></th>
<th data-field="Courriel1_Demandeur" data-sortable="true" data-searchable="true">Courriel 1<i class="fa fa-fw fa-sort"></i></th>
<th data-field="Courriel2_Demandeur" data-sortable="true" data-searchable="true">Courriel 2<i class="fa fa-fw fa-sort"></i></th>
<th data-field="Courriel3_Demandeur" data-sortable="true" data-searchable="true">Courriel 3<i class="fa fa-fw fa-sort"></i></th>
<th data-field="Nom_SituationMatrimoniale" data-sortable="true" data-searchable="true">Situation matrimoniale<i class="fa fa-fw fa-sort"></i></th>
<th data-field="Date_Ouverture_Dossier" data-sortable="true" data-searchable="true" data-align="right" data-formatter="dateFormat">
Date d'ouverture du dossier<i class="fa fa-fw fa-sort"></i>
</th>
<th data-field="Date_Cloture_Dossier" data-sortable="true" data-searchable="true" data-align="right" data-formatter="dateFormat">
Date de cloture du dossier<i class="fa fa-fw fa-sort"></i>
</th>
<th data-field="Nom_TrancheRevenu" data-sortable="true" data-searchable="true">Tranche de revenu<i class="fa fa-fw fa-sort"></i></th>
<th data-field="Nom_Occupation" data-sortable="true" data-searchable="true">Occupation<i class="fa fa-fw fa-sort"></i></th>
<th data-field="Nom_StatutLegal" data-sortable="true" data-searchable="true">Statut légall<i class="fa fa-fw fa-sort"></i></th>
<th data-field="Nom_Scolarite" data-sortable="true" data-searchable="true">Scolarité<i class="fa fa-fw fa-sort"></i></th>
<th data-field="Nom_Communaute" data-sortable="true" data-searchable="true">Communauté<i class="fa fa-fw fa-sort"></i></th>
<th data-field="Nom_SourceInformation" data-sortable="true" data-searchable="true">Source d'information<i class="fa fa-fw fa-sort"></i></th>
<th data-field="Cons" data-sortable="true" data-searchable="true">Conseiller<i class="fa fa-fw fa-sort"></i></th>
<th data-field="Handicape" data-sortable="false" data-searchable="false" data-align="center" data-formatter="ticksFormatter">
Handicapé?<i class="fa fa-fw fa-sort"></i>
</th>
<th data-field="Reference" data-sortable="true" data-searchable="true">Référence<i class="fa fa-fw fa-sort"></i></th>
<th data-field="Remarques_Demandeur" data-sortable="false" data-searchable="true">Remarques<i class="fa fa-fw fa-sort"></i></th>
<th data-field="Actif_Inactif" data-sortable="false" data-searchable="false" data-align="center" data-formatter="ticksFormatter">Actif / Inactif</th>
<th data-field="Dte_Saisie" data-sortable="true" data-searchable="false" data-align="right" data-formatter="dateFormat">Date de saisie <i class="fa fa-fw fa-sort"></i></th>
<th data-field="UserName" data-sortable="false" data-searchable="false">Utilisateur</th>
</tr>
</thead>
</table>
</div>
#* ====================== SECTION MODALE ====================== *#
<div class="bs-example" style="margin-top: 10px">
<!-- **** Boutons pour lancer le Modal **** -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#fenModAdm_Demandeurs" data-title="Ajouter">Ajouter</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#fenModAdm_Demandeurs" data-title="Modifier" id="btnModif" disabled>Modifier</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#fenModAdm_Demandeurs" data-title="Supprimer" id="btnSupp" disabled>Supprimer</button>
<!-- Modal HTML -->
<div id="fenModAdm_Demandeurs" class="modal fade" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal Window</h4>
</div>
<div class="modal-body">
<form role="form" id="form_Demandeurs">
<table style="width:100%">
<tr>
<td>
<div class="form-group">
<label for="txt_Code_Demandeur" class="control-label">Code:</label>
<input type="text" class="form-control" id="txt_Code_Demandeur" placeholder="Code" />
</div>
</td>
<td>
<div class="form-group required-field">
<label for="txt_Nom_Demandeur" class="control-label">Nom:</label>
<input type="text" class="form-control" id="txt_Nom_Demandeur" placeholder="Nom" onblur="TrimAndReplaceDoubleSpace(this)" autofocus />
</div>
</td>
<td>
<div class="form-group required-field">
<label for="txt_Prenoms_Demandeur" class="control-label">Prénoms:</label>
<input type="text" class="form-control" id="txt_Prenoms_Demandeur" placeholder="Prénoms" onblur="TrimAndReplaceDoubleSpace(this)" />
</div>
</td>
</tr>
</table>
#* *************** Onglets à l'intérieur du modal ****************** *#
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="contacts-tab" data-toggle="tab" href="#ongletContacts_Ddeurs"
role="tab" aria-controls="ongletContacts_Ddeurs" aria-selected="true">Contacts</a>
</li>
<li class="nav-item">
<a class="nav-link" id="EtatCivil-tab" data-toggle="tab" href="#ongletEtatCivil_Ddeurs"
role="tab" aria-controls="ongletEtatCivil_Ddeurs" aria-selected="false">État civil</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
#* ******** Onglet 1 "Contact": adresse géographique, courriel, téléphone... ***************** *#
<div class="tab-pane fade show active" id="ongletContacts_Ddeurs" role="tabpanel" aria-labelledby="contacts-tab">
<div style="border: solid 1px yellow; margin-top: 5px; padding: 5px 2px 10px 2px; ">
<table style="width:100%">
<tr>
<td colspan="3">
<div class="form-group">
<label for="txt_Adresse_Demandeur" class="control-label">Adresse:</label>
<input type="text" class="form-control" id="txt_Adresse_Demandeur" placeholder="Numéro, Rue"
onblur="TrimAndReplaceDoubleSpace(this)" />
</div>
</td>
</tr>
<tr>
<td>
<div class="form-group">
<label for="cbx_Ville" class="control-label">Ville:</label>
<input type="text" class="form-control" id="cbx_Ville" placeholder="Ville" />
</div>
</td>
<td>
<div class="form-group">
<label for="cbx_Province" class="control-label">Province:</label>
<input type="text" class="form-control" id="cbx_Province" placeholder="Province" />
</div>
</td>
<td>
<div class="form-group">
<label for="txt_CodePostal_Demandeur" class="control-label">CodePostal:</label>
<input type="text" class="form-control" id="txt_CodePostal_Demandeur" placeholder="Code Postal"
style="text-transform: uppercase" maxlength="7" onblur="TrimAndReplaceDoubleSpace(this)" />
</div>
</td>
</tr>
</table>
</div>
</div>
#* **** Onglet 2 "état civil": Sexe, Date de naissance, Langue maternelle... *#
<div class="tab-pane fade" id="ongletEtatCivil_Ddeurs" role="tabpanel" aria-labelledby="EtatCivil-tab">
<div style="border: solid 1px blue; margin-top: 5px; padding: 5px 2px 10px 2px; ">
<table style="width:100%">
<tr>
<td>
<div class="form-group required-field">
<label for="dte_Date_Naissance_Demandeur" class="control-label">Date de Naissance:</label>
#* **** Bootstrap-DateTime picker **** *#
<div class="input-group date form_date" data-date="" data-date-format="dd MM yyyy"
data-link-field="dte_Date_Naissance_Demandeur_Hidden" data-link-format="yyyy-mm-dd">
<input class="form-control" id="dte_Date_Naissance_Demandeur" size="16" type="text" value="" style="text-align:right;" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="hidden" id="dte_Date_Naissance_Demandeur_Hidden" value="" /><br />
</div>
#* **** FIN Bootstrap-DateTime picker **** *#
</div>
</td>
<td>
<div class="form-group">
<label for="cbx_Sexe" class="control-label">Sexe:</label>
<select class="selectpicker" id="cbx_Sexe">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</div>
</td>
<td>
<div class="form-group">
<label for="cbx_SituationMatrimoniale" class="control-label">Situation Matrimoniale:</label>
<input type="text" class="form-control" id="cbx_SituationMatrimoniale" placeholder="Situation Matrimoniale" />
</div>
</td>
</tr>
</table>
</div>
</div>
...
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" id="btnAnnuler">Annuler</button>
<button type="button" class="btn btn-primary" id="btnSauver" value="Sauvegarder"
onclick="CreateUpdateDelete_MenuAdmin(document.getElementById('form_Demandeurs'),
document.getElementById('btnSauver'))"></button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

I managed to make the whole thing work.
Below is how the head of my HTML looks like:
<script src="~/Scripts/jquery-3.3.1.min.js"></script> #**** Version de JQUERY utilisée **** *#
#* **** Référence Font-Awesome **** *#
<link href="~/css/font-awesome.min.css" rel="stylesheet">
#* **** FIN référence **** *#
#* **** Référence Bootstrap-Select menus déroulants CSS / js **** *#
<script src="~/Scripts/umd/popper.min.js"></script>
<script src="~/Scripts/bootstrap-3.3.7/js/bootstrap.min.js"></script>
<link href="~/Scripts/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="~/Content/bootstrap-select.min.css">
<script src="~/Scripts/bootstrap-select.min.js"></script>
<script src="~/Scripts/i18n/defaults-fr_FR.min.js"></script>
#* **** FIN référence **** *#
#* **** Référence Bootstrap, Bootstrap-Table CSS / js **** *#
<link href="~/Content/bootstrap-table.css" rel="stylesheet" />
<script src="~/Scripts/bootstrap-table/bootstrap-table.js"></script>
<script src="~/Scripts/bootstrap-table/locale/bootstrap-table-fr-FR.min.js"></script>
#* **** FIN référence **** *#
#* **** Référence Bootstrap, Bootstrap-DateTime picker CSS / js **** *#
<script type="text/javascript" src="~/Scripts/bootstrap-datetimepicker/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript" src="~/Scripts/bootstrap-datetimepicker/locales/bootstrap-datetimepicker.fr.js" charset="UTF-8"></script>
<link href="~/Content/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
#* **** FIN référence **** *#
In the body, I have removed some tags and ready to continue.

Why Ajax helpers doesnt work?

Im trying to achieve a filter search box, actually it works but it just completely reload all of my Index view instead of replacing the div content:
My controller Actions (The index action and the partial action):
public IActionResult Index()
{
var grupoModels = _grupos.GetAll("");
var listaGrupos = grupoModels
.Select(resultado => new grupoCRUDModel
{
Codigo = resultado.id,
Nombre = resultado.nombre,
NIS = resultado.nis,
FeAcceso = resultado.feacceso,
Linea = resultado.Linea
});
var model = new grupoIndexModel()
{
grupos = listaGrupos
};
return View(model);
}
public IActionResult tablePartial(string filter = "")
{
var grupoModels = _grupos.GetAll(filter);
var listaGrupos = grupoModels
.Select(resultado => new grupoCRUDModel
{
Codigo = resultado.id,
Nombre = resultado.nombre,
NIS = resultado.nis,
FeAcceso = resultado.feacceso,
Linea = resultado.Linea
});
var model = new grupoIndexModel()
{
grupos = listaGrupos
};
return PartialView("tablePartial",model);
}
My Index view with the searchbox and the target div to render my partial:
<div>
<div class="mdl-grid headeritems">
<div class="mdl-cell mdl-cell--8-col ">
<h2>LISTADO DE GRUPOS</h2>
</div>
<div class="mdl-cell mdl-cell--2-col" style="text-align:right;">
<button class="mdl-button mdl-js-button mdl-button--fab" id="btnAdd">
<a class="material-icons" asp-controller="Grupo" asp-action="Crear" data-ajax="true" data-toggle="modal" data-target="#modalGrupo">add</a>
</button>
</div>
<div class="mdl-cell mdl-cell--2-col">
<form asp-controller="Grupo" asp-action="tablePartial" data-ajax-method="GET" data-ajax-update="#pdiv" data-ajax="true" method="get">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
<label class="mdl-button mdl-js-button mdl-button--icon" for="sbox">
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" id="sbox" name="filter">
<label class="mdl-textfield__label" for="sample-expandable">Expandable Input</label>
</div>
</div>
</form>
</div>
</div>
<br />
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--1-col"></div>
<div id="pdiv" class="mdl-cell mdl-cell--10-col">
#Html.Partial("tablePartial")
</div>
<div class="mdl-cell mdl-cell--1-col"></div>
</div>
My partialTable code view:
#model libraryDemo.Models.grupoIndexModel
<table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp" id="tablaGrupos" style="width:100%;">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Nombre</th>
<th class="text-center">Linea</th>
<th class="text-center">Codigo</th>
<th colspan="2" class="text-center">Acciones</th>
</tr>
</thead>
<tbody>
#foreach (var grupo in Model.grupos)
{
<tr class="mtoRow">
<td class="mdl-data-table__cell--non-numeric">#grupo.Nombre</td>
<td class="text-center">#grupo.Linea.nombre</td>
<td class="text-center">#grupo.Codigo</td>
<td class="text-center" data-toggle="tooltip" data-placement="top" title="Editar"><a class="btn btn-warning" asp-controller="Grupo" asp-action="Editar" asp-route-id="#grupo.Codigo" data-ajax="true" data-toggle="modal" data-target="#modalGrupo">Editar</a></td>
<td class="text-center" data-toggle="tooltip" data-placement="top" title="Eliminar"><a class="btn btn-danger" asp-controller="Grupo" asp-action="Eliminar" asp-route-id="#grupo.Codigo" data-ajax="true" data-toggle="modal" data-target="#modalGrupo">Eliminar</a></td>
</tr>
}
</tbody>
</table>
Finally, my ajax function for keyup event:
$("#sbox").keyup(function () {
$("form").submit();
});

try data-ajax-url in place of asp-action
<form data-ajax-url="#Url.Action("tablePartial","Grupo")" data-ajax-method="GET" data-ajax-update="#pdiv" data-ajax="true" method="get">

ASP.net Webforms runat server call not working when I add repeater

I'm creating a timeline, the timeline has a bar running down center of screen, first post is on left, second on right etc etc.
With static text I can use the following call to figure out which block of css to use:
<li id ="li_left" runat ="server" >
<div class="timeline-datetime">
<span class="timeline-time">8:19
</span><span class="timeline-date">Today</span>
</div>
<div class="timeline-badge blue">
<i class="fa fa-tag"></i>
</div>
<div class="timeline-panel">
<div class="timeline-header bordered-bottom bordered-blue">
<span class="timeline-title">New Items Arrived
</span>
<p class="timeline-datetime">
<small class="text-muted">
<i class="glyphicon glyphicon-time"></i>
<span class="timeline-date">Today</span>
-
<span class="timeline-time">8:19</span>
</small>
</p>
</div>
<div class="timeline-body">
<p>My Post Message</p>
</div>
</div>
</li>
Then in my code behind I use this:
Private Sub li_left_Load(sender As Object, e As EventArgs) Handles li_left.Load
If IsEven(postCount) = True Then
li_left.Style.Add("display", "visible")
postCount += 1
Else
li_left.Style.Add("display", "none")
End If
End Sub
Full front code:
<ul class="timeline">
<li class="timeline-node">
<a class="btn btn-palegreen">NOW</a>
</li>
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
<ItemTemplate>
<li id ="li_left" runat ="server" >
<div class="timeline-datetime">
<span class="timeline-time">8:19
</span><span class="timeline-date">Today</span>
</div>
<div class="timeline-badge blue">
<i class="fa fa-tag"></i>
</div>
<div class="timeline-panel">
<div class="timeline-header bordered-bottom bordered-blue">
<span class="timeline-title">New Items Arrived
</span>
<p class="timeline-datetime">
<small class="text-muted">
<i class="glyphicon glyphicon-time"></i>
<span class="timeline-date">Today</span>
-
<span class="timeline-time">8:19</span>
</small>
</p>
</div>
<div class="timeline-body">
<p>My Left Post Message</p>
</div>
</div>
</li>
<li class="timeline-inverted" id="li_right" runat ="server" >
<div class="timeline-datetime">
<span class="timeline-time">3:10
</span><span class="timeline-date">Today</span>
</div>
<div class="timeline-badge darkorange">
<i class="fa fa-map-marker font-120"></i>
</div>
<div class="timeline-panel bordered-right-3 bordered-orange">
<div class="timeline-header bordered-bottom bordered-blue">
<span class="timeline-title">Visit Appointment
</span>
<p class="timeline-datetime">
<small class="text-muted">
<i class="glyphicon glyphicon-time"></i>
<span class="timeline-date">Today</span>
-
<span class="timeline-time">3:10</span>
</small>
</p>
</div>
<div class="timeline-body">
<p>My Right Post Message</p>
<p>
<i class="orange fa fa-exclamation"></i>New task added for <span>James Dean</span>
</p>
</div>
</div>
</li>
<li class="timeline-node">
<a class="btn btn-yellow">YESTERDAY</a>
</li>
<li class="timeline-node">
<a class="btn btn-info">11 DECEMBER</a>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
And code behind to control which css black to use:
Dim postCount As Integer = 0
Private Sub li_left_Load(sender As Object, e As EventArgs) Handles li_left.Load
If IsEven(postCount) = True Then
li_left.Style.Add("display", "visible")
postCount += 1
Else
li_left.Style.Add("display", "none")
End If
End Sub
Private Sub li_right_Load(sender As Object, e As EventArgs) Handles li_right.Load
If IsEven(postCount) = True Then
li_right.Style.Add("display", "none")
Else
li_right.Style.Add("display", "visible")
postCount += 1
End If
End Sub
Noe the second I add a repeater in everything breaks and I don't understand why.
Code with repeater added:
<ul class="timeline">
<li class="timeline-node">
<a class="btn btn-palegreen">NOW</a>
</li>
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
<ItemTemplate>
<li id ="li_left" runat ="server" >
<div class="timeline-datetime">
<span class="timeline-time">8:19
</span><span class="timeline-date">Today</span>
</div>
<div class="timeline-badge blue">
<i class="fa fa-tag"></i>
</div>
<div class="timeline-panel">
<div class="timeline-header bordered-bottom bordered-blue">
<span class="timeline-title">New Items Arrived
</span>
<p class="timeline-datetime">
<small class="text-muted">
<i class="glyphicon glyphicon-time"></i>
<span class="timeline-date">Today</span>
-
<span class="timeline-time">8:19</span>
</small>
</p>
</div>
<div class="timeline-body">
<p><%# DataBinder.Eval(Container.DataItem, "message") %></p>
</div>
</div>
</li>
<li class="timeline-inverted" id="li_right" runat ="server" >
<div class="timeline-datetime">
<span class="timeline-time">3:10
</span><span class="timeline-date">Today</span>
</div>
<div class="timeline-badge darkorange">
<i class="fa fa-map-marker font-120"></i>
</div>
<div class="timeline-panel bordered-right-3 bordered-orange">
<div class="timeline-header bordered-bottom bordered-blue">
<span class="timeline-title">Visit Appointment
</span>
<p class="timeline-datetime">
<small class="text-muted">
<i class="glyphicon glyphicon-time"></i>
<span class="timeline-date">Today</span>
-
<span class="timeline-time">3:10</span>
</small>
</p>
</div>
<div class="timeline-body">
<p><%# DataBinder.Eval(Container.DataItem, "message") %></p>
<p>
<i class="orange fa fa-exclamation"></i>New task added for <span>James Dean</span>
</p>
</div>
</div>
</li>
<li class="timeline-node">
<a class="btn btn-yellow">YESTERDAY</a>
</li>
<li class="timeline-node">
<a class="btn btn-info">11 DECEMBER</a>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
First error I get is Handles clause requires a WithEvents variable defined in the containing type or one of its base type.
If I open the .aspx.designer I notice my withevents for the li_left and li_right have been removed, if I manually add them back in the error messages go away but the code behind is not being called when I run.
Any help would be greatly appreciated.
edit to show working answer
Add this and it fixed everything:
Ok figured it out. I needed to process the logic in the repeater1.ItemBound
Private Sub Repeater1_ItemDataBound(sender As Object, e As RepeaterItemEventArgs) Handles Repeater1.ItemDataBound
Dim li_left = TryCast(e.Item.FindControl("li_left"), HtmlGenericControl)
If IsEven(postCount) = True Then
li_left.Style.Add("display", "visible")
Else
li_left.Style.Add("display", "none")
End If
Dim li_right = TryCast(e.Item.FindControl("li_right"), HtmlGenericControl)
If IsEven(postCount) = True Then
li_right.Style.Add("display", "none")
Else
li_right.Style.Add("display", "visible")
End If
postCount += 1
End Sub

Rather than use your li_left_Load and li_right_Load events, you will want to use the OnItemDataBound event for the repeater. There, you can set the styles for each item as you load them.

Resources