JqGrid not Showing Grid in ASP.NET MVC3 - c#

View :
#{
ViewBag.Title = "TestGrid";
}
<link href="#Url.Content("~/Content/JqGrid/jquery-ui-jqgrid.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/JqGrid/jquery-1.5.2.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/JqGrid/jquery-ui-1.8.7.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/JqGrid/jquery-ui.multiselect.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/JqGrid/jquery.tmpl.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/JqGrid/jquery.jqGrid.locale-en-4.1.2.js")"
type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/JqGrid/jquery.jqGrid-4.1.2.min.js")" type="text/javascript"></script>
<h2>
TestGrid</h2>
<h2>
My Grid Data</h2>
<table id="list">
</table>
<div id="pager">
</div>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#list").jqGrid({
url: 'Grid/GridData',
datatype: 'json',
colNames: ['COM_NAME', 'COM_CODE', 'DELV_UNITS', 'LOT_SIZE', 'TICK_SIZE', 'TICK_VALUE'],
colModel: [
{ name: 'COM_NAME', index: 'COM_NAME', width: 90 },
{ name: 'COM_CODE', index: 'COM_CODE', width: 100 },
{ name: 'DELV_UNITS', index: 'DELV_UNITS', width: 80, align: "right" },
{ name: 'LOT_SIZE', index: 'LOT_SIZE', width: 80, align: "right" },
{ name: 'TICK_SIZE', index: 'TICK_SIZE', width: 80, align: "right" },
{ name: 'TICK_VALUE', index: 'TICK_VALUE', width: 150, sortable: false }
],
rowNum: 10,
rowList: [10, 20, 30],
pager: '#pager',
viewrecords: true,
jsonReader: {
root: "rows",
page: "page",
cell: "cell"
},
caption: "JSON Example"
});
});
jQuery("#list").jqGrid('navGrid', '#pager', { edit: false, add: false, del: false });
</script>
Controller :
public ActionResult GridData(string sidx = "", string sord = "", int page = 1, int rows = 10)
{
TestGridModel tstGrid = new TestGridModel();
tstGrid.listArr = new List<CommodityReport>();
string conn = ConfigurationManager.ConnectionStrings["DbConnnectionString"].ConnectionString;
ReportDAL rptDal = new ReportDAL();
DataTable dt = rptDal.GetCommodity(conn, "");
//List<string[]> row = new List<string[]>();
List<Cell> row = new List<Cell>();
int i = 0;
foreach (DataRow item in dt.Rows)
{
row.Add(new Cell { cell = dt.Rows[i].ItemArray.Select(x => x.ToString()).ToArray() });
i++;
}
var jsonData = new
{
total = 1, // we'll implement later
page = page,
records = 3, // implement later
rows = row.ToArray()
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
}
Result :
{"total":1,"page":1,"records":3,"rows":[{"cell":
["WHEAT","WHEAT","1","1.0000","1","100.000000"]},{"cell":["SL10","SILVER","1","1.0000","1","10.000000"]},{"cell":["CL10","CRUDE10","1","0.0100","1","10.000000"]},{"cell":["SL100","SL100OZ","1","0.0010","100","100.000000"]},{"cell":["TOLAGOLD","TOLAGOLD","1","1.0000","10","1.000000"]},{"cell":["JPYUSD","JPYUSD","1","0.0100","10000","10000.000000"]},{"cell":["GOKILO","GOLDKILO","1","1.0000","1","103.260000"]},{"cell":["TG100","TGOLD100","1","1.0000","100","100.000000"]},{"cell":
["TG50","TGOLD50","1","1.0000","50","50.000000"]},{"cell":["RBDPO","PALMOLEIN","1","1.0000","1","669.810000"]},{"cell":["GO","GOLD","1","1.0000","10","10.000000"]},{"cell":["GOD","GOLDOCTDEC","1","1.0000","1","1.000000"]},{"cell":["GSDJ","GOSPDECJAN","1","1.0000","1","1.000000"]},{"cell":["GSMA","GOSPMARAPR","1","1.0000","1","1.000000"]},{"cell":["RI6","RICEIRRI6","1","1.0000","1","250.000000"]},{"cell":["GSGP","GOSPAUGSEP","1","1.0000","1","10.000000"]},{"cell":["MGOLD","MINIGOLD","10","1.0000","10","1.000000"]},{"cell":["BCO","BRENTCRUDE","1","1.0000","1","1.000000"]},{"cell":["PT","PLATINUM","1","1.0000","1","1.000000"]},{"cell":["GSLG","GOSPJULAUG","1","1.0000","1","10.000000"]},{"cell":["PKRUSD","PKRUSD","1000","0.0100","1","10.000000"]},{"cell":["GO1KG","GOLD1KG","1","1.0000","1","103.260000"]},{"cell":["K3M","KIBOR3M","1","0.0100","1","2500.000000"]},{"cell":["TTGOLD","TTGOLD","10","1.0000","1","10.000000"]},{"cell":["CRUDEOIL","CRUDEOIL","1","0.0100","100","100.000000"]},{"cell":["GO100","GO100OZ","1","0.1000","100","100.000000"]},{"cell":["IRRI6W","IRRI6W","1","1.0000","1","250.000000"]},{"cell":["SL500","SL500OZ","1","0.0010","500","500.000000"]},{"cell":["GO1","GO1OZ","1","0.1000","1","1.000000"]},{"cell":["WTI100","WTI100","1","0.0100","100","100.000000"]},{"cell":["CL100","CRUDE100","1","0.0100","1","100.000000"]},{"cell":["EURUSD","EURUSD","1","0.0001","10000","10000.000000"]},{"cell":["GBPUSD","GBPUSD","1","0.0001","10000","10000.000000"]},{"cell":["USDJPY","USDJPY","1","0.0100","10000","10000.000000"]},{"cell":["TGOLD","TGOLD","1","1.0000","10","1.000000"]},{"cell":["SUGAR","SUGAR","1","0.0100","1","10000.000000"]},{"cell":["USCOTTON","USCOTTON","1","0.0100","1","50.000000"]},{"cell":["GO10","GO10OZ","1","0.1000","10","10.000000"]},{"cell":["SLV10","SL10","1","0.0010","10","10.000000"]},{"cell":
["ICT","ICOTTON","1","0.0100","1","50.000000"]},{"cell":["MTGOLD","MTOLAGOLD","1","1.0000","10000","0.001000"]},{"cell":["COPPER","COPPER","1","0.0001","1000","1000.000000"]},{"cell":["BRENT10","BRENT10","1","0.0100","1","10.000000"]},{"cell":["BRENT100","BRENT100","1","0.0100","1","100.000000"]}]}
problem is when my controller returns the Json it simply show the Json on Webpage instead of grid. can any help me whats the problem ?

Related

jqGrid filter dropdownlist not working with special characters

When using jqGrid inbuilt functionality of column searching, the dropdwonlist refuses to display special characters such as ç, Ë etc. For some reason they get split into two rows. This means if we take a word "Dfëstuç" the dropdownlist or rather option list will be generated as such:
Dfë
undefined
stuç
undefined
My code is as follows:
#model WS.ViewModels.CaseViewModel
#{
ViewBag.Title = "";
Layout = "~/Views/Shared/_Layout.cshtml";
<meta charset="utf-8">
string idVendbanimiSelectValues = ":";
foreach (var item in Model.NomenklaturaVendbanimiDropDownListData.OrderBy(n => n.IdVendbanimi))
{
idVendbanimiSelectValues += ";" + item.IdVendbanimi + ":" + item.EnPershkrimi;
}
}
#section AdditionalCss {
#Styles.Render("~/Content/Styles/ui.jqgrid.min.css")
}
#section AdditionalJavaScript {
#Scripts.Render("~/bundles/jqgrid")
#Scripts.Render("~/Scripts/jqgrid-listsearch.js")
#Scripts.Render("~/Scripts/jquery.searchFilter.min.js")
<script type="text/javascript">
$(function () {
var idVendbanimiSelectValues = "#idVendbanimiSelectValues";
$('#list-grid').jqGrid({
url: '/Lenda/GridDataWithFilters/',
datatype: 'json',
mtype: 'GET',
colNames: ['CaseId','IdVendbanimi'],
colModel: [
{ name: 'CaseId', index: 'CaseId', align: 'right' },
{ name: 'IdVendbanimi', index: 'IdVendbanimi', align: 'left', stype: 'select', edittype: 'select', editoptions: { value: idVendbanimiSelectValues }, autoencode: false }
],
pager: $('#list-pager'),
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'CaseId',
sortorder: "asc",
viewrecords: true,
height: '100%',
width: '1200',
ignoreCase: true,
autoencode: true,
}).jqGrid('navGrid', '#list-pager', { edit: false, add: false, del: false, search: false, refresh: false });
$('#list-grid').jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, beforeSearch: function () {
// verify entered data before searching
var postData = $('#list-grid').jqGrid('getGridParam', 'postData');
var searchData = $.parseJSON(postData.filters);
var isThereValidationErrors = false;
var validationErrors = "";
for (var iRule = 0; iRule < searchData.rules.length; iRule++) {
var enteredValue = searchData.rules[iRule].data;
if (searchData.rules[iRule].field == "CaseId" && !isNumeric(enteredValue)) {
validationErrors += " Id Lenda must be a valid number.";
isThereValidationErrors = true;
}
}
if(isThereValidationErrors)
alert($.trim(validationErrors));
return isThereValidationErrors;
}
});
});
</script>
}
<h2>#ViewBag.Title</h2>
<br /><br />
<table id="list-grid"></table>
<div id="list-pager"></div>
Is your JSON data correctly UTF-8 encoded? e.g.:
the ë character should be encoded with two bytes, 0xC3 0xAB.
the JSON data maybe needs a UTF-8 preamble, 0xEF 0xBB 0xBF.

