I am trying to get to grips with WebGrid in a c# MVC4 project. The following code gives this error...
Compiler Error Message: CS1502: The best overloaded method match for
'System.Web.Helpers.WebGrid.WebGrid(System.Collections.Generic.IEnumerable,
System.Collections.Generic.IEnumerable, string, int, bool,
bool, string, string, string, string, string, string, string)' has
some invalid arguments
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
#{
List<int> obj1 = new List<int>(){ 1, 2, 3, 4 };
var obj1_i = (IEnumerable<int>)obj1;
var grid = new WebGrid(obj1_i);
}
</head>
<body>
<div>
#grid.GetHtml()
</div>
</body>
</html>
The problem is that WebGrid expects your model to be IEnumerable<dynamic>, not IEnumerable<int>. Change your code to the following:
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
#{
List<dynamic> obj1 = new List<dynamic>(){ 1, 2, 3, 4 };
var grid = new WebGrid(obj1);
}
</head>
<body>
<div>
#grid.GetHtml()
</div>
</body>
Related
I have a Razor view Html.DisplayFor where I am displaying some text. Now I want to truncate the text using jquery. I am using the jquery code from this Jquery Truncate.
In my csHtml, I have something like follows, the BlogContent is some string that I am Binding. Of course I think I can do SubString etc in C# on the BlogContent to truncate. But I want to do it using jquery. I have tried the below code but no luck. Please help.
#{
Layout = null;
}
<div class="blog-post-body">
<p class="p-bottom-20">#Html.DisplayFor(modelItem => item.BlogContent)</p>
</div>
#section scripts
{
<script src="~/js/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="~/bootstrap/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$('ul.pagination > li.disabled > a').addClass('page-link');
truncateText(".p-bottom-20", 100);
});
function truncateText(selector, maxLength) {
$(selector).text((i, txt) => txt.length > maxLength ? txt.substr(0, maxLength) + "..." : txt);
};
</script>
}
I don't see any errors on the Browser Console related to this.
If you are using Layout = null; then #section Scripts doesn't work because the section is defined in _Layout.cshtml. You have to add a full html document in your view.
#{
Layout = null;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>title</title>
</head>
<body>
<div class="blog-post-body">
<p class="p-bottom-20">#Html.DisplayFor(modelItem => item.BlogContent)</p>
</div>
<script src="~/js/jquery.min.js"></script>
<script src="~/bootstrap/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$('ul.pagination > li.disabled > a').addClass('page-link');
truncateText(".p-bottom-20", 100);
});
function truncateText(selector, maxLength) {
$(selector).text((i, txt) => txt.length > maxLength ? txt.substr(0, maxLength) + "..." : txt);
}
</script>
</body>
</html>
I was searching some examples and articles related to saving and loading a route into a bing map but i couldn't find anything, so currently i am asking if this is possible.
Please let me know if this is supported by the bing maps for windows phone.
I used to use bing map api on my web
I`m not sure if it will work well
initialize the map using the following code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">`<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
var map = null;
function GetMap()
{
// Initialize the map
map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Your Bing Maps Key", mapTypeId: Microsoft.Maps.MapTypeId.road });
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
</body>
</html>`
add code to make the route request when the button is clicked, and add code to the RouteCallback function to set the map view and draw the route.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
var map = null;
function GetMap()
{
// Initialize the map
map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Your Bing Maps Key", mapTypeId: Microsoft.Maps.MapTypeId.road });
}
function ClickRoute(credentials)
{
map.getCredentials(MakeRouteRequest);
}
function MakeRouteRequest(credentials)
{
var routeRequest = "http://dev.virtualearth.net/REST/v1/Routes?wp.0=" + document.getElementById('txtStart').value + "&wp.1=" + document.getElementById('txtEnd').value + "&routePathOutput=Points&output=json&jsonp=RouteCallback&key=" + credentials;
CallRestService(routeRequest);
}
function RouteCallback(result) {
if (result &&
result.resourceSets &&
result.resourceSets.length > 0 &&
result.resourceSets[0].resources &&
result.resourceSets[0].resources.length > 0) {
// Set the map view
var bbox = result.resourceSets[0].resources[0].bbox;
var viewBoundaries = Microsoft.Maps.LocationRect.fromLocations(new Microsoft.Maps.Location(bbox[0], bbox[1]), new Microsoft.Maps.Location(bbox[2], bbox[3]));
map.setView({ bounds: viewBoundaries});
// Draw the route
var routeline = result.resourceSets[0].resources[0].routePath.line;
var routepoints = new Array();
for (var i = 0; i < routeline.coordinates.length; i++) {
routepoints[i]=new Microsoft.Maps.Location(routeline.coordinates[i][0], routeline.coordinates[i][1]);
}
// Draw the route on the map
var routeshape = new Microsoft.Maps.Polyline(routepoints, {strokeColor:new Microsoft.Maps.Color(200,0,0,200)});
map.entities.push(routeshape);
}
}
function CallRestService(request)
{
var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
script.setAttribute("src", request);
document.body.appendChild(script);
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
<input id="txtStart" type="text" value="Seattle"/>
<input id="txtEnd" type="text" value="Portland"/>
<input type="button" value="Calculate Route" onclick="ClickRoute()"/>
</body>
</html>
i am trying to send integer value from controller to view and display in view multiplied by 0.2
here the code in controller
public ActionResult Details()
{
ViewBag["salary"] = 1400;
return View();
}
and the code in view
#{
Layout = null;
int Salary=int.Parse(#ViewBag["salary"]);
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Details</title>
</head>
<body>
<div>
<p> Salary: </p>
#(Salary / 0.2)
</div>
</body>
</html>
but it throw an exception
An exception of type 'Microsoft.CSharp.RuntimeBinder.RuntimeBinderException' occurred in
System.Core.dll but was not handled in user code
Additional information: Cannot apply indexing with [] to an expression
of type 'System.Dynamic.DynamicObject'
Use this code in your controller:
ViewBag.salary = 1400;
And this code in your view:
int Salary=(int)ViewBag.salary;
Using the ViewBag is typically considered poor practice, I'd recommend using a Model (Model-View-Controller). I'll also mention that adding logic in the view is also poor practice, your logic should be controlled by the Controller.
Model
public class DetailsVM
{
public decimal Salary { get; set ; }
}
Controller (method)
public ActionResult Details()
{
var model = new DetailsVM();
model.Salary = 1400 / 0.2;
return View(model);
}
View
#model DetailsVM
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Details</title>
</head>
<body>
<div>
<p> Salary: </p>
#Model.Salary
</div>
</body>
</html>
after three days of trying I'm near giving it up..
I try to use the Google Maps API to create a map with a longer line formed by several points. Unfortunately not even uploading a XML file worked out for me (Though I successfully authorized myself with my Google account).
Can someone please give me help and post a C#/VB code (snippet) on how to create a map and draw a line on it? Thanks for you help!
Norbert
If you use javascript API for Google map, here is a sample:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Polyline Simple</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var myLatLng = new google.maps.LatLng(0, -180);
var myOptions = {
zoom: 3,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var flightPlanCoordinates = [
new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(21.291982, -157.821856),
new google.maps.LatLng(-18.142599, 178.431),
new google.maps.LatLng(-27.46758, 153.027892)
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
How to load kml file in Google Map using code?
(C#, javascript, .Net)
I successfully integrated kml files in JavaScript
In code below replace your kml name
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title> Google Maps JavaScript API v3 Example: KmlLayer KML Features</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize () {
var myLatlng = new google.maps.LatLng(40.65, -73.95);
var myOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById("map_canvas"),
myOptions);
var nyLayer = new google.maps.KmlLayer(
'https://sites.google.com/site/test/test/test.kml',
{ suppressInfoWindows: true,
map: map
});
google.maps.event.addListener(nyLayer, 'click', function(kmlEvent) {
var text = kmlEvent.featureData.description;
showInContentWindow(text);
});
function showInContentWindow(text) {
var sidediv = document.getElementById('content_window');
sidediv.innerHTML = text;
}
}
</script>
</head>
In body add these lines
<body onload="initialize()">
<div id="map_canvas" style="width:79%; height:100%; float:left"></div>
<div id="content_window" style="width:19%; height:100%; float:left"></div>
</body>
</html>