Partial view does not return any data

Partial view does not return any data - c#

It's my first practice at getting data from a partial view but I don't know what's going wrong in my code. I cant get any data.
In my main view folder I created a partial view named Fault_statPartial and in my main view I call it like below:
<div>
#{ Html.RenderPartial("Fault_statPartial"); }
</div>
and in my partial view I have a button and when I click on it, it's supposed to return data. Here is the partial view code:
#model string
<html>
<head>
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
</head>
<body>
<script src="#Url.Content("~/Scripts/KndoTst/jquery.min.js")"></script>
<script src="#Url.Content("~/Scripts/KndoTst/kendo.all.min.js")"></script>
<script src="#Url.Content("~/Scripts/KndoTst/jquery.maskedinput.js")"></script>
#section Scripts{
<script src="#Url.Content("~/Scripts/KndoTst/jquery.min.js")"></script>
<script src="#Url.Content("~/Scripts/KndoTst/kendo.all.min.js")"></script>
<script src="#Url.Content("~/Scripts/KndoTst/jquery.maskedinput.js")"></script>
<button type="button" class="buttonForMonthlydailyYearly" id="faultstat" >FaultStat</button>
<script type="text/javascript">
var turbineName = [];
var finalResultYear = [];
var data = [];
var data_wind = [];
var finalResultWind = [];
//DropDownList
var drp = "s";
var topTenResultOfMonth = null;
var topTenResultOfYear = null;
var topTenResultOfDay = null;
var selcted;
var tmp;
var tmpString;
$("#faultstat").click(function (e) {
debugger;
tmp = $("#multiselect").val();
tmpString = tmp.toString();
$.ajax({
dataType: "json",
type: "POST",
url: "#Url.Action("faultStatstics","Ranking")",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({ "id": tmpString }),
success: function (result) {
debugger;
var productionResult = result.sumOfDay[0].m_energy_prod;
var productionMonthresult = result.sumOfMonth;
var productionofYear = result.sumofyear;
// debugger;
$("#production").empty();
$("#production").append(productionResult);
$("#monthProduction").empty();
$("#monthProduction").append(productionMonthresult);
$("#yearProduction").empty();
$("#yearProduction").append(productionofYear);
}
});
});
</script>
}
</body>
</html>

Related

How to call c# function in cshtml(razor page) from inside js function

How to call c# function in cshtml(razor page) from inside js function
this is cshtml code
#model TreeWithUnity.Pages.Tree.TreeExampleModel
<form method="post">
<input type="checkbox"
onclick="requestMyAction('#Model.tree_List[0].board_id', this.checked,
'loader-#Model.tree_List[0].dataName',#Model.tree_List[0]);" />
<div class="loader" style="display: none;" id="loader-#Model.tree_List[0].dataName">#Model.tree_List[0]
</div>
</form>
#section scripts{
<script type="text/javascript">
function requestMyAction(itemId, isChecked, loaderId,tn)
{
document.getElementById(loaderId).style.display = "inline-block";
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
document.getElementById(loaderId).style.display = "none";
if (this.status === 200) {
document.getElementById(loaderId).style.display = "none";
}
}
};
var url = '#Url.Page("./TreeExample", "MyAction")';
xhr.open('POST', url);
xhr.setRequestHeader('RequestVerificationToken', '#Xsrf.GetAndStoreTokens(Model.HttpContext).RequestToken');
var data = new FormData();
data.append('itemName', itemId);
data.append('deploy', isChecked);
xhr.send(data);
#UpdateRecursiveData(tn)
}
}
</script>
}
#{
void UpdateRecursiveData(TreeWithUnity.Model.TreeNode tn)
{
if(tn.deployment)
{
<input type="checkbox"
onclick="requestMyAction('#tn.board_id', this.checked, 'loader-#tn.dataName');" />
<div class="loader" style="display: none;" id="loader-#tn.dataName">#tn.dataName</div>
<br />
for (int i = 0; i < tn.subTreeNodes.Count; i++)
RecursiveData(tn.subTreeNodes[i]);
}
}
}
#UpdateRecursiveData(tn) is not work
is it able to work in js c#func ?
I don't know how to implement this
UpdateRecursiveData should be executed later than MyAction of Tree Example. Is this possible?
how to call UpdateRecursiveData
public async Task<IActionResult> OnPostMyAction(string itemName,bool deploy)
{
if (TempData["TreeData"] != null)
tree_List = TempData.Get<List<TreeNode>>("TreeData");
TreeNode upTree=null;
foreach (var item in tree_List)
{
if (item.board_id == itemName)
{
upTree = item;
item.deployment = deploy;
}
}
if (deploy&&upTree.loadOn==false)
{
if(upTree!=null)
upTree.deployment = true;
IQueryable<tbl_tree> iqueryTree;
iqueryTree = _context.tbl_tree.Where(x => x.upcode == itemName);
var datas =await iqueryTree.ToListAsync();
for (int i = 0; i < datas.Count; i++)
{
TreeNode treeNode = new TreeNode(datas[i].name);
treeNode.board_id = datas[i].icd11;
tree_List.Add(treeNode);
}
TempData.Set("TreeData", tree_List);
}
return new OkResult();
}

