How to implement star rating using Mvc5?
I found a code in this link http://www.dotnetfunda.com/articles/show/2828/developing-a-star-rating-in-aspnet-mvc and I did database and I added a Controller and two partial view.
here is the partial view that gave me the problem.
#model string
#{
Single m_Average = 0;
Single m_totalNumberOfVotes = 0;
Single m_totalVoteCount = 0;
Single m_currentVotesCount = 0;
Single m_inPercent = 0;
var thisVote = string.Empty;
if (Model.Length > 0)
{
// calculate total votes now
string[] votes = Model.Split(',');
for (int i = 0; i < votes.Length; i++)
{
m_currentVotesCount = Int16.Parse(votes[i]);
m_totalNumberOfVotes = m_totalNumberOfVotes + m_currentVotesCount;
m_totalVoteCount = m_totalVoteCount + (m_currentVotesCount * (i + 1));
}
m_Average = m_totalVoteCount / m_totalNumberOfVotes;
m_inPercent = (m_Average * 100) / 5;
thisVote = "<span style=\"display: block; width: 65px; height: 13px; background: url(/images/starRating.png) 0 0;\">" +
"<span style=\"display: block; width: " + m_inPercent + "%; height: 13px; background: url(/images/starRating.png) 0 -13px;\"></span> " +
"</span>" +
"<span class=\"smallText\">Overall ratings: <span itemprop=\"ratingCount\">" + m_totalNumberOfVotes + "</span> | Rating: <span itemprop=\"ratingValue\">" + m_Average.ToString("##.##") + "</span> out of 5 </span> ";
}
}
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<meta itemprop="bestRating" content="5" />
<meta itemprop="worstRating" content="1">
<meta itemprop="ratingValue" content="#m_Average.ToString("##.##") %>" />
#Html.Raw(thisVote)
</div>
when I run my application I get this error: INPUT STRING IS NOT IN A CORRECT FORMAT...
The name says it all "INPUT STRING IS NOT IN THE CORRECT FORMAT". Where you you have input strings? on the Parse() methods.
Check the contents of your vote[] array. I am pretty sure one of those values is cannot be parsed numerically.
Related
I am using HTML5 Datepicker. And I want to open this datepicker after click on icon or text.
CODE:
<label for="YOURID">Through<label>
<input id="YOURID" type="date" />
I tried using with label but is not working. I want to use only HTML, CSS and javascript(NOT JQUERY).
But It should be work with label. So My first priority is, I want to implement(Make clickable text and open datepicker) with html css. Datepicker open should be after click on text.
Not getting exactly what you want but i think this is what you are looking for
Try this!
HTML
<label for="YOURID">Date Of Birth</label>
<input type="date" name="dateofbirth" id="YOURID">
CSS
[type="date"] {
background:#fff
url(https://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/calendar_2.png) 97% 50% no-repeat ;
}
[type="date"]::-webkit-inner-spin-button {
display: none;
}
[type="date"]::-webkit-calendar-picker-indicator {
opacity: 0;
}
body {
padding: 4em;
background: #e5e5e5;
font: 13px/1.4 Geneva, 'Lucida Sans', 'Lucida Grande', 'Lucida Sans
Unicode', Verdana, sans-serif;
}
label {
display: block;
}
input {
border: 1px solid #c4c4c4;
border-radius: 5px;
background-color: #fff;
padding: 3px 5px;
box-shadow: inset 0 3px 6px rgba(0,0,0,0.1);
width: 190px;
}
Hope this helps!
Try this, Just add their JS If you don't want the input box to display then make its width to 10px in a way that only calendar icon appears
pikaday
In your HTML
<input type="text" id="datepicker">
In your JS
var picker = new Pikaday({ field: document.getElementById('datepicker') });
The HTML and Javascript date picker example below works in almost all browsers. It uses the native html datetime-local input type and falls back to Pikaday (with time) as a polyfill when datetime-local is not supported by the browser. To run it you need to download Pikaday from https://github.com/owenmead/Pikaday , extract pikaday.js and pikaday.css
and drop them in the same folder as the file containing this code.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="pikaday.css"/>
<script src="pikaday.js"></script>
<script type="text/javascript">
function setDate(elementId, date) {
// "elementId" is the element id of the date field to be updated and will be initialized to "date"
// in the timezone the user is browsing from.
if (elementId.type == "datetime-local") {
// datetime-local is supported, set the initial date in ISO format and show it
elementId.value = date.getFullYear() + '-'+
('0'+(date.getMonth()+1)).slice(-2) + '-' +
('0'+date.getDate()).slice(-2) + 'T' +
('0'+date.getHours()).slice(-2) + ':' +
('0'+date.getMinutes()).slice(-2);
}
else {
// Note that even though we assign the datetime-local input type to time fields it will be read back as text unless
// datetime-local is actually supported.
new Pikaday({
field : elementId,
defaultDate : date,
setDefaultDate : true,
showTime : true,
minutesStep : 5,
splitTimeView : false,
hours24format : true,
position : 'bottom left'
});
}
}
function getDateAsString(elementId) {
var dateAsString;
if (elementId.type == "datetime-local") {
dateAsString = elementId.value;
}
else {
var val = elementId.value;
// Convert time to ISO format which is the same format as that returned by datetime-local
var month = val.substring(4,7);
if (month == "Jan") month = "01";
else if (month == "Feb") month = "02";
else if (month == "Mar") month = "03";
else if (month == "Apr") month = "04";
else if (month == "May") month = "05";
else if (month == "Jun") month = "06";
else if (month == "Jul") month = "07";
else if (month == "Aug") month = "08";
else if (month == "Sep") month = "09";
else if (month == "Oct") month = "10";
else if (month == "Nov") month = "11";
else if (month == "Dec") month = "12";
var hour = val.substring(16,18);
if (val.indexOf("PM") != -1) {
hour = parseInt(hour);
if (hour < 12) {
// Have seen the likes of 21:15 PM returned by pikaday on firefox, hence the hour check
hour = hour+12;
}
}
dateAsString = val.substring(11,15) + "-" + month + "-" + val.substring(8,10) + "T" + hour + ":" + val.substring(19,21);
}
return dateAsString;
}
function getDate(elementId) {
var ds = getDateAsString(elementId);
var date = new Date(ds.substring(0,4), ds.substring(5,7)-1, ds.substring(8,10), ds.substring(11,13), ds.substring(14,16), ds.substring(17,19));
return date;
}
</script>
</head>
<body onload="setDate(document.getElementById('demo'), new Date());">
<input type="datetime-local" id="demo"/>
<br/><br/>
<button type="button" onclick="alert(getDateAsString(document.getElementById('demo')))">Show date as string</button>
<br/><br/>
<button type="button" onclick="alert(getDate(document.getElementById('demo')))">Show date as date object</button>
</body>
</html>
I want to embed a specific range of cells from a Google Docs spreadsheet (or if that doesn't work the whole sheet without header and toolbar) in a website, so that any website visitor can input their data.
I know how to embed a specific range of cells an html table, but that doesn't allow website users to edit the sheet.
A similar question was asked several years ago here but the suggested solution doesn't seem to work anymore.
I called this the htmlSpreadsheet you can use as a dialog or deploy as webapp the doGet is already to go. It's still a pretty simple app. There's a lot of room for customization.
Here's the code.gs file:
function onOpen()
{
SpreadsheetApp.getUi().createMenu('HTML Spreadsheet')
.addItem('Run Spreadsheet in Dialog', 'htmlSpreadsheet')
.addToUi();
}
var SSID='SpreadSheetID';
var sheetName='Sheet1';
function htmlSpreadsheet(mode)
{
var mode=(typeof(mode)!='undefined')?mode:'dialog';
var br='<br />';
var s='';
var hdrRows=1;
var ss=SpreadsheetApp.openById(SSID);
var sht=ss.getSheetByName(sheetName);
var rng=sht.getDataRange();
var rngA=rng.getValues();
s+='<table>';
for(var i=0;i<rngA.length;i++)
{
s+='<tr>';
for(var j=0;j<rngA[i].length;j++)
{
if(i<hdrRows)
{
s+='<th id="cell' + i + j + '">' + '<input id="txt' + i + j + '" type="text" value="' + rngA[i][j] + '" size="10" onChange="updateSS(' + i + ',' + j + ');" />' + '</th>';
}
else
{
s+='<td id="cell' + i + j + '">' + '<input id="txt' + i + j + '" type="text" value="' + rngA[i][j] + '" size="10" onChange="updateSS(' + i + ',' + j + ');" />' + '</th>';
}
}
s+='</tr>';
}
s+='</table>';
//s+='<div id="success"></div>';
s+='</body></html>';
switch (mode)
{
case 'dialog':
var userInterface=HtmlService.createHtmlOutputFromFile('htmlss').setWidth(1000).setHeight(450);
userInterface.append(s);
SpreadsheetApp.getUi().showModelessDialog(userInterface, 'Spreadsheet Data for ' + ss.getName() + ' Sheet: ' + sht.getName());
break;
case 'web':
var userInterface=HtmlService.createHtmlOutputFromFile('htmlss').setWidth(1000).setHeight(450);
return userInterface.append(s).setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
}
function updateSpreadsheet(i,j,value)
{
var ss=SpreadsheetApp.openById(SSID);
var sht=ss.getSheetByName(sheetName);
var rng=sht.getDataRange();
var rngA=rng.getValues();
rngA[i][j]=value;
rng.setValues(rngA);
var data = {'message':'Cell[' + Number(i + 1) + '][' + Number(j + 1) + '] Has been updated', 'ridx': i, 'cidx': j};
return data;
}
function doGet()
{
var output=htmlSpreadsheet('web');
return output;
}
This is the htmlss.html file:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
});
function updateSS(i,j)
{
var str='#txt' + String(i) + String(j);
var value=$(str).val();
$(str).css('background-color','#ffff00');
google.script.run
.withSuccessHandler(successHandler)
.updateSpreadsheet(i,j,value)
}
function successHandler(data)
{
$('#success').text(data.message);
$('#txt' + data.ridx + data.cidx).css('background-color','#ffffff');
}
console.log('My Code');
</script>
<style>
th{text-align:left}
</style>
</head>
<body>
<div id="success"></div>
Following post will be helpfull:
https://support.google.com/docs/answer/37579?hl=fr&ref_topic=2818998
And with some added value, the following is the template you may want to try, where ------ is specific code to your sheet
<iframe style="border: 0;" src="https://docs.google.com/spreadsheets/-----/pubhtml?gid=--------&range=C2:E&chrome=false&single=true&widget=false&headers=false" width="800" height="750" frameborder="0" scrolling="yes"><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span></iframe>
I am creating a list item in typescript component which will be displayed in the UI. The List items should be displayed in separate lines. So i added new line char \n as below. But still the list items are shown in same line. Below is the code. Any idea why it doesn't work?
Typescript Code:
#Output() excludeDisplay: any = '';
#Output() includeDisplay: any = '';
includeValues: any = '';
excludeValues: any = '';
this.includeValues += this.merId + ',' + this.explodeStatus + '\n';
console.log("include values are "+ this.includeValues);
this.excludeValues += this.merId + ',' + this.explodeStatus + '\n';
console.log("exclude values are "+ this.excludeValues);
this.includeDisplay = this.includeValues;
this.excludeDisplay = this.excludeValues;
Html Code:
<ul id="excludedUl" required>{{ excludeDisplay }}</ul>
<ul id="includedUl" required>{{ includeDisplay }}</ul>
CSS Code:
#includedUl {
float: right;
width: 33%;
}
#excludedUl {
float: right;
width: 33%;
}
Need to use fix width:
<div style="width: 500px;white-space: pre-line">{{property}}</div>
In typescript use '\n' to add new line.
\n does not cause a line break in html.
You'll need to use a <br/> or wrap your text in a block element.
this.includeValues += this.merId + ',' + this.explodeStatus + '<br/>';
this.excludeValues += this.merId + ',' + this.explodeStatus + '<br/>';
Or
this.includeValues += '<div>' + this.merId + ',' + this.explodeStatus + '</div>';
this.excludeValues += '<div>' + this.merId + ',' + this.explodeStatus + '</div>';
If the information is only going to be displayed in the HTML, you can use the CSS property white-space. For breaking just the '\n' character then this should work white-space: pre-line; as mentioned here and for the documentation check MDN.
If you still need the original text with \n included for something else, you can always make a call to the Str.replace method, to change all \n into <br/>, so the template works as expected. You could do something like this:
this.includeDisplay = this.includeValues.replace(/\n/g, '<br />');
You can refer to MDN docs.
hi everybody I'm trying to make a Random Generator of Discourses but I don't want to refresh the entire page in order to get a new string, so I thought that maybe innerHTML could be my solution. Unfortunately It gives me an "UNDEFINED" result when I click on the button. I don't know how to proceed. Thanks in advance.
<span id="generator" style="font-size: 20px; font-weight: bold;">
<script language="javascript" type="text/javascript">
Words1 = new Array("blablabla1","blablabla2")
Words2 = new Array("blablabla3","blablabla4")
var random = document.write('- ' +
Words1[Math.floor((Math.random() * 100000) % Words1.length)] +
' ' +
Words2[Math.floor((Math.random() * 100000) % Words2.length)] +
'.\n' );
function refresh(){
document.getElementById('generator').innerHTML = random;
}
</script>
</span>
<input type='button' onclick='refresh()' value='refresh'/>
You are wrapping the javascript code with the span tag. Should be like this and put the code inside de function:
<span id="generator" style="font-size: 20px; font-weight: bold;"></span>
<script language="javascript" type="text/javascript">
function refresh(){
Words1 = new Array("blablabla1","blablabla2")
Words2 = new Array("blablabla3","blablabla4")
var random = document.write('- ' +
Words1[Math.floor((Math.random() * 100000) % Words1.length)] +' ' + Words2[Math.floor((Math.random() * 100000) % Words2.length)] +'.\n' );
document.getElementById('generator').innerHTML = random;
}
</script>
<input type='button' onclick='refresh()' value='refresh'/>
Hey there GMaps API developers. To start - what an incredible product and service the Google Maps/JS API v3 is - thank you so much! Now, with that important bit of sincere gratitude out of the way...
The short_name vs long_name options for address components is a nice feature, but for each service these two attributes mostly contain the same values, except geocode has what I would expect for short_name for both and places has what I would expect for long_name for both! *tears*
Before Places library came out I just assumed that Google didn't actually have short/long versions for street name, localities, etc - but now it seems you do have that formatting somewhere - maybe different product teams have different databases?
So what's the deal?
Image of what I'm talking about (would embed but this is my first stackoverflow question so no reputation): http://i.imgur.com/XPVj8.png
Detailed list of how I wish this worked:
for routes, geocode's short_name places' long_name
have the same "types" value for locality/sublocality between geocode and places (either is fine, just pick one)
consistently provide short/long for state (administrative_area_level_1) - geocode gets this right but places doesn't
same for country - and where is geocode getting its "USA" in the formatted address?
would be neat if postal_code long_name had zip+4, but I would imagine that'd be a huge endeavor from a data standpoint
Thanks so much - looking forward to any insight on this behavior!
Code behind the image:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>GMaps API V3 Geocoder vs Places Address Components | Short vs Long Name</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true&libraries=places"></script>
<style type="text/css">
#map {height: 100px; width: 600px; border: 1px solid #333; margin-top: 0.6em; }
table { border-collapse: collapse; border-spacing: 0; }
table td {border-top: 1px solid #DDD; padding:4px 8px; }
</style>
<script type="text/javascript">
var map, geocoder, places, geocode_components, geocode_formatted, places_components, places_formatted
function initialize() {
geocoder = new google.maps.Geocoder();
geocoder.geocode({'address': '3 South Main Street, York New Salem, PA'},
function (results, status) {
geocode_components = results[0].address_components;
geocode_formatted = results[0].formatted_address;
map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: results[0].geometry.location,
zoom: 10
});
places = new google.maps.places.PlacesService(map);
places.search({location: results[0].geometry.location, radius:100, keyword: "Pizza"},
function(results, status) {
//get details - this feels a little extraneous to me, but y'all know best
places.getDetails({reference: results[0].reference},
function(result, status) {
places_components = result.address_components;
places_formatted = result.formatted_address;
writeResults();
});
});
});
}
function writeResults() {
tbody = document.getElementById('results');
formatted = document.getElementById('formatted');
var rows = "";
for(var i=0; i<geocode_components.length; i++) {
var c = geocode_components[i];
rows = rows + '<tr><td>Geocoding</td><td>' + c.types[0] + '</td><td>' + c.short_name + '</td><td>' + c.long_name + '</td></tr>';
}
for(var i=0; i<places_components.length; i++) {
var c = places_components[i];
rows = rows + '<tr><td>Places</td><td>' + c.types[0] + '</td><td>' + c.short_name + '</td><td>' + c.long_name + '</td></tr>';
}
tbody.innerHTML = rows;
formatted.innerHTML = '<br />Geocode Formatted: ' + geocode_formatted + '<br />' + 'Places Formatted: ' + places_formatted;
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map"></div>
<table>
<thead><tr><th>Service</th><th>Type</th><th>Short Name</th><th>Long Name</th></tr></thead>
<tbody id="results"></tbody>
</table>
<div id="formatted"></div>
</body>
</html>
As noted in comments - this question (request) was fixed/implemented back in January, 2013, see https://issuetracker.google.com/issues/35821543