Styled-components getting Expecting Unicode escape sequence \uXXXX - c#

I'm going through this .net tutorial https://learn.microsoft.com/en-us/learn/modules/build-web-api-minimal-spa/3-exercise-create-front-end
I've followed the steps and even copy/pasted their code for Main.js:
import React, { useState } from "react";
import styled from "styled-components";
const PizzaFrame = styled.div\`
border: solid 1px gray;
padding: 10px;
margin: 15px 10px;
border-radius: 5px;
box-shadow: 0 0 5px grey;
font-family: Arial;
`;
const Input = styled.input\`
border: solid 1px black;
padding: 5px;
border-radius: 3px;
`;
const Title = styled(Input)\`
text-transform: uppercase;
`;
const Save = styled.button\`
width: 100px;
margin: 10px;
background: green;
color: white;
font-size: 16px;
padding: 10px;
border-radius: 5px;
`;
let pizzas = [{
id: 1, name: 'Cheese pizza', description: 'very cheesy'
},
{
id: 2, name: 'Al Tono pizza', description: 'lots of tuna'
}];
const Pizza = ({ pizza }) => {
const [data, setData] = useState(pizza);
const [dirty, setDirty] = useState(false);
function update(value, fieldName, obj) {
setData({ ...obj, [fieldName] : value });
setDirty(true);
}
function onSave() {
setDirty(false);
// make REST call
}
return (<React.Fragment>
<PizzaFrame>
<h3>
<Title onChange={(evt) => update(evt.target.value, 'name', data)} value={data.name} />
</h3>
<div>
<Input onChange={(evt) => update(evt.target.value, 'description', data)} value={data.description} />
</div>
{dirty ?
<div><Save onClick={onSave}>Save</Save></div> : null
}
</PizzaFrame>
</React.Fragment>)
}
const Main = () => {
const data = pizzas.map(pizza => <Pizza pizza={pizza} />)
return (<React.Fragment>
{data}
</React.Fragment>)
}
export default Main;
In my VS Code I get errors Invalid character.ts(1127) for everything starting at the "`" here:
const PizzaFrame = styled.div\`
border: solid 1px gray;
padding: 10px;
margin: 15px 10px;
border-radius: 5px;
box-shadow: 0 0 5px grey;
font-family: Arial;
`;
const Input = styled.input\`
border: solid 1px black;
padding: 5px;
border-radius: 3px;
`;
const Title = styled(Input)\`
text-transform: uppercase;
`;
const Save = styled.button\`
width: 100px;
margin: 10px;
background: green;
color: white;
font-size: 16px;
padding: 10px;
border-radius: 5px;
`;
and it won't compile:
Failed to compile.
SyntaxError: C:\..\net_react\pizza-web\src\Main.js: Expecting Unicode escape sequence \uXXXX. (4:30)
2 | import styled from "styled-components";
3 |
> 4 | const PizzaFrame = styled.div\`
I also get warnings when running or when doing yarn add styled-components:
warning Pattern ["styled-components#^5.3.5"] is trying to unpack in the same destination "C:\\Users\\...\\AppData\\Local\\Yarn\\Cache\\v6\\npm-styled-components-5.3.5-a750a398d01f1ca73af16a241dec3da6deae5ec4-integrity\\node_modules\\styled-components" as pattern ["styled-components#^5"]. This could result in non-deterministic behavior, skipping.
[3/4] Linking dependencies...
warning " > #testing-library/user-event#13.5.0" has unmet peer dependency "#testing-library/dom#>=7.21.4".
warning "react-scripts > tailwindcss#3.0.23" has unmet peer dependency "autoprefixer#^10.0.2".
warning "react-scripts > eslint-config-react-app > eslint-plugin-flowtype#8.0.3" has unmet peer dependency "#babel/plugin-syntax-flow#^7.14.5".
warning "react-scripts > eslint-config-react-app > eslint-plugin-flowtype#8.0.3" has unmet peer dependency "#babel/plugin-transform-react-jsx#^7.14.9".
warning "react-scripts > react-dev-utils > fork-ts-checker-webpack-plugin#6.5.0" has unmet peer depend
I added this "styled-components" to my package.json:
{
"name": "pizza-web",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.3",
"#testing-library/react": "^12.1.4",
"#testing-library/user-event": "^13.5.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-scripts": "5.0.0",
"styled-components": "^5.3.5",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"resolutions": {
"styled-components": "^5"
}
}
I'm not sure if it's because "styled-components" is not properly installed?

I don't know why they are escaping the first backtick, but that's wrong, this is how you use styled-components:
const PizzaFrame = styled.div`
border: solid 1px gray;
padding: 10px;
margin: 15px 10px;
border-radius: 5px;
box-shadow: 0 0 5px grey;
font-family: Arial;
`;
styled-components are based off a JS feature called Tagged Template Literals, that lets you call a function with backticks `` instead of (), so styled.div is just a common JS function: MDN
If you are not sure to have installed correctly styled-components package, just do :
yarn remove styled-components
and
yarn add styled-components

Related

C# AzureMaps page doesn't show the map when moving to MVC application

I have a html page of AzureMaps on github. I run directly the html file by Chrome and it works. But when I move it to MVC application, it doesn't show the map.
I don't know what I'm missing when I come to MVC. It just displays as below. Left is html run directly by Chrome and it works. Right is page from Index.cshtml and it doesn't show the map, even no error in console so I have no idea what goes wrong.
This Microsoft page refers to the Github link above.
Do you have any idea on this?
Thanks very much.
I just copy everything from the .html file to the Index.cshtml page.
My Index.cshtml:
#{
ViewData["Title"] = "Index";
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Interactive Search Quickstart - Azure Maps Web SDK Samples</title>
<meta charset="utf-8" />
<link rel="shortcut icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="This tutorial shows how to create an interactive search experience." />
<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, services, module, tutorials, search, point of interest, POI" />
<meta name="author" content="Microsoft Azure Maps" />
<meta name="screenshot" content="screenshot.jpg" />
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
<link href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" rel="stylesheet" />
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
<!-- Add a reference to the Azure Maps Services Module JavaScript file. -->
<script src="https://atlas.microsoft.com/sdk/javascript/service/2/atlas-service.min.js"></script>
<script>
var map, datasource, client, popup, searchInput, resultsPanel, searchInputLength, centerMapOnResults;
//The minimum number of characters needed in the search input before a search is performed.
var minSearchInputLength = 3;
//The number of ms between key strokes to wait before performing a search.
var keyStrokeDelay = 150;
function GetMap() {
//Initialize a map instance.
map = new atlas.Map('myMap', {
center: [-118.270293, 34.039737],
zoom: 14,
view: 'Auto',
//Add authentication details for connecting to Azure Maps.
authOptions: {
////Use Azure Active Directory authentication.
//authType: 'anonymous',
//clientId: 'e6b6ab59-eb5d-4d25-aa57-581135b927f0', //Your Azure Maps client id for accessing your Azure Maps account.
//getToken: function (resolve, reject, map) {
// //URL to your authentication service that retrieves an Azure Active Directory Token.
// var tokenServiceUrl = "https://samples.azuremaps.com/api/GetAzureMapsToken";
// fetch(tokenServiceUrl).then(r => r.text()).then(token => resolve(token));
//}
//Alternatively, use an Azure Maps key. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
authType: 'subscriptionKey',
subscriptionKey: 'W*******U'
}
});
//Store a reference to the Search Info Panel.
resultsPanel = document.getElementById("results-panel");
//Add key up event to the search box.
searchInput = document.getElementById("search-input");
searchInput.addEventListener("keyup", searchInputKeyup);
//Create a popup which we can reuse for each result.
popup = new atlas.Popup();
//Wait until the map resources are ready.
map.events.add('ready', function () {
//Add the zoom control to the map.
map.controls.add(new atlas.control.ZoomControl(), {
position: 'top-right'
});
//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
map.sources.add(datasource);
//Add a layer for rendering the results.
var searchLayer = new atlas.layer.SymbolLayer(datasource, null, {
iconOptions: {
image: 'pin-round-darkblue',
anchor: 'center',
allowOverlap: true
}
});
map.layers.add(searchLayer);
//Add a click event to the search layer and show a popup when a result is clicked.
map.events.add("click", searchLayer, function (e) {
//Make sure the event occurred on a shape feature.
if (e.shapes && e.shapes.length > 0) {
showPopup(e.shapes[0]);
}
});
});
}
function searchInputKeyup(e) {
centerMapOnResults = false;
if (searchInput.value.length >= minSearchInputLength) {
if (e.keyCode === 13) {
centerMapOnResults = true;
}
//Wait 100ms and see if the input length is unchanged before performing a search.
//This will reduce the number of queries being made on each character typed.
setTimeout(function () {
if (searchInputLength == searchInput.value.length) {
search();
}
}, keyStrokeDelay);
} else {
resultsPanel.innerHTML = '';
}
searchInputLength = searchInput.value.length;
}
function search() {
//Remove any previous results from the map.
datasource.clear();
popup.close();
resultsPanel.innerHTML = '';
//Use MapControlCredential to share authentication between a map control and the service module.
var pipeline = atlas.service.MapsURL.newPipeline(new atlas.service.MapControlCredential(map));
//Construct the SearchURL object
var searchURL = new atlas.service.SearchURL(pipeline);
var query = document.getElementById("search-input").value;
searchURL.searchPOI(atlas.service.Aborter.timeout(10000), query, {
lon: map.getCamera().center[0],
lat: map.getCamera().center[1],
maxFuzzyLevel: 4,
view: 'Auto'
}).then((results) => {
//Extract GeoJSON feature collection from the response and add it to the datasource
var data = results.geojson.getFeatures();
datasource.add(data);
if (centerMapOnResults) {
map.setCamera({
bounds: data.bbox
});
}
console.log(data);
//Create the HTML for the results list.
var html = [];
for (var i = 0; i < data.features.length; i++) {
var r = data.features[i];
html.push('<li onclick="itemClicked(\'', r.id, '\')" onmouseover="itemHovered(\'', r.id, '\')">')
html.push('<div class="title">');
if (r.properties.poi && r.properties.poi.name) {
html.push(r.properties.poi.name);
} else {
html.push(r.properties.address.freeformAddress);
}
html.push('</div><div class="info">', r.properties.type, ': ', r.properties.address.freeformAddress, '</div>');
if (r.properties.poi) {
if (r.properties.phone) {
html.push('<div class="info">phone: ', r.properties.poi.phone, '</div>');
}
if (r.properties.poi.url) {
html.push('<div class="info">http://', r.properties.poi.url, '</div>');
}
}
html.push('</li>');
resultsPanel.innerHTML = html.join('');
}
});
}
function itemHovered(id) {
//Show a popup when hovering an item in the result list.
var shape = datasource.getShapeById(id);
showPopup(shape);
}
function itemClicked(id) {
//Center the map over the clicked item from the result list.
var shape = datasource.getShapeById(id);
map.setCamera({
center: shape.getCoordinates(),
zoom: 17
});
}
function showPopup(shape) {
var properties = shape.getProperties();
//Create the HTML content of the POI to show in the popup.
var html = ['<div class="poi-box">'];
//Add a title section for the popup.
html.push('<div class="poi-title-box"><b>');
if (properties.poi && properties.poi.name) {
html.push(properties.poi.name);
} else {
html.push(properties.address.freeformAddress);
}
html.push('</b></div>');
//Create a container for the body of the content of the popup.
html.push('<div class="poi-content-box">');
html.push('<div class="info location">', properties.address.freeformAddress, '</div>');
if (properties.poi) {
if (properties.poi.phone) {
html.push('<div class="info phone">', properties.phone, '</div>');
}
if (properties.poi.url) {
html.push('<div><a class="info website" href="http://', properties.poi.url, '">http://', properties.poi.url, '</a></div>');
}
}
html.push('</div></div>');
popup.setOptions({
position: shape.getCoordinates(),
content: html.join('')
});
popup.open(map);
}
</script>
<style>
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
font-family: segoeui;
}
#myMap {
position: relative;
width: 100%;
height: 100%;
}
#search {
position: absolute;
left: 0px;
top: 0px;
width: 400px;
box-shadow: 0px 24px 74px 0px rgba(0, 0, 0, .32);
border: 1px solid #ccc;
overflow-y: hidden;
}
#search > .search-input-box {
background: #fff;
height: 72px;
width: 100%;
}
#search > .search-input-box > .search-input-group {
position: relative;
top: 20px;
left: 20px;
width: 358px;
height: 30px;
margin: 0;
padding: 0;
border: 1px dotted #ccc;
}
#search > .search-input-box > .search-input-group > .search-icon {
margin: 0;
padding: 0;
background-size: 20px 20px;
width: 30px;
height: 30px;
background-position: center;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ctitle%3E-%3C/title%3E%3Cpath d='M10.5,0a5.4457,5.4457,0,0,1,2.7734.75A5.6134,5.6134,0,0,1,15.25,2.7266a5.5224,5.5224,0,0,1,.5547,4.2344A5.4147,5.4147,0,0,1,15.25,8.2734,5.6134,5.6134,0,0,1,13.2734,10.25a5.5014,5.5014,0,0,1-4.6445.4219,5.6256,5.6256,0,0,1-1.6445-.9453L.8516,15.8516A.4807.4807,0,0,1,.5,16a.4823.4823,0,0,1-.3516-.1484.4905.4905,0,0,1,0-.7031l6.125-6.1328a5.6194,5.6194,0,0,1-.9453-1.6445A5.39,5.39,0,0,1,5,5.5a5.4457,5.4457,0,0,1,.75-2.7734A5.6134,5.6134,0,0,1,7.7266.75,5.4457,5.4457,0,0,1,10.5,0Zm0,10a4.347,4.347,0,0,0,1.75-.3555A4.5254,4.5254,0,0,0,14.6445,7.25,4.347,4.347,0,0,0,15,5.5a4.347,4.347,0,0,0-.3555-1.75A4.5254,4.5254,0,0,0,12.25,1.3555a4.4854,4.4854,0,0,0-3.5,0A4.5254,4.5254,0,0,0,6.3555,3.75a4.4854,4.4854,0,0,0,0,3.5A4.5254,4.5254,0,0,0,8.75,9.6445,4.3487,4.3487,0,0,0,10.5,10Z' fill='%234b4b4b'/%3E%3C/svg%3E");
}
#search > .search-input-box > .search-input-group > input {
display: inline-block;
position: absolute;
top: 0px;
left: 30px;
width: calc(100% - 40px);
height: 100%;
margin: 0;
padding: 0 5px;
border-collapse: collapse;
border: 0px;
}
#search > .search-input-box > .search-input-group > input:focus {
outline: none;
}
#results-panel {
width: 100%;
margin: 0;
padding: 0;
background-color: #fff;
list-style: none;
overflow-y: auto;
max-height: calc(100vh - 119px);
}
#results-panel > li {
border-top: 1px dotted #ccc;
padding: 10px 20px;
}
#results-panel > li:hover {
background-color: #f1f2f2;
cursor: pointer;
}
#results-panel > li > .title {
font-family: segoeui-b;
line-height: 14pt;
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
#results-panel > li > .info {
width: 100%;
line-height: 14pt;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.poi-box {
max-width: 200px;
padding: 0;
margin: 0;
}
.poi-title-box {
background-color: #153C64;
width: calc(100% - 16px);
height: 23px;
padding: 8px;
color: #fff;
font-size: 12px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
font-family: segoeui-b;
}
.poi-content-box {
width: calc(100% - 16px);
height: calc(100% - 39px);
padding: 8px;
}
.poi-content-box .info {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: block;
background-repeat: no-repeat;
background-position: left;
padding-left: 15px;
background-size: 10px 10px;
width: calc(100% - 15px);
}
.info .phone {
background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNS45NzQ2IDI2Ij48dGl0bGU+cG9pPC90aXRsZT48cGF0aCBkPSJNMjAuMzkxNCwxNS4zOTk0YTIuODE0MSwyLjgxNDEsMCwwLDEsMS4wNzIyLjIwOTUsMi43MjQzLDIuNzI0MywwLDAsMSwuOTA3My42MDNsMi43OTE2LDIuNzkzYTIuNzI1OCwyLjcyNTgsMCwwLDEsLjYwMjcuOTA3NywyLjg1MjksMi44NTI5LDAsMCwxLDAsMi4xNDU1LDIuNzI1OCwyLjcyNTgsMCwwLDEtLjYwMjcuOTA3N3EtLjcyMzMuNzM2My0xLjMyLDEuMzAxM2E3LjQwNDMsNy40MDQzLDAsMCwxLTEuMjMwOC45NTIxLDUuMDk1LDUuMDk1LDAsMCwxLTEuNDA4NS41ODRBNy42NjM4LDcuNjYzOCwwLDAsMSwxOS4zMzgyLDI2YTExLjQ3NywxMS40NzcsMCwwLDEtMy4yNjExLS40OTUxLDE4LjA4ODIsMTguMDg4MiwwLDAsMS0zLjMzMDktMS4zNzExLDIzLjg4LDIzLjg4LDAsMCwxLTMuMjQ4NC0yLjA4MkEyOC4xNTgsMjguMTU4LDAsMCwxLDYuNDksMTkuNDE3NSwyOC44OTc1LDI4Ljg5NzUsMCwwLDEsMy44ODI5LDE2LjM5NmEyMy42NzQ3LDIzLjY3NDcsMCwwLDEtMi4wNTU2LTMuMjVBMTguMjMyNywxOC4yMzI3LDAsMCwxLC40ODIyLDkuODM4OSwxMS4zODY0LDExLjM4NjQsMCwwLDEsMCw2LjY0LDcuNTk1Niw3LjU5NTYsMCwwLDEsLjE5NjcsNC43OCw1LjIxLDUuMjEsMCwwLDEsLjc4LDMuMzcwNmE3LjA3NSw3LjA3NSwwLDAsMSwuOTUxNy0xLjIzMTRxLjU2NDctLjU5LDEuMzAwNi0xLjMxNEEyLjgyNywyLjgyNywwLDAsMSwzLjkzMzYuMjE1OGEyLjc4NzIsMi43ODcyLDAsMCwxLDIuMTUwOCwwLDIuODA3OSwyLjgwNzksMCwwLDEsLjkwNzMuNjA5NGwyLjc5MTYsMi43OTNhMi43MjU4LDIuNzI1OCwwLDAsMSwuNjAyNy45MDc3LDIuODE3OSwyLjgxNzksMCwwLDEsLjIwOTQsMS4wNzI4LDIuNDc4LDIuNDc4LDAsMCwxLS4xOS45OTY2LDMuNjAxNiwzLjYwMTYsMCwwLDEtLjQ2OTUuNzkzNSw0LjY5NzksNC42OTc5LDAsMCwxLS42MTU0LjY0NzVxLS4zMzYzLjI5Mi0uNjE1NC41NzEzYTMuNzMyNCwzLjczMjQsMCwwLDAtLjQ2OTUuNTY0OSwxLjA4OTQsMS4wODk0LDAsMCwwLS4xOS42MTU3LDEuMTI1MiwxLjEyNTIsMCwwLDAsLjM0MjYuODI1Mmw2Ljk5MTcsNi45OTUxYTEuMTI0MSwxLjEyNDEsMCwwLDAsLjgyNDguMzQyOCwxLjA4ODEsMS4wODgxLDAsMCwwLC42MTU0LS4xOSwzLjczMTMsMy43MzEzLDAsMCwwLC41NjQ3LS40N3EuMjc5Mi0uMjc5My41NzEtLjYxNTdhNC42OTc1LDQuNjk3NSwwLDAsMSwuNjQ3MS0uNjE1NywzLjU5OTEsMy41OTkxLDAsMCwxLC43OTMxLS40NywyLjQ3NDcsMi40NzQ3LDAsMCwxLC45OTYxLS4xOU0xOS4zMzgyLDI0LjM3NWE1Ljc5NDIsNS43OTQyLDAsMCwwLDEuNTI5LS4xNzE0LDMuOTQ3OCwzLjk0NzgsMCwwLDAsMS4xMS0uNDk1MSw1LjczNDEsNS43MzQxLDAsMCwwLC45NjQ0LS44MDYycS40Njk1LS40ODI0LDEuMDc4Ni0xLjA5MThhMS4xMjUyLDEuMTI1MiwwLDAsMCwuMzQyNi0uODI1MiwxLjEwNDUsMS4xMDQ1LDAsMCwwLS4xODQtLjU0LDQuNzY0OSw0Ljc2NDksMCwwLDAtLjQ3NTgtLjY1MzhxLS4yOTE5LS4zNDI4LS42NTM1LS43MDQ2dC0uNzEwNi0uNjg1NXEtLjM0OS0uMzIzNy0uNjQ3MS0uNTk2N3QtLjQ2MzItLjQzOGExLjEzODksMS4xMzg5LDAsMCwwLS44Mzc1LS4zNDI4LDEuMDU4NywxLjA1ODcsMCwwLDAtLjYwOTEuMTksMy45MTY4LDMuOTE2OCwwLDAsMC0uNTU4My40N3EtLjI3OTIuMjc5My0uNTc3NC42MTU3YTUuMDAyNiw1LjAwMjYsMCwwLDEtLjY1MzUuNjE1NywzLjU5OTEsMy41OTkxLDAsMCwxLS43OTMxLjQ3LDIuNDc0NywyLjQ3NDcsMCwwLDEtLjk5NjEuMTksMi44MTQxLDIuODE0MSwwLDAsMS0xLjA3MjItLjIwOTUsMi43MjQzLDIuNzI0MywwLDAsMS0uOTA3My0uNjAzTDcuMjMyOCwxMS43Njg2YTIuNzI1OCwyLjcyNTgsMCwwLDEtLjYwMjctLjkwNzcsMi44MTc5LDIuODE3OSwwLDAsMS0uMjA5NC0xLjA3MjgsMi40NzgsMi40NzgsMCwwLDEsLjE5LS45OTY2LDMuNjAxNiwzLjYwMTYsMCwwLDEsLjQ2OTUtLjc5MzUsNS4wMDMsNS4wMDMsMCwwLDEsLjYxNTQtLjY1MzhxLjMzNjMtLjI5ODMuNjE1NC0uNTc3NmEzLjkxNzgsMy45MTc4LDAsMCwwLC40Njk1LS41NTg2LDEuMDYsMS4wNiwwLDAsMCwuMTktLjYwOTQsMS4xNCwxLjE0LDAsMCwwLS4zNDI2LS44Mzc5cS0uMTY1LS4xNjUtLjQzNzgtLjQ2MzRUNy41OTQ0LDMuNjVxLS4zMjM2LS4zNDkxLS42ODUyLS43MTA5VDYuMjA1LDIuMjg1MmE0Ljc2MjcsNC43NjI3LDAsMCwwLS42NTM1LS40NzYxLDEuMTAzMiwxLjEwMzIsMCwwLDAtLjUzOTMtLjE4NDEsMS4xMjQxLDEuMTI0MSwwLDAsMC0uODI0OC4zNDI4cS0uNjA5MS42MDk0LTEuMDg0OSwxLjA3OTFhNi40NjgzLDYuNDY4MywwLDAsMC0uODEyMS45NjQ4LDMuNzUsMy43NSwwLDAsMC0uNTA3NiwxLjExMDhBNS43NDQyLDUuNzQ0MiwwLDAsMCwxLjYxMTUsNi42NGE5Ljk4MzQsOS45ODM0LDAsMCwwLC40NjMyLDIuOTMyNiwxNi41LDE2LjUsMCwwLDAsMS4yODE2LDMuMDIxNSwyMy4wMTM3LDIzLjAxMzcsMCwwLDAsMS45MzUxLDIuOTc3MSwyNi41MjI5LDI2LjUyMjksMCwwLDAsMi40MzYzLDIuNzczOSwyNy4yODMyLDI3LjI4MzIsMCwwLDAsMi43ODUzLDIuNDEyMSwyMi45ODcsMjIuOTg3LDAsMCwwLDIuOTY5MywxLjkxMDYsMTYuMzY2MSwxNi4zNjYxLDAsMCwwLDIuOTk0NiwxLjI1NjhBOS44ODEsOS44ODEsMCwwLDAsMTkuMzM4MiwyNC4zNzVaIiBmaWxsPSIjNjY2NzY3Ii8+PC9zdmc+");
}
.info .website {
background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNyAyNyI+PHRpdGxlPnBvaTwvdGl0bGU+PHBhdGggZD0iTTEzLjUsMGExMy4yOTc4LDEzLjI5NzgsMCwwLDEsMy41ODU5LjQ4MTIsMTMuNjUyNCwxMy42NTI0LDAsMCwxLDMuMjMsMS4zNTc5LDEzLjQ3NDMsMTMuNDc0MywwLDAsMSw0Ljg0NSw0Ljg0NSwxMy42NTI0LDEzLjY1MjQsMCwwLDEsMS4zNTc5LDMuMjMsMTMuNjAxOSwxMy42MDE5LDAsMCwxLDAsNy4xNzE5LDEzLjY1MjQsMTMuNjUyNCwwLDAsMS0xLjM1NzksMy4yMywxMy40NzQzLDEzLjQ3NDMsMCwwLDEtNC44NDUsNC44NDUsMTMuNjUyNCwxMy42NTI0LDAsMCwxLTMuMjMsMS4zNTc5LDEzLjYwMTksMTMuNjAxOSwwLDAsMS03LjE3MTksMCwxMy42NTI0LDEzLjY1MjQsMCwwLDEtMy4yMy0xLjM1NzksMTMuNDc0MywxMy40NzQzLDAsMCwxLTQuODQ1LTQuODQ1QTEzLjY4MTIsMTMuNjgxMiwwLDAsMSwuNDgxMiwxNy4wOTI1YTEzLjYyNjUsMTMuNjI2NSwwLDAsMSwwLTcuMTc4NSwxMy42NTI0LDEzLjY1MjQsMCwwLDEsMS4zNTc5LTMuMjMsMTMuNDc0MywxMy40NzQzLDAsMCwxLDQuODQ1LTQuODQ1QTEzLjY4MTIsMTMuNjgxMiwwLDAsMSw5LjkwNzUuNDgxMiwxMy4yNzU1LDEzLjI3NTUsMCwwLDEsMTMuNSwwTTI0LjE2NTUsOC40Mzc1YTExLjI2NzgsMTEuMjY3OCwwLDAsMC0xLjIxMjktMi4wMSwxMi4wMDg0LDEyLjAwODQsMCwwLDAtMS41ODItMS43MiwxMi4yNCwxMi4yNCwwLDAsMC0xLjg4NTMtMS4zODQzLDExLjM1MjYsMTEuMzUyNiwwLDAsMC0yLjEyMjYtLjk4ODhBMTEuMjA5NCwxMS4yMDk0LDAsMCwxLDE4LjIyLDMuNzMxYTE0LjMzMTYsMTQuMzMxNiwwLDAsMSwuNjc5LDEuNTIyNywxNS44Nzc1LDE1Ljg3NzUsMCwwLDEsLjUwNzYsMS41ODg2cS4yMTA5LjgwNDIuMzY5MSwxLjU5NTJoNC4zOU0yNS4zMTI1LDEzLjVhMTEuNjUyNSwxMS42NTI1LDAsMCwwLS40ODc4LTMuMzc1SDIwLjAzOTFxLjEwNTUuODQzNy4xNTgyLDEuNjgwOVQyMC4yNSwxMy41cTAsLjg1NjktLjA1MjcsMS42OTQxdC0uMTU4MiwxLjY4MDloNC43ODU2YTExLjY1MjUsMTEuNjUyNSwwLDAsMCwuNDg3OC0zLjM3NU0xMy41LDI1LjMxMjVhMi4yMDg2LDIuMjA4NiwwLDAsMCwxLjIwNjMtLjM1Niw0LjM3Niw0LjM3NiwwLDAsMCwxLjAzNDktLjkzNiw3LjQwMjUsNy40MDI1LDAsMCwwLC44NS0xLjMxMTgsMTUuMzI3MiwxNS4zMjcyLDAsMCwwLC42NjU4LTEuNDgzMnEuMjktLjc1MTUuNDg3OC0xLjQ1dC4zMDMyLTEuMjEyOUg4Ljk1MTdxLjEwNTUuNTE0Mi4zMDMyLDEuMjEyOXQuNDg3OCwxLjQ1YTE1LjMyNzQsMTUuMzI3NCwwLDAsMCwuNjY1OCwxLjQ4MzIsNy40MDI1LDcuNDAyNSwwLDAsMCwuODUsMS4zMTE4LDQuMzc2MSw0LjM3NjEsMCwwLDAsMS4wMzQ5LjkzNiwyLjIwODYsMi4yMDg2LDAsMCwwLDEuMjA2My4zNTZtNC44Mzg0LTguNDM3NXEuMTA1NS0uODQzOC4xNjQ4LTEuNjgwOVQxOC41NjI1LDEzLjVxMC0uODU2OS0uMDU5My0xLjY5NDF0LS4xNjQ4LTEuNjgwOUg4LjY2MTZxLS4xMDU1Ljg0MzctLjE2NDgsMS42ODA5VDguNDM3NSwxMy41cTAsLjg1NjkuMDU5MywxLjY5NDF0LjE2NDgsMS42ODA5aDkuNjc2OE0xLjY4NzUsMTMuNWExMS42NTI1LDExLjY1MjUsMCwwLDAsLjQ4NzgsMy4zNzVINi45NjA5cS0uMTA1NS0uODQzOC0uMTU4Mi0xLjY4MDlUNi43NSwxMy41cTAtLjg1NjkuMDUyNy0xLjY5NDF0LjE1ODItMS42ODA5SDIuMTc1M0ExMS42NTI1LDExLjY1MjUsMCwwLDAsMS42ODc1LDEzLjVNMTMuNSwxLjY4NzVhMi4yMDg2LDIuMjA4NiwwLDAsMC0xLjIwNjMuMzU2LDQuMzc2LDQuMzc2LDAsMCwwLTEuMDM0OS45MzYsNy40MDI1LDcuNDAyNSwwLDAsMC0uODUsMS4zMTE4LDE1LjMyNzQsMTUuMzI3NCwwLDAsMC0uNjY1OCwxLjQ4MzJxLS4yOS43NTE1LS40ODc4LDEuNDVUOC45NTE3LDguNDM3NWg5LjA5NjdxLS4xMDU1LS41MTQyLS4zMDMyLTEuMjEyOXQtLjQ4NzgtMS40NWExNS4zMjcyLDE1LjMyNzIsMCwwLDAtLjY2NTgtMS40ODMyLDcuNDAyNSw3LjQwMjUsMCwwLDAtLjg1LTEuMzExOCw0LjM3Niw0LjM3NiwwLDAsMC0xLjAzNDktLjkzNkEyLjIwODYsMi4yMDg2LDAsMCwwLDEzLjUsMS42ODc1bS0zLjg2MjguNjQ2YTExLjM1MjYsMTEuMzUyNiwwLDAsMC0yLjEyMjYuOTg4OEExMi4yNCwxMi4yNCwwLDAsMCw1LjYyOTQsNC43MDY1YTEyLjAwODQsMTIuMDA4NCwwLDAsMC0xLjU4MiwxLjcyLDExLjI2NzgsMTEuMjY3OCwwLDAsMC0xLjIxMjksMi4wMWg0LjM5cS4xNTgyLS43OTEuMzY5MS0xLjU5NTJhMTUuODc3OCwxNS44Nzc4LDAsMCwxLC41MDc2LTEuNTg4NkExNC4zMzE3LDE0LjMzMTcsMCwwLDEsOC43OCwzLjczMWExMS4yMDkzLDExLjIwOTMsMCwwLDEsLjg1NjktMS4zOTc1TTIuODM0NSwxOC41NjI1YTExLjI2NzgsMTEuMjY3OCwwLDAsMCwxLjIxMjksMi4wMSwxMi4wMDgzLDEyLjAwODMsMCwwLDAsMS41ODIsMS43MiwxMi4yNCwxMi4yNCwwLDAsMCwxLjg4NTMsMS4zODQzLDExLjM1MjUsMTEuMzUyNSwwLDAsMCwyLjEyMjYuOTg4OEExMS4yMDkzLDExLjIwOTMsMCwwLDEsOC43OCwyMy4yNjlhMTQuMzMxNywxNC4zMzE3LDAsMCwxLS42NzktMS41MjI3LDE1Ljg3NzgsMTUuODc3OCwwLDAsMS0uNTA3Ni0xLjU4ODZxLS4yMTA5LS44MDQyLS4zNjkxLTEuNTk1MmgtNC4zOW0xNC41MjgzLDYuMTA0YTExLjM1MjYsMTEuMzUyNiwwLDAsMCwyLjEyMjYtLjk4ODgsMTIuMjQsMTIuMjQsMCwwLDAsMS44ODUzLTEuMzg0MywxMi4wMDgzLDEyLjAwODMsMCwwLDAsMS41ODItMS43MiwxMS4yNjc5LDExLjI2NzksMCwwLDAsMS4yMTI5LTIuMDFoLTQuMzlxLS4xNTgyLjc5MS0uMzY5MSwxLjU5NTJhMTUuODc3NSwxNS44Nzc1LDAsMCwxLS41MDc2LDEuNTg4NiwxNC4zMzE1LDE0LjMzMTUsMCwwLDEtLjY3OSwxLjUyMjdBMTEuMjA5NCwxMS4yMDk0LDAsMCwxLDE3LjM2MjgsMjQuNjY2NVoiIGZpbGw9IiM2NjY3NjciLz48L3N2Zz4=");
}
.info .location {
background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNyAzNiI+PHRpdGxlPnBvaTwvdGl0bGU+PHBhdGggZD0iTTEzLjUsMGExMy4zNywxMy4zNywwLDAsMSwzLjU4NTkuNDc5MiwxMy43ODY2LDEzLjc4NjYsMCwwLDEsMy4yMjczLDEuMzQzOCwxMy4zMzg2LDEzLjMzODYsMCwwLDEsNi4yMDE2LDcuOTY4N0ExMi45MDA5LDEyLjkwMDksMCwwLDEsMjcsMTMuMzMzM2ExMC41NjY0LDEwLjU2NjQsMCwwLDEtLjM0OCwyLjc0LDEzLjQwNTEsMTMuNDA1MSwwLDAsMS0xLjAwMiwyLjU5MzhMMTMuNSwzNiwxLjM1LDE4LjY2NjdBMTMuNDA1LDEzLjQwNSwwLDAsMSwuMzQ4LDE2LjA3MjksMTAuNTY2NCwxMC41NjY0LDAsMCwxLDAsMTMuMzMzMywxMi45MDA5LDEyLjkwMDksMCwwLDEsLjQ4NTIsOS43OTE3LDEzLjQzNDYsMTMuNDM0NiwwLDAsMSwxLjg0NTcsNi42MDQyYTEzLjQ1MywxMy40NTMsMCwwLDEsNC44NDEtNC43ODEyQTEzLjc4NjUsMTMuNzg2NSwwLDAsMSw5LjkxNDEuNDc5MiwxMy4zNywxMy4zNywwLDAsMSwxMy41LDBNMjMuNTQwNiwxNy42MjVxMC0uMDIwOC4wMTA1LS4wMjA4dC4wMTA1LS4wMjA4YTguOTgsOC45OCwwLDAsMCwuODAxNi0yLjA2MjUsOC44ODE2LDguODgxNiwwLDAsMCwuMjc0Mi0yLjE4NzUsMTAuNTMzNywxMC41MzM3LDAsMCwwLS44NzU0LTQuMjcwOCwxMS4xNTYxLDExLjE1NjEsMCwwLDAtMi4zOTQxLTMuNSwxMS4zMSwxMS4zMSwwLDAsMC0zLjU0MzctMi4zNjQ2QTEwLjg5NjEsMTAuODk2MSwwLDAsMCwxMy41LDIuMzMzM2ExMC44OTYxLDEwLjg5NjEsMCwwLDAtNC4zMjQyLjg2NDZBMTEuMzEsMTEuMzEsMCwwLDAsNS42MzIsNS41NjI1YTExLjE1NjEsMTEuMTU2MSwwLDAsMC0yLjM5NDEsMy41LDEwLjUzMzcsMTAuNTMzNywwLDAsMC0uODc1NCw0LjI3MDgsOC44ODE1LDguODgxNSwwLDAsMCwuMjc0MiwyLjE4NzUsOC45OCw4Ljk4LDAsMCwwLC44MDE2LDIuMDYyNXEwLC4wMjA4LjAxMDUuMDIwOHQuMDEwNS4wMjA4TDEzLjUsMzAuNzkxNywyMy41NDA2LDE3LjYyNU0xMy41LDUuNWE3LjgxMjIsNy44MTIyLDAsMCwxLDMuMDkuNjE0Niw4LjAwOTMsOC4wMDkzLDAsMCwxLDIuNTIwNywxLjY3NzEsNy45LDcuOSwwLDAsMSwxLjY5OCwyLjQ5LDcuNzk2LDcuNzk2LDAsMCwxLDAsNi4xMDQyLDcuOSw3LjksMCwwLDEtMS42OTgsMi40OUE4LjAwOTMsOC4wMDkzLDAsMCwxLDE2LjU5LDIwLjU1MjFhOC4wNzY0LDguMDc2NCwwLDAsMS02LjE4LDBBOC4wMDkyLDguMDA5MiwwLDAsMSw3Ljg4OTEsMTguODc1YTcuOSw3LjksMCwwLDEtMS42OTgtMi40OSw3Ljc5Niw3Ljc5NiwwLDAsMSwwLTYuMTA0Miw3LjksNy45LDAsMCwxLDEuNjk4LTIuNDlBOC4wMDkyLDguMDA5MiwwLDAsMSwxMC40MSw2LjExNDYsNy44MTIzLDcuODEyMywwLDAsMSwxMy41LDUuNW0wLDEzLjMzMzNhNS41NDA3LDUuNTQwNywwLDAsMCw1LjEzNjMtMy4zNTQyLDUuNTQsNS41NCwwLDAsMCwwLTQuMjkxNyw1LjUwNTQsNS41MDU0LDAsMCwwLTEuMTkxOC0xLjc1LDUuNjI4OSw1LjYyODksMCwwLDAtNy44ODkxLDAsNS41MDU0LDUuNTA1NCwwLDAsMC0xLjE5MTgsMS43NSw1LjU0LDUuNTQsMCwwLDAsMCw0LjI5MTcsNS41MDU0LDUuNTA1NCwwLDAsMCwxLjE5MTgsMS43NUE1LjU2OTQsNS41Njk0LDAsMCwwLDEzLjUsMTguODMzM1oiIGZpbGw9IiM2NzY4NjciLz48L3N2Zz4=");
}
</style>
</head>
<body onload="GetMap()">
<div id="myMap"></div>
<div id="search">
<div class="search-input-box">
<div class="search-input-group">
<div class="search-icon" type="button"></div>
<input id="search-input" type="text" placeholder="Search">
</div>
</div>
<ul id="results-panel"></ul>
</div>
</body>
</html>
cshtml files are generally meant to contain a subset of HTML elements that go into a page, but you are pasting in the code for a full HTML page, thus putting an HTML page element within another one which generally doesn't go well. The root cause of the issue you are seeing is that the original example modifies the css of the body and html page to stretch to full width/height, and the map is set to take up 100% of these. However, when rendered via MVC, the map is not in the root body tag, but within the main tag of the generated page which has CSS that ignores percentage-based widths/heights.
A simple fix so you can see the map is to add the following CSS:
main {
position: relative;
width: 100%;
height: calc(100vh - 150px);
}
This gives the main element of the page a size that the map can then fill up. Alternatively, you can give the maps div element a fixed size in pixels.

Shopping Cart in C#

i have an e-commerce web site so i have problem about shopping cart. When i remove product, shopping cart dropdown box disappear. How can i solve this problem? Thanks.
.block-minicart > .dropdown-menu {
padding: 20px;
margin: 15px 0 0;
right: 0;
left: auto;
width: 300px;
display: block;
visibility: hidden;
opacity: 0;
-webkit-transition: .35s;
-o-transition: .35s;
transition: .35s;
background-color: #fff;
-webkit-box-shadow: 0 4px 7px 0 rgba(50,50,50,.2);
box-shadow: 0 4px 7px 0 rgba(50,50,50,.2);
color: #666;
}
Assuming there is a Remove()(or an equivalent) method and it makes a call to your server to remove an item that's added to the cart, the following should work for you.
$(document).on('click', 'button.delete', function() {
$(this).closest('li').remove();
var ui = parseInt($(this).attr('data-product-id'));
Sad.Cart.Remove(1, ui);
});

Twitter.Typeahead is not working with bootsrap 3.00 in asp.net mvc 5

Dear I have installed Twitter.Typeahead version 0.11.1. it is not working. Here is my Code
<div class="form-group" style="display:none" id="serialNumber">
<div class="tt-container">
<label>Serial Number</label>
<input class="typeahead form-control" id="SerialNumber" name="SerialNumber" type="text" value="" placeholder="Enter Serial Number Here.." />
</div>
</div>
<ul id="lstSerials" class="list-group"></ul>
And bellow is my script
var sno = [];
var serials = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('serialNumbers'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: '/Sales/GetSerialNo?query=%QUERY',
wildcard: '%QUERY'
}
});
$('#SerialNumber').typeahead({
minLength: 3,
highlight: true,
hint: true
}, {
name: 'serials',
display: 'serialNumbers',
source: serials
}).on("typeahead:select", function (e, data) {
$("#lstSerials").append("<li class='list-group-item'>" + data + "</li>");
$("#SerialNumber").typeahead("val", "");
sno.push(data);
});
Here is Styling for typeahead
.twitter-typeahead .tt-query, .twitter-typeahead .tt-hint {
margin-bottom: 0; }
.tt-hint {
display: block;
width: 100%;
height: 38px;
padding: 8px 12px;
font-size: 14px;
line-height: 1.428571429;
color: #999;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #cccccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; }
.tt-menu {
min-width: 160px;
margin-top: 2px;
padding: 5px;
background-color: #ffffff;
border: 1px solid #cccccc;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
background-clip: padding-box; }
.tt-suggestion {
display: block;
padding: 3px 20px;
width: 100%; }
.tt-suggestion.tt-selectable {
margin: 5px 0px 5px 0px; }
.tt-suggestion.tt-cursor {
color: #fff;
background-color: #428bca; }
.tt-suggestion.tt-cursor a {
color: #fff; }
.tt-suggestion p {
margin: 0; }
Finally here is the controller, for testing purpose I have a static data
public JsonResult GetSerialNo(string query)
{
List<string> lstTest = new List<string>();
lstTest.Add("aaaHafiz");
lstTest.Add("aaaSiddiq");
lstTest.Add("aaaUmer");
return Json(new { serialNumbers = lstTest }, JsonRequestBehavior.AllowGet);
}
But when I run the application after writing three words i get only one value which is invisible don't know why.. the inspection also shows no errors.
sample output errors are given in these pictures:
When I type the keywords in the textbox
I get only one suggestion instead of three and also when i look
at this how bad is this having look and feel
Hi I have Made changes in your code now it is working fine.
I have added Filter function which return serial numbers.
Script Reference
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/typeahead.js/typeahead.jquery.js"></script>
<script src="~/typeahead.js/bloodhound.min.js"></script>
<script>
$(document).ready(function() {
// Instantiate the Bloodhound suggestion engine
var serials = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('serialNumbers'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: 'http://localhost:49497/DemoType/GetSerialNo?query=%QUERY',
filter: function (data)
{
// Map the remote source JSON array to a JavaScript object array
return $.map(data.serialNumbers, function (serial)
{
return {
value: serial
};
});
}
}
});
// Initialize the Bloodhound suggestion engine
serials.initialize();
// Instantiate the Typeahead UI
$('.typeahead').typeahead(null, {
displayKey: 'value',
source: serials.ttAdapter()
});
});
</script>
OutPut :-
Finally i Solved the issue by optimizing the javascript part of my code nd below is my code
var sno = [];
var serials = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('serialNumbers'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: '/Sales/GetSerialNo?query=%QUERY',
filter: function (data) {
return $.map(data.serialNumbers, function (serial) {
return { value: serial };
});
}
}
});
serials.initialize();
$('#SerialNumber').typeahead({
hint: true,
highlight: true,
minLength: 3
}, {
limit: Infinity,
displayKey: 'value',
source: serials.ttAdapter()
}).on("typeahead:select", function (e, data) {
$("#lstSerials").append("<li class='list-group-item'>" + data.value + "</li>");
$("#SerialNumber").typeahead("val", "");
sno.push(data);
});
});
Now It is working according to the expectations
-Thanks

WCF C# .NET equivalent of PHP file get contents on Image for use with iOS

I currently have a PHP script that given a path to an image on the server, converts the image into a data stream and echoes that string.
<?php
$path = htmlspecialchars{$_POST['URL']);
$img = file_get_contents($path);
echo $img;
?>
I then use the response from the PHP to convert the data stream into an image in iOS as such:
NSData *pictureData = [data getPicture:currentPerson.picture_URL];
personPicture = [UIImage imageWithData:pictureData];
How can I accomplish the same task in C# without having to change too much code in the iOS side. Currently I know how to return a JSON object using a WCF service written in .NET C#. However, I cannot figure out how I would return a data stream as I did in PHP.
Also is there any way to make this process more secure?
--EDIT--
Current implementation that isn't working:
[OperationContract]
[WebInvoke(Method = "GET", ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.WrappedRequest, UriTemplate = "/picture/{path}")]
string GetPictureMethod(string path);
public string GetPictureMethod(string path)
{
path = "(test path here)";
string picData = System.IO.File.ReadAllText(path);
return picData;
}
Doing an `NSLog(#"Data: %#", data) gives the following:
Picture data: <efbbbf3c 3f786d6c 20766572 73696f6e 3d22312e 30222065 6e636f64 696e673d 22757466 2d38223f 3e0d0a3c 21444f43 54595045 2068746d 6c205055 424c4943 20222d2f 2f573343 2f2f4454 44205848 544d4c20 312e3020 5472616e 73697469 6f6e616c 2f2f454e 22202268 7474703a 2f2f7777 772e7733 2e6f7267 2f54522f 7868746d 6c312f44 54442f78 68746d6c 312d7472 616e7369 74696f6e 616c2e64 7464223e 0d0a3c68 746d6c20 786d6c6e 733d2268 7474703a 2f2f7777 772e7733 2e6f7267 2f313939 392f7868 746d6c22 3e0d0a20 203c6865 61643e0d 0a202020 203c7469 746c653e 53657276 6963653c 2f746974 6c653e0d 0a202020 203c7374 796c653e 424f4459 207b2063 6f6c6f72 3a202330 30303030 303b2062 61636b67 726f756e 642d636f 6c6f723a 20776869 74653b20 666f6e74 2d66616d 696c793a 20566572 64616e61 3b206d61 7267696e 2d6c6566 743a2030 70783b20 6d617267 696e2d74 6f703a20 3070783b 207d2023 636f6e74 656e7420 7b206d61 7267696e 2d6c6566 743a2033 3070783b 20666f6e 742d7369 7a653a20 2e373065 6d3b2070 61646469 6e672d62 6f74746f 6d3a2032 656d3b20 7d20413a 6c696e6b 207b2063 6f6c6f72 3a202333 33363639 393b2066 6f6e742d 77656967 68743a20 626f6c64 3b207465 78742d64 65636f72 6174696f 6e3a2075 6e646572 6c696e65 3b207d20 413a7669 73697465 64207b20 636f6c6f 723a2023 36363939 63633b20 666f6e74 2d776569 6768743a 20626f6c 643b2074 6578742d 6465636f 72617469 6f6e3a20 756e6465 726c696e 653b207d 20413a61 63746976 65207b20 636f6c6f 723a2023 33333636 39393b20 666f6e74 2d776569 6768743a 20626f6c 643b2074 6578742d 6465636f 72617469 6f6e3a20 756e6465 726c696e 653b207d 202e6865 6164696e 6731207b 20626163 6b67726f 756e642d 636f6c6f 723a2023 30303333 36363b20 626f7264 65722d62 6f74746f 6d3a2023 33333636 39392036 70782073 6f6c6964 3b20636f 6c6f723a 20236666 66666666 3b20666f 6e742d66 616d696c 793a2054 61686f6d 613b2066 6f6e742d 73697a65 3a203236 70783b20 666f6e74 2d776569 6768743a 206e6f72 6d616c3b 6d617267 696e3a20 30656d20 30656d20 31307078 202d3230 70783b20 70616464 696e672d 626f7474 6f6d3a20 3870783b 20706164 64696e67 2d6c6566 743a2033 3070783b 70616464 696e672d 746f703a 20313670 783b7d20 70726520 7b20666f 6e742d73 697a653a 736d616c 6c3b2062 61636b67 726f756e 642d636f 6c6f723a 20236535 65356363 3b207061 6464696e 673a2035 70783b20 666f6e74 2d66616d 696c793a 20436f75 72696572 204e6577 3b206d61 7267696e 2d746f70 3a203070 783b2062 6f726465 723a2031 70782023 66306630 65302073 6f6c6964 3b207768 6974652d 73706163 653a2070 72652d77 7261703b 20776869 74652d73 70616365 3a202d70 72652d77 7261703b 20776f72 642d7772 61703a20 62726561 6b2d776f 72643b20 7d207461 626c6520 7b20626f 72646572 2d636f6c 6c617073 653a2063 6f6c6c61 7073653b 20626f72 6465722d 73706163 696e673a 20307078 3b20666f 6e742d66 616d696c 793a2056 65726461 6e613b7d 20746162 6c652074 68207b20 626f7264 65722d72 69676874 3a203270 78207768 69746520 736f6c69 643b2062 6f726465 722d626f 74746f6d 3a203270 78207768 69746520 736f6c69 643b2066 6f6e742d 77656967 68743a20 626f6c64 3b206261 636b6772 6f756e64 2d636f6c 6f723a20 23636563 6639633b 7d207461 626c6520 7464207b 20626f72 6465722d 72696768 743a2032 70782077 68697465 20736f6c 69643b20 626f7264 65722d62 6f74746f 6d3a2032 70782077 68697465 20736f6c 69643b20 6261636b 67726f75 6e642d63 6f6c6f72 3a202365 35653563 633b7d3c 2f737479 6c653e0d 0a20203c 2f686561 643e0d0a 20203c62 6f64793e 0d0a2020 20203c64 69762069 643d2263 6f6e7465 6e74223e 0d0a2020 20202020 3c702063 6c617373 3d226865 6164696e 6731223e 53657276 6963653c 2f703e0d 0a202020 2020203c 703e4d65 74686f64 206e6f74 20616c6c 6f776564 2e3c2f70 3e0d0a20 2020203c 2f646976 3e0d0a20 203c2f62 6f64793e 0d0a3c2f 68746d6c 3e>
To return a data stream, you need to return your data as a Stream, not as a string. If you return the data as a string, it will be returned as a JSON-encoded representation of that string.
[OperationContract]
[WebGet(BodyStyle = WebMessageBodyStyle.WrappedRequest,
UriTemplate = "/picture/{path}")]
System.IO.Stream GetPictureMethod(string path);
public System.IO.Stream GetPictureMethod(string path)
{
path = "(test path here)";
byte[] picData = System.IO.File.ReadAllBytes(path);
WebOperationContext.Current.OutgoingResponse.ContentType = "image/jpeg"; // or the correct type
return new System.IO.MemoryStream(picData);
}
By the way, you should use [WebGet] instead of [WebInvoke(Method = "GET")].
More data: the NSData which you have is equivalent to this code below. You should first try hitting the WCF service with a tool such as a browser or Fiddler to check whether you get the data back. Only then you should try consuming it from NSData.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Service</title>
<style>BODY { color: #000000; background-color: white; font-family: Verdana; margin-left: 0px; margin-top: 0px; } #content { margin-left: 30px; font-size: .70em; padding-bottom: 2em; } A:link { color: #336699; font-weight: bold; text-decoration: underline; } A:visited { color: #6699cc; font-weight: bold; text-decoration: underline; } A:active { color: #336699; font-weight: bold; text-decoration: underline; } .heading1 { background-color: #003366; border-bottom: #336699 6px solid; color: #ffffff; font-family: Tahoma; font-size: 26px; font-weight: normal;margin: 0em 0em 10px -20px; padding-bottom: 8px; padding-left: 30px;padding-top: 16px;} pre { font-size:small; background-color: #e5e5cc; padding: 5px; font-family: Courier New; margin-top: 0px; border: 1px #f0f0e0 solid; white-space: pre-wrap; white-space: -pre-wrap; word-wrap: break-word; } table { border-collapse: collapse; border-spacing: 0px; font-family: Verdana;} table th { border-right: 2px white solid; border-bottom: 2px white solid; font-weight: bold; background-color: #cecf9c;} table td { border-right: 2px white solid; border-bottom: 2px white solid; background-color: #e5e5cc;}</style>
</head>
<body>
<div id="content">
<p class="heading1">Service</p>
<p>Method not allowed.</p>
</div>
</body>
</html>

Maintain the SelectedNodeStyle of treeview while navigating Treeview on masterpage

Hi all i applied selectednodestyle for a treeview which works fine when i am not navigating. But on navigating i am unable to see the applied color for the treeview selected node. Here is my design in master page
<asp:TreeView ID="TreeViewCategories" runat="server" ExpandDepth="0" Style="min-height: 200px;
max-height: 500px;" NodeIndent="0" LeafNodeStyle-CssClass="LeafNodesStyle" CssClass="TreeView"
NodeStyle-CssClass="NodeStyle" ParentNodeStyle-CssClass="ParentNodeStyle" RootNodeStyle-CssClass="RootNodeStyle"
SelectedNodeStyle-CssClass="SelectedNodeStyle" LeafNodeStyle-Width="100%" NodeStyle-Width="100%"
ParentNodeStyle-Width="100%" RootNodeStyle-Width="100%" Font-Size="12pt">
<Nodes>
<asp:TreeNode Text="All Items" NavigateUrl="~/Default3.aspx" SelectAction="SelectExpand"
Value="All Items">
<asp:TreeNode Text="Hello" Value="Hello"></asp:TreeNode>
</asp:TreeNode>
</Nodes>
</asp:TreeView>
This is my css
<style type="text/css">
.TreeView
{
border-bottom: 1px dotted #B2B2B2 !important;
}
.TreeView div
{
margin-left: 5px;
}
.TreeView table
{
border-top: 1px dotted #B2B2B2 !important;
}
.TreeView div table
{
border-bottom: none !important;
border-top: none !important;
}
.TreeView table td
{
padding: 2px 0;
}
.LeafNodesStyle
{
}
.RootNodeStyle
{
}
/* ALL ELEMENTS */.NodeStyle
{
}
.ParentNodeStyle
{
/*background:yellow;*/
}
.SelectedNodeStyle
{
font-weight: bold;
color: #6799D1;
display: block;
padding: 2px 0 2px 3px;
}
</style>
But i am unable to apply the color for selected node after navigating to a page can any one help me
your codes are working Ok so is the CSS. if you will notice the text of the one youve selected became bold.
If your basis is in change of color of the text, there is some problem. If you would look at the source code, not only SelectedNodeStyle css style is applied on the item, but these also
NodeStyle FooterContent_TreeViewCategories_2 LeafNodesStyle FooterContent_TreeViewCategories_8 SelectedNodeStyle FooterContent_TreeViewCategories_10
so I suggest putting some !important on your css color for the change in color to take effect.
.SelectedNodeStyle
{
font-weight: bold;
color: #6799D1 !important;
display: block;
padding: 2px 0 2px 3px;
}

Categories

Resources