display child grid based on parent grid

I have a requirement where I need to Display parent grid.
Based on the item selected in the parent, fetch data and display in child grid. I am currently doing a UI mockup and don't have the models all built yet. So the models you see below are just samples.
I can display the parent grid with data I need. I also have code to select a row in the parent grid and send the row data to the controller using ajax post. I need to use this data to populate the child grid. This is the step where I am not sure what I am doing wrong.
My controllers and views are below : Can you please help ?
--Controller:
public ActionResult GetData()
{
List<Hierarchy> lh = new List<Hierarchy>();
Hierarchy m = new Hierarchy();
m.Hierarchy1 = 1;
m.Hierarchy2 = 2;
m.Hierarchy3 = 3;
lh.Add(m);
Hierarchy n = new Hierarchy();
n.Hierarchy1 = 11;
n.Hierarchy2 = 22;
n.Hierarchy3 = 33;
lh.Add(n);
Hierarchy o = new Hierarchy();
o.Hierarchy1 = 111;
o.Hierarchy2 = 222;
o.Hierarchy3 = 333;
lh.Add(o);
return Json(new { rows = lh }, JsonRequestBehavior.AllowGet);
}
public ActionResult EditDescription(Hierarchy info)
{
List<Product> plist = new List<Product>();
if (info.Hierarchy1 == 1 && info.Hierarchy2 == 2 && info.Hierarchy3 == 3)
{
Product p = new Product();
p.ProductId = 1;
p.Productdesc = "ABC";
plist.Add(p);
Product q = new Product();
q.ProductId = 2;
q.Productdesc = "DEF";
plist.Add(q);
}
if (info.Hierarchy1 == 11 && info.Hierarchy2 == 22 && info.Hierarchy3 == 33)
{
Product p = new Product();
p.ProductId = 11;
p.Productdesc = "ABCD";
plist.Add(p);
Product q = new Product();
q.ProductId = 22;
q.Productdesc = "DDEF";
plist.Add(q);
}
return Json(new { rows = plist }, JsonRequestBehavior.AllowGet);
//return Json("Response from Edit");
}
View :
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<table id="jqGrid"></table>
<div id="jqGridpager"></div>
<table id="jqSubGrid"></table>
<link href="~/Content/Theme/jquery-ui.min.css" rel="stylesheet" />
<link href="~/Content/ui.jqgrid.css" rel="stylesheet" />
#section scripts{
<script src="~/Scripts/jqGrid/grid.locale-en.js"></script>
<script src="~/Scripts/jqGrid/jquery.jqGrid.js"></script>
<script>
$(function () {
$grid = $("#jqGrid").jqGrid({
url: '#Url.Action("GetData","TEST")',
mtype: 'GET',
datatype: 'json',
colModel: [
{ label: 'Hierarchy1', name: 'Hierarchy1' },
{ label: 'Hierarchy2', name: 'Hierarchy2' },
{ label: 'Hierarchy3', name: 'Hierarchy3' },
],
loadonce: true,
pager: '#jqGridPager',
rowNum: 10,
rowList: [10, 20, 30, 50],
viewrecords: true,
height: 250,
});
$("#jqGrid").jqGrid('navGrid', '#jqGridPager', { edit: false, add: false, del: false })
$("#jqGrid").jqGrid('setGridParam', {
onSelectRow: function (rowid, iRow, iCol, e) {
var rowData = $("#jqGrid").jqGrid("getRowData", rowid);
//alert(rowData.Key);
var data0 = { Hierarchy1: rowData.Hierarchy1, Hierarchy2: rowData.Hierarchy2, Hierarchy3: rowData.Hierarchy3 };
// var data0 = { numberId: "1", companyId: "531" };
// var roles = ["role1", "role2", "role3"];
jQuery.ajax({
type: "POST",
url: "#Url.Action("EditDescription")",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(data0),
success: function (data) {
//alert(data);
},
failure: function (errMsg) {
alert(errMsg);
}
});
$grid1 = $("#jqSubGrid").jqGrid({
url: '#Url.Action("EditDescription", "TEST")',
mtype: 'GET',
datatype: 'json',
colModel: [
{ label: 'ProductId', name: 'ProductId' },
{ label: 'Productdesc', name: 'Productdesc' },
],
loadonce: true,
pager: '#jqGridPager',
rowNum: 10,
rowList: [10, 20, 30, 50],
viewrecords: true,
height: 250,
});
}
});
});
</script>
}