Firstly,you cannot pass a js variable to c# function,you can try to use ajax to call c# handler,and handler returns html code,then put the html code to somewhere of the view.Here is a demo:
<form method="post">
</form>
<div id="data"></div>
#section scripts{
<script type="text/javascript">
$(function () {
$.ajax({
type: "POST",
url: '?handler=UpdateRecursiveData',
headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
data: {id:1},
success: function (data) {
document.getElementById("data").innerHTML = data;
},
error: function (result) {
alert("fail");
}
})
})
</script>
}
handler:
public JsonResult OnPostUpdateRecursiveData(int id)
{
return new JsonResult("<div>id="+id+"</div>");
}
result:

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>

Request.Files always 0

<body>
<form id="form1" runat="server" enctype="multipart/form-data">
<table id="tblAttachment"> </table>
<input id="btnSubmit" type="button" value="button" />
</form>
</body>
Dynamically inserting a FileUpload Control
<script>
$(document).ready(function () {
var MaxAttachment = 1;
$("#tblAttachment").append('<tr><td><input id=\"Attachment_' + MaxAttachment.toString() + '\" name=\"file\" type=\"file\" /><br><a class=\"MoreAttachment\">Additional Attachment</a></td></tr>');
$("#btnSubmit").on("click", UploadFile);
});
</script>
Sending Data to .ashx using Jquery
function UploadFile() {
var kdata = new FormData();
var i = 0;
//run through each row
$('#tblAttachment tr').each(function (i, row) {
var row = $(row);
var File = row.find('input[name*="file"]');
alert(File.val());
kdata.append('file-' + i.toString(), File);
i = i + 1;
});
sendFile("fUpload.ashx", kdata, function (datad) {
}, function () { alert("Error in Uploading File"); }, true);
}
On .ashx Count always Zero ??
public class fUpload : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
int k = context.Request.Files.Count;
context.Response.Write(UploadMultipleFiles());
}
Ajax Request
function sendFile(requestUrl, dataPayload, successfunc, errorfunc, synchronousMode) {
$.ajax({
url: requestUrl,
type: "POST",
dataType: "json",
contentType: false,
processData: false,
cache: false,
async: synchronousMode,
data: dataPayload,
success: successfunc,
error: errorfunc
});
}
Please Check .. where i m doing wrong
form tag having enctype="multipart/form-data" and each fileUPload control have uniue id and name attribute too
Thanks

You're sending a jQuery object, not a file ?
Shortened down, you're basically doing this
var kdata = new FormData();
var File = row.find('input[name*="file"]'); // jQuery object
kdata.append('file-0', File);
You need the files, not the jQuery objects
var kdata = new FormData();
var File = row.find('input[name*="file"]'); // jQuery object
var files = File.get(0).files[0]; // it not multiple
kdata.append('file-0', Files);

How to add auto complete json for dynamically generated textboxes in asp.net

