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.
Related
I have created a multistep booking system where as the customer will fill out information in 4 steps on the header the steps are shown but the problem is there I wanted to give access to the users so if by mistakenly the user inputs incorrect information they have access to jump out that step and correct their information can anyone help me out as of now when ever the step is clicked that step is shown but the thing is that the active div is not disappearing.
$(document).ready(function() {
$('.booking_step').on('click', function() {
var step = $(this).attr('data-step');
if(step == 1) {
$('.schedule').fadeOut();
$('.minfo').fadeOut();
$('.select_rm').fadeIn(2500);
}
if(step == 2) {
$('.select_rm').fadeOut();
$('.minfo').fadeOut();
$('.schedule').fadeIn(2500);
}
});
});
$(".step1").on('click', (function(e) {
$('.select_rm').fadeOut();
$('.schedule').fadeIn(2500);
}));
$(".step2").on('click', (function(e) {
$('.schedule').fadeOut();
$('.main_box').fadeIn(2500);
}));
$(".step3").on('click', (function(e) {
$('.minfo').fadeOut();
$('.main_box').fadeIn(2500);
}));
a {
cursor:pointer;
}
.booking_step {
cursor:pointer;
display:inline-block;
padding:0 20px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="steps">
<div class="booking_step complete" data-step="1">
<span class="bh_tittle">Clean Type</span>
</div>
<div class="booking_step no_hd dt_schl" data-step="2">
<span class="bh_tittle">Schedule Date</span>
</div>
<div class="booking_step no_hd dt_ad_t" data-step="3">
<span class="bh_tittle">Address</span>
</div>
</div>
<div class="booking-flow-section select_rm" data-section="1" style="display: block;">
<h1>Clean Type Form</h1>
<a class="step1">Next</a>
</div>
<div class="booking-flow-section schedule" data-section="2" style="display: none;">
<h1>Schedule Date Form</h1>
<a class="step2">Next</a>
</div>
<div class="booking-flow-section main_box" data-section="3" style="display: none;">
<h1>Address Form</h1>
<a class="step3">Next</a>
</div>
I am unable to recognize how come the div's will be hidden once which is currently active.
change to below code should work Please try. I think this what you have missed.
$('.minfo').fadeOut(); is changed to $('.main_box').fadeOut();
<style type="text/css">
a {
cursor:pointer;
}
.booking_step {
cursor:pointer;
display:inline-block;
padding:0 20px
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="steps">
<div class="booking_step complete" data-step="1">
<span class="bh_tittle">Clean Type</span>
</div>
<div class="booking_step no_hd dt_schl" data-step="2">
<span class="bh_tittle">Schedule Date</span>
</div>
<div class="booking_step no_hd dt_ad_t" data-step="3">
<span class="bh_tittle">Address</span>
</div>
</div>
<div class="booking-flow-section select_rm" data-section="1" style="display: block;">
<h1>Clean Type Form</h1>
<a class="step1">Next</a>
</div>
<div class="booking-flow-section schedule" data-section="2" style="display: none;">
<h1>Schedule Date Form</h1>
<a class="step2">Next</a>
</div>
<div class="booking-flow-section main_box" data-section="3" style="display: none;">
<h1>Address Form</h1>
<a class="step3">Next</a>
</div> <script type="text/javascript">
$(document).ready(function() {
$('.booking_step').on('click', function() {
var step = $(this).attr('data-step');
if(step == 1) {
$('.schedule').fadeOut();
$('.main_box').fadeOut();
$('.select_rm').fadeIn(2500);
}
if(step == 2) {
$('.select_rm').fadeOut();
$('.main_box').fadeOut();
$('.schedule').fadeIn(2500);
}
});
});
$(".step1").on('click', (function(e) {
$('.select_rm').fadeOut();
$('.schedule').fadeIn(2500);
}));
$(".step2").on('click', (function(e) {
$('.schedule').fadeOut();
$('.main_box').fadeIn(2500);
}));
$(".step3").on('click', (function(e) {
$('.minfo').fadeOut();
$('.main_box').fadeIn(2500);
}));
</script>
Instead of fadeOut() use hide().
fadeOut() has an animation on it.
Also for your jQuery, you could do a simple modification :
$(".step1, .step2, .step3").on('click', (function(e) {
$('.select_rm').hide();
$('.schedule').fadeIn(2500);
}));
This way, you don't duplicate your code.
<div class="lsiting-main">
<div class="row">
<div class="col-md-8">
<div class="col-md-4 text-right">
<span class="close-list">
<span class="funded-list">
<span class="new-list">
<div class="technology closedlanguage" headerindex="0h">
<span class="accordprefix"> </span>
View Detail Notice
<span class="accordsuffix"></span>
</div>
</div>
</div>
<div class="thelanguage" contentindex="0c" style="display: none;">
<div align="center">
<div class="big-listing-details">
</div>
<hr>
</div>
<div class="lsiting-main">
......
</div>
<div class="lsiting-main">
......
</div>
I have list of class="listing-main" and i try to open block class="thelanguage" style="display: none;" on click of class="technology closedlanguage".
But what i need, when i click on class="technology closedlanguage" at that time class change "closedlanguage" to "openlanguage" and style change 'none' to 'block'.
But when i click, only one block open at that time from list of div's
<script type="text/javascript">
$(document).ready(function () {
$('.lsiting-main .closedlanguage').click(function (event) {
event.preventDefault();
var target = $('.thelanguage');
$(target).toggleClass('hidden show');
$('.thelanguage').css('display', 'block');
})
});
I have updated the HTML a bit and also if your willing to use JavaScript then refer the below code, it is working as per your expectation.
Here is the JSFiddle Link: Working JS Fiddle Link
JS Code is :
<script>
document.getElementById("technologyclosedlanguage").addEventListener("click", myFunction);
function myFunction(){
var thelanguage = document.getElementById("thelanguage");
var technology = document.getElementById("technologyclosedlanguage");
thelanguage.style.display="block";
technology.className = "technologyopenlanguage";
alert(technology.className); //class name changed.
}
</script>
HTML Code is :
<div class="lsiting-main">
<div class="row">
<div class="col-md-8">
<div class="col-md-4 text-right">
<span class="close-list">
<span class="funded-list">
<span class="new-list">
<div class="technologyclosedlanguage" id="technologyclosedlanguage" headerindex="0h">
<span class="accordprefix"> </span>
View Detail Notice
<span class="accordsuffix"></span>
</div>
</div>
</div>
<div class="thelanguage" id="thelanguage" contentindex="0c" style="display: none;">
<div align="center">
<div class="big-listing-details">
The Language
</div>
<hr>
</div>
<div class="lsiting-main">
......
</div>
<div class="lsiting-main">
......
</div>
Let me know if it works, and helps you. Happy Coding.
Change your script to:
<script type="text/javascript">
$(document).ready(function () {
$(".closedlanguage").click(function (event) {
var target = $(".thelanguage");
$(target).toggleClass("hidden");
$(".hidden").css("display", "none");
event.preventDefault();
});
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.
I've been trying to workout upload photo using angular-file-upload and Rails with the carrierwave .. I got an error Converting circular structure to JSON, I already google the problem it seems I didn't get the idea how to remove that I error. I just followed the tutorial in https://github.com/nervgh/angular-file-upload/blob/master/examples/simple/index.html.
Angular
$scope.sp = { serviceprovider: {
avatar: { name: $scope.uploader = new FileUploader() }
},
categories: [],
clearances: [2]
};
$scope.registerProvider = function registerProvider () {
console.log($scope.sp);
$http.post('/serviceproviders/new_serviceprovider/', $scope.sp )
.success ( function onLink ( response) {
location.href = "index";
})
.error ( function onLink ( response ) {
console.log(response)
});
}
HTML
<section ng-controller="RegisterServiceProviderCtrl">
<!-- multistep form -->
<form id="msform" ng-submit="registerProvider()" novalidate>
<!-- progressbar -->
<ul id="progressbar">
<li class="active">Authentication</li>
<li>Personal Information</li>
<li>Professional Skill</li>
</ul>
<!-- fieldsets -->
<fieldset>
<h2 class="fs-title">Create your account</h2>
<!-- <h3 class="fs-subtitle">This is step 1</h3> -->
<div class="row">
<div class="col-xs-12">
<center><div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
<div>
<span class="btn btn-primary btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span><input type="file" nv-file-select uploader="uploader"/><%#= f.file_field :avatar %></span>
Remove
</div>
</div></center>
</div>
</div>
..... code
I have a UI where more than three div's are there which has the data's with different ids but with the common button called as "Read".I have displayed the messages in which I have kept the message body as a tiny(15) on this Read button it show me the entire body of the message.How to achieve this one way that I am trying to do is as follows:
foreach (var item in Model.MyNote)
{
<div class="row">
#if (item.Owner.Roles.Any(cx => cx.RoleName == "Customer"))
{
<div class="panel">
<div class="row">
<div class="three columns">
<img src="#Request.Url.FormatAbsoluteUrl(#item.Owner.Personal.ImageURL)" />
<span style="text-align: center;">
#item.Owner.Personal.FirstName #item.Owner.Personal.LastName
</span>
</div>
<div class="nine columns">
<input type="hidden" value="#item.Id" id="messid" />
<p class="parahide1">#item.Description </p>
<p class="parahide">#item.Description.ToTiny(15) </p>
</div>
#*Read*#
<button class="button" id="read">Read</button>
</div>
</div>
}
else if (item.Owner.Roles.Any(cx => cx.RoleName == "Professional"))
{
<div class="panel">
<div class="row">
<div class="nine columns">
<p>#item.Description </p>
</div>
<div class="three columns">
<img src="#Request.Url.FormatAbsoluteUrl(#item.Owner.Professional.ImageURL)" />
<span style="text-align: center;">#item.Owner.Professional.CompanyName</span>
</div>
</div>
Read
</div>
}
</div>
<script type="text/javascript">
$(function () {
$(".parahide1").hide();
$("#read").live('click',function () {
$(".parahide").hide();
$(".parahide1").show();
});
});
</script>
}
This give the the result but it is showing the description of all the div's even if I click on the button of the first div.
Try finding the classes in the parent of the current button like this -
$(function () {
$(".parahide1").hide();
$("#read").on('click',function () {
$(this).parent().find(".parahide").hide();
$(this).parent().find(".parahide1").show();
});
});
Hence, only the divs present in the current button's parent will be hidden or shown!
More on .parent() and .find()
Also use .on() instead of .live() as live has been deprecated.