How to draw line for real time flot?

Starting from here: How do I display a Json random number in a real-time Flot chart?, I managed to display a random number on a flot chart. The x axes is the current time's second. The problem I have is that now on my chart is shown only a point (current value). What I want is to display a real time line according to the values of the random number. How could I do this? I hope I made myself understood.
Here is my cod:
In C#:
if (method == "rnd")
{
//Current second
this.Page.Response.ContentType = "application/json1";
DateTime now = DateTime.Now;
int sec = now.Second;
Random rnd = new Random();
int nr = rnd.Next(1, 100); // creates a number between 1 and 99
var str = "{\"sec\":" + sec.ToString() + ",\"val\":" + nr.ToString() + "}";
var json2 = new JavaScriptSerializer().Serialize(str);
this.Page.Response.Write(json2);
}
My ASP page:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="MultiTrenduri.aspx.cs" Inherits="WebApplication2.MultiTrenduri" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.8.3.min.js"></script>
<script src="Scripts/flot/jquery.flot.min.js"></script>
<script src="Scripts/flot/jquery.flot.time.js"></script>
<script src="Scripts/flot/jquery.flot.symbol.js"></script>
<script src="Scripts/flot/hashtable.js"></script>
<script src="Scripts/flot/jquery.flot.axislabels.js"></script>
<script src="Scripts/flot/jquery.numberformatter-1.2.3.min.js"></script>
<link href="Flot/examples.css" rel="stylesheet" />
<script type="text/javascript">
var sc = [], num = [];
function test2() {
$.ajax({
type: 'POST',
url: ('ajax.aspx?meth=') + "rnd",
contentType: 'application/json2; charset=utf-8',
dataType: 'json',
async: true,
cache: false,
global: false,
timeout: 120000,
success: function (data, textStatus, jqXHR) {
var obj = jQuery.parseJSON(data);
$('#azi').html(obj.sec);
$('#nr').html(obj.val);
var sc = [], num = [];
sc.push(obj.sec);
num.push(obj.val);
data = [[[sc, num]]];
//var afis = [[[data]]];
//$('#afs').text(afis.join(" * "));
//show the data in a list in body
var items = [];
$.each(data, function (key, val1) {
items.push("<li><a href=#'" + key + "'>" + val1 + "</a></li>");
});
$( "<ul/>", {
"class": "my-new-list",
html: items.join( "" )
}).appendTo( "body" );
//START: PLOT IN TIMP REAL
$(function () {
var plot = $.plot("#placeholder", data,
{
series: {
shadowSize: 0 // Drawing is faster without shadows
},
points: { show: true },
line: { show: true },
yaxis: {
min: 0,
max: 100
},
xaxis: {
show: true
}
});
// plot.setData(data); //to reset data
// plot.draw(); //to redraw chart
});
// plot.draw();
//END: PLOT IN TIMP REAL
},
error: function (jqXHR, textStatus, errorThrown) {
window.alert(errorThrown);
}
});
}
window.setInterval(test2, 1000);
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="azi"></div>
<div id="nr"></div>
<div class="demo-container">
<div id="placeholder" class="demo-placeholder">
</div>
</div>
</div>
</form>
</body>
</html>
Maybe is someone which needs to do the same. This is how I managed to do it.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="Scripts/jquery-1.8.3.min.js"></script>
<script src="Scripts/flot/jquery.flot.min.js"></script>
<script src="Scripts/flot/jquery.flot.time.js"></script>
<script src="Scripts/flot/jquery.flot.symbol.js"></script>
<script src="Scripts/flot/hashtable.js"></script>
<script src="Scripts/flot/jquery.flot.axislabels.js"></script>
<script src="Scripts/flot/jquery.numberformatter-1.2.3.min.js"></script>
<link href="Flot/examples.css" rel="stylesheet" />
<%-- Library for TOOLTIP:--%>
<script src="Scripts/flot/jquery.flot.crosshair.js"></script>
<!-- CSS -->
<%--<style type="text/css">
#placeholder {
width: 1000px;
height: 500px;
text-align: center;
margin: 0 auto;
}
</style>--%>
<%-- <link href="Flot/examples.css" rel="stylesheet" />--%>
<%-- <script src="Scripts/jquery-1.4.1.js"></script>
<script src="Scripts/flot/jquery.flot.js"></script>--%>
<script type="text/javascript">
var sc = [], num = [];
var data = [];
var dataset;
var totalPoints = 100;
var updateInterval=30 ;
var now = new Date().getTime();
var t;
var multipleCalls, multCalls;
var input = document.getElementById('input');
var st;
/* window.onload = function f1() {
document.getElementById('updateInterval').value = 90;
}
function f2() {
// document.getElementById('up2').value = document.getElementById('up1').value
var updateInterval = document.getElementById('updateInterval').value;
// window.alert(updateInterval);
}*/
$(function () {
function test2() {
$.ajax({
type: 'GET',
url: ('ajax.aspx?meth=') + "rnd",
contentType: 'application/json2; charset=utf-8',
dataType: 'json',
//async: true,
//cache: false,
//global: false,
// timeout: 120000,
success: function (data, textStatus, jqXHR) {
var obj = jQuery.parseJSON(data);
$('#azi').html(obj.sec);
$('#nr').html(obj.val);
t = obj.val;
},
error: function (jqXHR, textStatus, errorThrown) {
window.alert(errorThrown);
}
});
}
function apel() {
test2();
$('#fn').html(t);
updateInterval = document.getElementById('updateInterval').value;
}
function GetData() {
data.shift();
data.slice(1);
while (data.length < totalPoints) {
// var y = Math.random() * 100;
var y = t;
var temp = [now += updateInterval, y];
data.push(temp);
}
}
$("#up").val(updateInterval).change(function () {
var vv = $(this).val();
if (vv && !isNaN(+vv)) {
updateInterval = +vv;
if (updateInterval < 1) {
updateInterval = 1;
} else if (updateInterval > 2000) {
updateInterval = 2000;
}
$(this).val("" + updateInterval);
}
});
var options = {
series: {
lines: {
show: true,
lineWidth: 1.2,
fill: false
}
},
xaxis: {
mode: "time",
tickSize: [2, "second"],
tickFormatter: function (v, axis) {
var date = new Date(v);
if (date.getSeconds() % 5 == 0) {
var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
var w = hours + ":" + minutes + ":" + seconds;
return w;
} else {
return "";
}
},
axisLabel: "Time",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 10
},
grid: {
hoverable: true,
clickable: true
},
yaxis: {
min: 0,
max: 100,
tickSize: 5,
tickFormatter: function (v, axis) {
if (v % 10 == 0) {
return v + "%";
} else {
return "";
}
},
axisLabel: "CPU loading",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 6
},
legend: {
labelBoxBorderColor: "#fff"
}
};
//START TOOLTIP
/* $("#placeholder").bind("plothover", function (event, pos, item) {
if ($("#enablePosition:checked").length > 0) {
var str = "(" + pos.x.toFixed(2) + ", " + pos.y.toFixed(2) + ")";
$("#hoverdata").text(str);
}
if ($("#enableTooltip:checked").length > 0) {
if (item) {
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
$("#tooltip").html(item.series.label + " of " + x + " = " + y)
.css({ top: item.pageY + 5, left: item.pageX + 5 })
.fadeIn(200);
} else {
$("#tooltip").hide();
}
}
});
$("#placeholder").bind("plotclick", function (event, pos, item) {
if (item) {
$("#clickdata").text(" - click point " + item.dataIndex + " in " + item.series.label);
plot.highlight(item.series, item.datapoint);
}
});
*/
//END TOOLTIP
st = $(document).ready(function f1() {
test2();
GetData();
dataset = [
{ label: "CPU", data: data }
];
$.plot($("#placeholder"), dataset, options);
function stop() {
//window.alert("Stop");
//multipleCalls.clearTimeout();
window.clearTimeout(updateInterval);
}
function update() {
test2();
GetData();
$.plot($("#placeholder"), dataset, options)
multipleCalls = setTimeout(update, updateInterval);
multCalls = multipleCalls;
}
update();
});
});
</script>
</head>
<body>
//Stops the graph
<button onclick="clearInterval(multipleCalls)">Stop</button>
<div id="header">
<div id="azi"></div>
<div id="nr"></div>
</div>
<div id="content">
<div class="demo-container">
<div id="placeholder" class="demo-placeholder"></div>
</div>
<p>Time between updates: <input id="up" type="text" value="" style="text-align: right; width:5em"/> milliseconds</p>
</div>
</body>
</html>