I am trying to generate dynamic html textboxes in my aspx page and on these textboxes i want to add the value using autocomplete facility. I try my best to do so. I try almost every single question's answer of stackoverflow. But nothing is working here my script which generate new textbox dynmacally
<script type="text/javascript">
$(document).ready(function () {
var counter = 2;
$("#addButton").click(function () {
if (counter > 5) {
alert("Limit Exceeds");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
// newTextBoxDiv.after().html('<label>Textbox #' + counter + ' : </label>' +
// '<input type="text" name="textbox' + counter +
// '" id="textbox' + counter + '" value="" class="auto">');
newTextBoxDiv.after().html('<div class="fields-left"><label> Leaving from</label><input type="text" name="textbox' + counter + '" id="textbox' + counter + '" class="auto"/> </div><div class="fields-right"> <label> Going to</label> <input type="text" name="textbox' + counter + '" id="textbox' + counter+1 + '" class="auto"/> </div>');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeButton").click(function () {
if (counter == 1) {
alert("No more textbox to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
});
</script>
Html code
<div id="TextBoxDiv1" class="fields" >
<div id="TextBoxesGroup">
</div>
</div>
<input type='button' value='Add Button' id='addButton'/>
<input type='button' value='Remove Button' id='removeButton'/>
</div>
and I am trying this json code for fetching data for very first textbox that generate automatically. First I think for write this script for everytextbox which generate dynamically but this process will be so lengthy and wrong way to do this thing. But this is not working for me
<script type="text/javascript">
$(document).ready(function () {
SearchText2();
});
function SearchText2() {
$("#textbox2").autocomplete({
source: function (request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Home.aspx/GetAutoCompleteData",
data: "{'code':'" + document.getElementById('textbox2').value + "'}",
dataType: "json",
success: function (data) {
response(data.d);
},
error: function (result) {
alert("Error");
}
});
}
});
}
</script>
Please experts tell me why this json is working for me
Thanks

Please use following code
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="Web.Home" %>
<!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 id="Head1" runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var counter = 2;
$(document).ready(function () {
$("#addButton").click(function () {
if (counter > 5) {
alert("Limit Exceeds");
return false;
}
var $wrap = $('#TextBoxesGroup');
var dynamichtml = '<div class="fields-left" id="divleft_' + counter + '"><label> Leaving from</label><input type="text" name="textbox' + counter + '" id="textbox' + counter + '" class="auto"/> </div><div class="fields-right" id="divright_' + counter + '"> <label> Going to</label> <input type="text" name="textbox' + counter + '" id="textbox' + counter + 1 + '" class="auto"/> </div>';
$wrap.append(dynamichtml);
counter++;
});
$("#removeButton").click(function () {
if (counter == 1) {
alert("No more textbox to remove");
return false;
}
counter--;
$("#TextBoxesGroup").find("#divleft_" + counter).remove();
$("#TextBoxesGroup").find("#divright_" + counter).remove();
});
$(".auto").live("focus", function () {
$(this).autocomplete({
minLength: 2,
source: function (request, response) {
var textval = request.term; // $(this).val();
$.ajax({
url: "Home.aspx/GetAutoCompleteData", type: "POST", dataType: "json",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({ code: textval }),
success: function (data) {
response(data.d);
},
error: function (result) {
alert("Error");
}
});
}, select: function (event, ui) {
return false;
}
});
});
});
</script>
<style type="text/css">
.ui-menu { width: 150px; }
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="TextBoxDiv1" class="fields" >
<div id="TextBoxesGroup">
</div>
</div>
<input type='button' value='Add Button' id='addButton'/>
<input type='button' value='Remove Button' id='removeButton'/>
</div>
</form>
</body>
</html>
In .cs file
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
namespace Web
{
public partial class Home : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
}
}
[WebMethod]
public static List<string> GetAutoCompleteData(string code)
{
List<string> list = new List<string>();
list.Add("delhi");
list.Add("noida");
list.Add("gurgaon");
return list.Where(i => i.StartsWith(code)).ToList();
}
}
}
Please add js file as below

I would suggest you to use global variable say data to store the json response retirned for autocomplete.
and then use the same data to bind autocomplete after appending the contents.
$('#newTextBoxDiv input').autocomplete(data);

Develop Reference

C# (C-Sharp) is a programming language developed by Microsoft that runs on the .NET Framework.

Partial view does not return any data - c#

Related

How to call c# function in cshtml(razor page) from inside js function

How to draw line for real time flot?

Post request in web view windows phone - using C#

Request.Files always 0

How to add auto complete json for dynamically generated textboxes in asp.net

Categories

Resources