i have a foreach in my view it will fetch data from database as per request.
i need to display 10 result per page. what i mean is i have to diplay 10 result in div 1 , and another 10 result in div 2.. is this possible to do. how to do this. or if u have any other idea related to this share with me.. thanks
My view code:
#if (Model != null)
{
if (Model.Count() != 0)
{
<div class="">
#foreach (var item in Model)
{
<div class="tiptext">
<b style="margin-left: 0px; font-size: large;color: #1A0DB2;">#item.BusinessName</b>
<h3 style="margin: 5px 0px 5px 0px;color: rgb(0, 145, 0);"> #item.FirstName</h3>
<h3 style="margin: 8px; color:black">#item.BusinessCategory </h3>
<div class="description">
<div class="description_image">
<img src="~/Images/popup_pointer.jpg" />
<div class="POP_UP_outer">
<div class="description_background">
<div class="description_map">
<b>Map</b>
</div><hr />
<div class="description_body">
<b>Description </b><h4 class="des">#item.BusinessDescription</h4>
<b>Address2 </b><h4 class="des">#item.Address1</h4>
</div>
</div>
</div>
</div>
</div>
</div>
}
</div>
}
else
{
<label id="lblErrorMsg" title="Record not fount...!" style="color:red;">Record not found...!</label>
}
}
To start, you can simply use Take(). Then you can figure out your paging strategy:
#foreach (var item in Model.Take(10))
{
}
This will take the first 10 of that list. You can mix it with Skip() if you need to.
Related
So i'm using a While loop in PHP to return results from my database. Basically images with a button on each, when that button is clicked I want to display the mapOverlay div which will have a map on it. How do I select only the div that relates to the button i'm clicking? I can get it to open them all or just the first one but not the exact one with the button i'm click on.
This code sits within echo tags but i've removed to ease of reading:
<div class="resultContainer">
<div class="mapOverlay animated slideInLeft"></div>
<div class="resultsInfo">
<div class='resultsInfo_user'>
<div class='results_dp' style='background-image:url($row[dp])'></div>
<p style='color:#565656;padding: 0px 10px 0px 10px;float: left;font-weight:600'>ucfirst($row[firstName])</p>
</div>
</div>
<div class='resultsImage' style='background-image: url($row[image])'>
<div class='resultsImage_overlay'>
<div class='resultsImage_overlay_info'>
<p style='font-size:1.1em;font-weight:600;color:#4A4A4A;margin:0'>$row[title]</p>
<p style='margin: 5px 0px 1px 0px;font-size:0.9em;color:#828282'>$distanceMiles</p>
<p style='margin:0;font-size:0.9em;color:#828282'>$row[expiry]</p>
</div>
<div class='resultsImage_overlay_button'>
<button class='button-green openMap'>Get Directions</button>
</div>
</div>
</div>
</div>
Here's the javascript I've got:
var button = document.getElementsByClassName("openMap")
for(var i = 0; i < button.length; i++){
button[i].addEventListener("click", function(){
var overlay = document.getElementsByClassName("mapOverlay")
overlay.style.display = "block"
})
}
I'm going to toggle a class when I get it working but just using style.display to get it working first for ease of testing. I also want resultsImage_overlay to display above the overlay so the button remains visible / able to close the div overlay again.
I'm looking to be pointed in the right direction here, complete solutions welcome but I appreciate I haven't provided all the blocks!
You can try with closest() and previousElementSibling on this object.
Demo:
var button = document.getElementsByClassName("openMap")
for(var i = 0; i < button.length; i++){
button[i].addEventListener("click", function(){
var overlay = this.closest('.resultsImage').previousElementSibling.previousElementSibling;
overlay.style.display = "block"
})
}
.mapOverlay {display: none}
<div class="resultContainer">
<div class="mapOverlay animated slideInLeft">mapOverlay 1</div>
<div class="resultsInfo">
<div class='resultsInfo_user'>
<div class='results_dp' style='background-image:url($row[dp])'></div>
<p style='color:#565656;padding: 0px 10px 0px 10px;float: left;font-weight:600'>John</p>
</div>
</div>
<div class='resultsImage' style='background-image: url($row[image])'>
<div class='resultsImage_overlay'>
<div class='resultsImage_overlay_info'>
<p style='font-size:1.1em;font-weight:600;color:#4A4A4A;margin:0'>Some Title</p>
<p style='margin: 5px 0px 1px 0px;font-size:0.9em;color:#828282'>50</p>
<p style='margin:0;font-size:0.9em;color:#828282'>12-12-2020</p>
</div>
<div class='resultsImage_overlay_button'>
<button class='button-green openMap'>Get Directions</button>
</div>
</div>
</div>
<div class="mapOverlay animated slideInLeft">mapOverlay 2</div>
<div class="resultsInfo">
<div class='resultsInfo_user'>
<div class='results_dp' style='background-image:url($row[dp])'></div>
<p style='color:#565656;padding: 0px 10px 0px 10px;float: left;font-weight:600'>Michael</p>
</div>
</div>
<div class='resultsImage' style='background-image: url($row[image])'>
<div class='resultsImage_overlay'>
<div class='resultsImage_overlay_info'>
<p style='font-size:1.1em;font-weight:600;color:#4A4A4A;margin:0'>Some Title 2</p>
<p style='margin: 5px 0px 1px 0px;font-size:0.9em;color:#828282'>40</p>
<p style='margin:0;font-size:0.9em;color:#828282'>11-11-2020</p>
</div>
<div class='resultsImage_overlay_button'>
<button class='button-green openMap'>Get Directions</button>
</div>
</div>
</div>
</div>
I am trying to create a search box in order to search through the data within the loop, I am aware of Html.BeginForm however I am not targeting a controller and its action. I have a foreach loop in my code which gives me the data that I want.
I just would like the user to be able to search the data based on that loop. I hope this made sense.
I would appreciate bit of help or guidance for this matter. Thanks in advance
<div id="dialog-store" title="Store information">
<span class="ui-state-default ui-corner-all" style="float: left; margin: 0 7px 0 0;"><span class="ui-icon ui-icon-info" style="float: left;"></span></span>
<div style="margin-left: 23px;">
<legend class="legend">r</legend>
<hr />
<br />
#foreach (var item in Model.Stores)
{
<div class="editor-label">
#Html.DisplayFor( modelItem => item.StoreName)
</div>
<div class="editor-field">
#Html.DisplayFor( modelItem => item.StoreNumber)
</div>
}
<br />
<br />
</div>
</div>
I'm using asp.net mvc razor
The page must show a very long list. Phonebook employees - about 500 people. Page is loading too slowly because of too many entities.
How to load first 50 entries, and later the others 450 entries - by background?
Thank you so much!
Code on page:
#model WarehouseSearch.Controllers.PhonesList
#{
string LastFirstChar = "";
}
<div id="main-content">
<div class="container">
<div class="row">
<div class="col-md-10">
<h2>Phonebook </h2>
</div>
<div class="col-md-4">
</div>
</div>
<div class="row">
<div class="col-md-8" style="border:1px solid #ddd;background-color:white">
<div class="row" style="background-color:rgba(247, 225, 181, 1);margin-bottom:1em;padding:0.5em;">
<div class="col-md-7 text-left" style="padding-left: 1em; padding-top: 0.2em; padding-right: 1em; padding-bottom: 0.3em;">
<span class="fa fa-user fa-2x blue"></span> <input type="text" name="Search" id="search_input" placeholder="search ..." class="search_input" />
</div>
<div class="col-md-3">
</div>
</div>
<ul id="phones" class="interleave">
#foreach (WarehouseSearch.GetPeoplePhonesListResult p in Model.allphones)
{
<li style="padding-top:2em;" class="row">
<div class="col-md-2">
#if (LastFirstChar != #p.FirstChar)
{
<span style="background-color:#41a7e2;color:white;position:relative;left:-4em;font-size:210%;padding:0.3em;" class="text-right"><b>#p.FirstChar</b></span>
LastFirstChar = p.FirstChar;
}
<img style="width: 85%; display: block;" src="#p.BigPhoto" /><br />
</div>
<div class="col-md-5">
<h3 class="phone smarttlink" style="margin-bottom:0.1em;margin-top:0;">#p.Family</h3>
<div>#p.FirstMiddleName</div>
<br />
<small style="color:#666">#p.Title</small>
</div>
.... some other info about people....
</li>
}
</ul>
</div>
</div>
</div>
</div>
<script>
$('#search_input').animate({
//"width": "100%",
//"padding": "4px",
"opacity": 1
}, 300, function () {
$(this).focus();
});
$(function () {
$(function () {
$('#search_input').fastLiveFilter('#phones'
, {
selector: ".phone, .phone2"
, callback: function (total) {
$('.phone').unhighlight();
searchTerm = $('#search_input').val();
if (searchTerm.length > 0) {
$('.phone').highlight(searchTerm);
}
}
, translit : true
}
);
});
});
</script>
in Controller:
:
public ActionResult List()
{
using (WarehouseSearch.sqldbDataContext sqldb = new WarehouseSearch.sqldbDataContext())
{
PhonesList pl = new PhonesList();
pl.allphones = sqldb.GetPeoplePhonesList().ToList<GetPeoplePhonesListResult>();
return View("~/Views/Home/PeoplePhones.cshtml", pl);
}
}
First I would recommend you to use an external CSS file instead of inline styling.
That way the CSS can be cached in the browser and might help you to boost the performance.
Also in a div with a class "row" you have only 12 columns,it should be like this.
<div class="row">
<div class="col-md-10">
<h2>Phonebook </h2>
</div>
<div class="col-md-2">
</div>
</div>
I would try change this Action to take the first 50
public ActionResult List()
{
using (WarehouseSearch.sqldbDataContext sqldb = new WarehouseSearch.sqldbDataContext())
{
PhonesList pl = new PhonesList();
pl.allphones = sqldb.GetPeoplePhonesList().Take(50).ToList<GetPeoplePhonesListResult>();
return View("~/Views/Home/PeoplePhones.cshtml", pl);
}
}
And later in the view after it finished to iterate over the top 50 phones
Call to another function from the controller that will retrieve the rest of the phones.
#{
((HomeController)this.ViewContext.Controller).GetLast450();
}
And iterate that, probably a partial view will be good here.
I am developing a app in angular.js and html, i got stuck at one place
There is a dropdown on the top, on change of dropdown i want to change background color of some cells like given in image.
Here is my code snippet:
HTML page
<div class="row">
<div class="col col1" style="-webkit-box-shadow: 0 0 20px 0px #999;background-color: #11c1f3;text-align: center;">
<h3 style="color: white">Time Slot</h3>
</div>
<div class="col col1" ng-repeat="time in timeArray" style="background-color: #e0e0e0;text-align: center">
{{time}}
</div>
</div>
<!-- <div id="selectedDateRange"> -->
<div class="row" ng-repeat="(dateindex, date) in dateArray">
<div class="col col1" style="-webkit-box-shadow: 0 0 20px 0px #999;background-color: #11c1f3;text-align: center;">
<h3 style="color: white">{{date}}</h3>
</div>
<div class="col col1" ng-repeat="(timeindex, time) in timeArray" ng-click="selectCell(dateindex, timeindex)" ng-class="{'selected': selectedCell[0] == dateindex && selectedCell[1] == timeindex}"></div>
</div>
code for controller.js
Here is the click event of dropdown change:
$(function () {
$('#seldate').change(function () {
//Here i want to change color of cell located in 1st row and 1st column
//also i want to change color of cell located in 2nd row and 2nd column
})
})
How do i change background color of cell?
Please help and thanks in advance !!
use track by $index in your ng-repeat
and then inside the style of the cell something like
color : $index === 1 ? 'red' : 'green'
Or use ng-style
I think you can change your content by using this kind of code (maybe enhanced, but you have a first idea)
<div class="row">
<div class="col col1" style="-webkit-box-shadow: 0 0 20px 0px #999;background-color: #11c1f3;text-align: center;">
<h3 style="color: white">Time Slot</h3>
</div>
<div class="col col1" ng-repeat="time in timeArray" style="background-color: #e0e0e0;text-align: center" ng-change="currentColor = time.color">
{{time}}
</div>
</div>
<!-- <div id="selectedDateRange"> -->
<div class="row" ng-repeat="(dateindex, date) in dateArray">
<div class="col col1" style="-webkit-box-shadow: 0 0 20px 0px #999;text-align: center;">
<h3 style="color: white">{{date}}</h3>
</div>
<div class="col col1" ng-repeat="(timeindex, time) in timeArray" ng-click="selectCell(dateindex, timeindex)" ng-class="{'selected': selectedCell[0] == dateindex && selectedCell[1] == timeindex}" ng-style="{'background-color':currentColor}"></div>
</div>
You just have to apply the background on the good cell (set a boolean maybe ?)
When dealing with stuff like this I like to add an id element to the thing being repeated, and then in the onclick pass the element just like you are, where then you can change it using jQuery or whatever you like.
<div class="row" ng-repeat="(dateindex, date) in dateArray">
<div class="col col1" style="-webkit-box-shadow: 0 0 20px 0px #999;text-align: center;">
<h3 style="color: white" id="dateArray_{{dateindex}}>{{date}}</h3>
</div>
<div class="col col1" ng-repeat="(timeindex, time) in timeArray" ng-click="selectCell(dateindex, timeindex)" ng-class="{'selected': selectedCell[0] == dateindex && selectedCell[1] == timeindex}" ng-style="{'background-color':currentColor}"></div>
And then in your controller
$scope.selectCell = function(dateindex, timeindex){
$("#dateArray_" + dateindex)
.css({
'color' : 'green'
});
}
you can apply dynamic CSS properties in angular js using ng-class
example:
<p ng-class="bold:isbold"> Applying properties Dynamically </p>
<input type="checkbox" ng-model="isbold">make text bold
whenever value of isbold will be true bold property will be applied
P.S. You can apply multiple properties in ng-class
I'm writing a dynamic list and for some reason all my events are triggered using the same ID (all rows of the list can trigger the event, but using the same ID). My rows have different IDs but for some reason, the event is triggered with the latest entry on the list.
Here is the code of the list:
<div class="listContainer" style="width: 100%; overflow-y: auto;">
<div id="card-list" class="container-fluid">
<div class="row row-space" id="row1">
<div class="row-basic" id="rowClass1" style="background-color: rgb(247, 245, 248);">
<div class="circle"></div>
<div class="testTitleContainerBar" style="color: rgb(79, 101, 114);">#1</div>
<div class="totalNumberContainerBar" style="color: rgb(79, 101, 114);">5 Images</div>
<div class="square"><img src="assets/Menu 2-24.png"></div>
<div class="onePixelSeparatorBar"></div>
</div>
<div class="row-advanced" style="height: 0px; visibility: visible;"> </div>
</div>
<div class="row row-space" id="row2">
<div class="row-basic" id="rowClass2">
<div class="circle"></div>
<div class="testTitleContainerBar">#2</div>
<div class="totalNumberContainerBar">5 Images</div>
<div class="square"><img src="assets/Menu 2-24.png"></div>
<div class="onePixelSeparatorBar"></div>
</div>
<div class="row-advanced" style="height: 0px; visibility: visible;"> </div>
</div>
</div>
The event listner is added dynamically like that:
row = document.createElement('div');
row.classList.add('row');
row.classList.add('row-space');
idNumber = total_Tests;
row.id = "row"+idNumber;
row.addEventListener('click', function() {openRow('#'+row.id)});
Can someone help me to understand what's going on?
You are reusing variable row inside a loop, and by the time click handler executes it references the last row. Capture the current id value:
row.addEventListener('click', (function(id) {
return function() { openRow('#'+id); }
})(row.id));
or
row.addEventListener('click', function() {openRow('#'+this.id)});