Post request in web view windows phone - using C#

I am trying to achieve the same thing, but I am getting exception when I call the InvokeScript method, Please help. I used this link (Post data with a request in a Windows Store app WebView - using C#) to code, Here is my JV
webview.NavigateToString(#"<html>
<head>
<script type='text/javascript'>
function doSomething(userIdValue, sessionIdValue)
{
document.getElementById('Username').value = userIdValue;
document.getElementById('Password').value = sessionIdValue;
document.getElementById('myForm').submit();
return 'Hello World!';
}
</script>
</head>
<body>
<form id='myForm' action='http://integr-dev-ma.test.plano/myplano/Account/Login' method='post'>
<input type='hidden' id='ext-element-18' name='Username' />
<input type='hidden' id='ext-element-24' name='Password' />
</form>
</body>
</html>");
When I call this script I get following Exception
private async void Button_Click_1(object sender, RoutedEventArgs e)
{
// this.Frame.Navigate(typeof(SettingsPage));
try
{
await webview.InvokeScriptAsync("doSomething", new string[] { "30001", "12345" });
}
catch (Exception aex)
{
string messages = "";
messages += aex.Message + "\r\n";
System.Diagnostics.Debug.WriteLine(messages);
}
I resolved above problem, there was problem in Javascript, The ID was written wrong in following code
document.getElementById('Username').value = userIdValue;
document.getElementById('Password').value = sessionIdValue;
The Username and Password should have been "ext-element-18" and "ext-element-18". Correcting javascript removed the exception. Now the basic aim of this request was to login in the webview.
My other team has developed the webpart, they have used sanchatouch framework so in the HTML code of login page there are no <form> tags so submitting this didn't work. I was not logged in, I am posting source of the login page, may be someone can help on this. When the user clicks on login button normally loginfunction is called, you can locate in code but anyhow I need to do post request to automate login
<!DOCTYPE html>
<html>
<head>
<!-- General Meta things -->
<meta charset="utf-8" />
<title>Login - myplano</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--<link href="/myplano/Content/Stylesheets/myplano.css" rel="stylesheet"/>
<link href="/myplano/Scripts/Sencha/resources/css/sencha-touch.css" rel="stylesheet"/>
-->
<link href="/myplano/Scripts/Sencha/resources/css/cupertino.css" rel="stylesheet"/>
<link href="/myplano/Content/Stylesheets/myplano.css" rel="stylesheet"/>
<!-- Apple Meta things -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="white-translucent" />
<link rel="apple-touch-icon" sizes="144x144" href="/myplano/Content/Images/App_Icons/Apple/myplano144.png">
<link rel="apple-touch-icon" sizes="57x57" href="/myplano/Content/Images/App_Icons/Apple/myplano57.png">
<link rel="apple-touch-icon" sizes="72x72" href="/myplano/Content/Images/App_Icons/Apple/myplano72.png">
<link rel="apple-touch-icon" sizes="114x114" href="/myplano/Content/Images/App_Icons/Apple/myplano114.png">
<link rel="apple-touch-startup-image" href="/myplano/Content/Images/App_Icons/Apple/apple_startup.png">
<!-- Android Meta things -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#384093">
<link rel="icon" sizes=”192×192″ href="/myplano/Content/Images/App_Icons/Android/myplano192.png">
<!-- Windows meta things -->
<!-- TODO: Icon size needs to be 310x310 -->
<meta name="application-name" content="myplano" />
<meta name="msapplication-TileColor" content="#384093" />
<meta name="msapplication-square70x70logo" content="/myplano/Content/Images/App_Icons/Windows/tiny.png" />
<meta name="msapplication-square150x150logo" content="/myplano/Content/Images/App_Icons/Windows/square.png" />
<meta name="msapplication-wide310x150logo" content="/myplano/Content/Images/App_Icons/Windows/wide.png" />
<meta name="msapplication-square310x310logo" content="/myplano/Content/Images/App_Icons/Windows/large.png" />
<meta name='msapplication-navbutton-color' content='#384093' />
<meta name='msapplication-tooltip' content='start myplano' />
<meta name="msapplication-window" content="width=800;height=1024;" />
<!--<meta name='msapplication-starturl' content='http//domain.de' />-->
<!-- This script is required for the swipe calendar-->
<!--<script type="text/javascript" src="/myplano/Scripts/myplano/momentjs/moment.js"></script>
-->
</head>
<body>
<script type="text/javascript">
var baseUrl = "/myplano/";
</script>
<script src="/myplano/Scripts/Sencha/sencha-touch-all.js"></script>
<script src="/myplano/Scripts/Sencha/src/ux/picker/DateTime.js"></script>
<script src="/myplano/Scripts/Resources/Resource-de.js"></script>
<script type="text/javascript">
Ext.Date.defaultDateFormat = "d.m.Y";
Ext.Date.defaultTimeFormat = "H:i";
Ext.Date.defaultTimeHMSFormat = "H:i:s";
Ext.Date.defaultFullDateTimeFormat = "d.m.Y H:i:s";
var localLanguage = 'en';
</script>
<script src="/myplano/Scripts/myplano/momentjs/moment.js"></script>
<script src="/myplano/Scripts/Controls/Timefield.js"></script>
<script src="/myplano/Scripts/Controls/DateTimePicker.js"></script>
<script src="/myplano/Scripts/myplano/Base.js"></script>
<script src="/myplano/Scripts/myplano/MainMenu.js"></script>
<script src="/myplano/Scripts/myplano/Views/AccountValues.js"></script>
<script src="/myplano/Scripts/myplano/Views/Profile.js"></script>
<script src="/myplano/Scripts/myplano/Views/RequestList.js"></script>
<script src="/myplano/Scripts/myplano/Views/TimeStamps.js"></script>
<script src="/myplano/Scripts/myplano/Views/Calendars/DayCalendar.js"></script>
<script src="/myplano/Scripts/myplano/Views/Calendars/MonthCalendar.js"></script>
<script src="/myplano/Scripts/myplano/Views/Calendars/WeekCalendar.js"></script>
<script src="/myplano/Scripts/myplano/Views/Calendars/GroupCalendar.js"></script>
<script src="/myplano/Scripts/myplano/Views/Calendars/Calendar_Shared.js"></script>
<script src="/myplano/Scripts/myplano/Views/Requests/FullDay.js"></script>
<script src="/myplano/Scripts/myplano/Views/Requests/RequestTypeList.js"></script>
<script src="/myplano/Scripts/myplano/Views/Requests/NewRequest.js"></script>
<script src="/myplano/Scripts/myplano/Views/ApproverList.js"></script>
<script src="/myplano/Scripts/myplano/placeholder.js"></script>
<script src="/myplano/Scripts/myplano/util/PaintMonitor.js"></script>
<script src="/myplano/Scripts/myplano/util/SizeMonitor.js"></script>
<script src="/myplano/Scripts/myplano/shared.js"></script>
<script src="/myplano/Scripts/myplano/TransponderUi.js"></script>
<div>
<script type="text/javascript">
var userTextfield = new String;
Ext.setup({
onReady: function () {
// create local user model
Ext.define('LocalUser', {
extend: 'Ext.data.Model',
config: {
fields: [
{ name: "id" },
{ name: "username", type: "string" },
{ name: "firstname", type: "string" },
{ name: "lastname", type: "string" },
{ name: "globalmessage", type: "string" },
{ name: "employeemessage", type: "string" }
],
proxy: {
type: 'localstorage',
id: 'local-user'
}
}
});
var store = Ext.create('Ext.data.Store', {
model: 'LocalUser'
});
store.load();
var storageCount = store.getAllCount();
if (storageCount > 0) {
//console.log(storageCount + " users found");
var userObject = store.getAt(storageCount - 1);
var user = userObject.get("username");
userTextfield = user;
//console.log("last logged in user was: " + userTextfield);
}
//login
var login = function () {
var label = form.down("[itemId='signInFailedLabel']");
var btn = form.down("button");
label.hide();
btn.setDisabled(true);
form.setDisabled(true);
btn.setText(plano.myplano.Resources.Get("LogingIn"));
//login
Ext.Ajax.request({
url: plano.Base.ResolveUrl('~/Account/Login'),
method: 'POST',
params: form.getValues(),
success: function (response) {
var data = Ext.decode(response.responseText);
if (data.error) {
label.setHtml(data.error);
label.show();
form.setValues({
Username: "",
Password: ""
});
btn.setText(plano.myplano.Resources.Get("LoginDescription"));
btn.setDisabled(false);
form.setDisabled(false);
}
else if (data.success) {
var firstName = "";
var lastName = "";
var globalMessage = "";
var employeeMessage = "";
//if new password needed
if (data.newPasswordNeeded)
{
location.href = plano.Base.ResolveUrl('~/Account/ResetPassword');
};
Ext.Ajax.request({
url: plano.Base.ResolveUrl("~/Home/getEmployeeName"),
success: function (result) {
var resultData = Ext.decode(result.responseText);
console.log(resultData);
console.log("Employee Name");
console.log(resultData.data['FirstName'] + " " + resultData.data['LastName']);
firstName = resultData.data['FirstName'];
lastName = resultData.data['LastName'];
//Store Username
var thisuser = form.down("textfield").getValue();
Ext.Ajax.request({
url: plano.Base.ResolveUrl("~/Home/getWelcomeText"),
success: function (result2)
{
var resultData2 = Ext.decode(result2.responseText);
console.log("WelcomeText");
console.log(resultData2['employeeMessage']);
globalMessage = resultData2['globalMessage'];
if (resultData2['employeeMessage'])
{
employeeMessage = resultData2['employeeMessage'];
}
var store = Ext.create('Ext.data.Store', {
model: "LocalUser"
});
store.load();
store.getProxy().clear();
store.data.clear();
store.add({
username: thisuser,
firstname: firstName,
lastname: lastName,
globalmessage: globalMessage,
employeemessage: employeeMessage
});
store.sync();
location.href = plano.Base.ResolveUrl('~/');
}
});
}
});
}
},
error: function (errorResponse) {
Ext.Msg.alert('Error', 'Login request failed');
}
});
};
var form = Ext.create('Ext.form.Panel', {
fullscreen: true,
id: 'loginForm',
scrollable: null,
baseCls: 'login-form',
config: {
//scrollable: false
},
layout: {
type: 'vbox',
pack: 'center',
align: 'center'
},
items: [
{
xtype: 'panel',
hideAnimation: 'fadeOut',
showAnimation: 'fadeIn',
itemId: 'myplanoLogo',
html: '<img id="logo" class="login-myplano-logo" src="/myplano/Content/Images/Vector/myplano.svg" />' //~/Content/Images/myplano 256x256.png
}, {
xtype: 'fieldset',
baseCls: 'login-form',
//title: plano.myplano.Resources.Get("LoginTitle"),
defaults: {
margin: '5px 0',
listeners: {
action: login
}
},
items: [
{
xtype: 'panel',
html: '<div class="separator-login"></div>'
},
{
xtype: "textfield",
clearIcon: false,
baseCls: 'login-form',
placeHolder: plano.myplano.Resources.Get("UserName"),
value: userTextfield,
name: "Username",
required: true
}, {
xtype: "passwordfield",
clearIcon: false,
baseCls: 'login-form',
placeHolder: plano.myplano.Resources.Get("Password"),
name: "Password",
required: true
}, {
xtype: 'button',
cls: 'login-button',
labelCls: 'x-button-label login-button-label',
text: plano.myplano.Resources.Get("LoginDescription"),
margin: '5px auto',
handler: login
}]
}, {
xtype: 'label',
itemId: 'signInFailedLabel',
hidden: true,
//hideAnimation: 'fadeOut',
//showAnimation: 'fadeIn',
style: 'color: #FF8888; text-align: center;',
margin: "6 12 6 12"
}, {
xtype: 'label',
itemId: 'vernsionInfo',
docked: 'bottom',
style: 'text-align: center; color:#FFF; font-size: 0.5em;',
margin: "0 0 5px 0",
html:
'myplano' +
' Version 1' + '.' +
'2' +
' Rev. 73666'
}, {
xtype: 'panel',
docked: 'bottom',
itemId: 'planoLogo',
//hideAnimation: 'fadeOut',
//showAnimation: 'fadeIn',
//margin: '5% 0 0 0',
html: '<img id="logo" class="login-plano-logo" src="/myplano/Content/Images/Vector/plano_logo_white.svg" />' //~/Content/Images/myplano 256x256.png
}]
});
//hide image if soft keyboard is shown
var myplanoLogo = form.down("[itemId='myplanoLogo']");
var planoLogo = form.down("[itemId='planoLogo']");
window.onresize = function () {
// If the current active element is a text input, we can assume the soft keyboard is visible.
var windowWidth = Ext.getBody().getWidth(true);
var windowHeight = Ext.getBody().getHeight(true);
if (windowWidth < windowHeight)
{
//keyboard is shown
console.log("keyboard on");
myplanoLogo.show();
planoLogo.show();
} else {
//keyboard is hidden
console.log("keyboard off");
myplanoLogo.hide();
planoLogo.hide();
}
}
}
});
</script>
</div>
<script src="/myplano/Scripts/jquery-2.1.1.js"></script>
</body>
</html>
<script>
//back button disabled
document.addEventListener("backbutton", Ext.bind(onBackKeyDown, this), false);
function onBackKeyDown(eve)
{
eve.preventDefault();
//do something
alert('back button pressed');
}
//this script checks if user is idling
var timeoutInMinutes = "20";
//console.log("timeout in " + timeoutInMinutes + " minutes.")
var IDLE_TIMEOUT = timeoutInMinutes*60; //seconds
var _idleSecondsCounter = 0;
var deviceType = "";
document.onclick = function () {
_idleSecondsCounter = 0;
};
//document.onmousemove = function () {
// _idleSecondsCounter = 0;
//};
document.onkeypress = function () {
_idleSecondsCounter = 0;
};
window.setInterval(CheckIdleTime, 1000);
function CheckIdleTime()
{
// create local user model
Ext.define('LocalUser', {
extend: 'Ext.data.Model',
config: {
fields: [
{ name: "id" },
{ name: "username", type: "string" },
{ name: "firstname", type: "string" },
{ name: "lastname", type: "string" },
{ name: "globalmessage", type: "string" },
{ name: "employeemessage", type: "string" },
{ name: "devicetype", type: "string" }
],
proxy: {
type: 'localstorage',
id: 'local-user'
}
}
});
var store = Ext.create('Ext.data.Store', {
model: 'LocalUser'
});
store.load();
var storageCount = store.getAllCount();
if (storageCount > 0)
{
//console.log(storageCount + " users found");
var userObject = store.getAt(storageCount - 1);
deviceType = userObject.get("devicetype");
//console.log("device type found by shared: " + deviceType);
}
_idleSecondsCounter++;
var oPanel = document.getElementById("SecondsUntilExpire");
if (oPanel)
oPanel.innerHTML = (IDLE_TIMEOUT - _idleSecondsCounter) + "";
if (_idleSecondsCounter >= IDLE_TIMEOUT)
{
if (deviceType == "terminal")
{
location.href = plano.Base.ResolveUrl('~/Account/TerminalLogout');
} else
{
location.href = plano.Base.ResolveUrl('~/Account/Logout');
}
}
}
</script>

Not all points are appearing

I did this code
I want to display a list of float(points in the map)
But only the first point appears the others didn't. The path between the points is hidden also and I don't know why.
#model IList
#{ Layout = "~/Views/Shared/_Lay2.cshtml";}
var culture = System.Globalization.CultureInfo.GetCultureInfo("en-US");}
#for (int marker=2;marker<#Model.Count; marker++)
{
<script type="text/javascript">
alert(#marker);
var myOptions = {zoom: 30, center: myLatLng, mapTypeId: google.maps.MapTypeId.TERRAIN };
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var flightPlanCoordinates = [
new google.maps.LatLng(#Model[marker].ToString(culture), #Model[marker + 1].ToString(culture)),];
var flightmarker = new google.maps.Marker({
position: new google.maps.LatLng(#Model[marker].ToString(culture), #Model[marker + 1].ToString(culture)),
map: map,
title: " denden" });var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
</script>
marker++;
}
Any Suggestions?
Looks like you're recreating your map with each iteration of your loop. Maybe try something like this:
#model IList<float>
#{ Layout = "~/Views/Shared/_Lay2.cshtml";
var culture = System.Globalization.CultureInfo.GetCultureInfo("en-US");}
<body onload="initialize(#Model[0].ToString(culture), #Model[1].ToString(culture))">
<table style="width: 100%; height: 70%"> <tr>
<td style="width: 100%"><div id="map_canvas" style="width: 100%; height: 500px;"></div></td>
<script type="text/javascript">
var myOptions = {zoom: 30,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN };
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
#for (int marker=2;marker<#Model.Count; marker += 2) {
var flightPlanCoordinates = [
new google.maps.LatLng(#Model[marker].ToString(culture), #Model[marker + 1].ToString(culture)),];
var flightmarker = new google.maps.Marker({
position: new google.maps.LatLng(#Model[marker].ToString(culture), #Model[marker + 1].ToString(culture)),
map: map,
title: " denden" });var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
</script>
</tr>
</table>
<script src="#Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

Categories

Resources