How can I bind data to YUI Treeview control http://developer.yahoo.com/yui/examples/treeview/default_tree.html
here is sample JavaScript code that have been used in the above URL
<div id="treeDiv1">
</div>
<script type="text/javascript">
var tree;
(function() {
function treeInit() {
buildRandomTextNodeTree();
}
function buildRandomTextNodeTree() {
tree = new YAHOO.widget.TreeView("treeDiv1");
for (var i = 0; i < 5; i++) {
var tmpNode = new YAHOO.widget.TextNode("label-" + i, tree.getRoot(), false);
buildLargeBranch(tmpNode);
}
tree.draw();
}
function buildLargeBranch(node) {
if (node.depth < 8) {
YAHOO.log("buildRandomTextBranch: " + node.index, "info", "example");
for (var i = 0; i < 8; i++) {
new YAHOO.widget.TextNode(node.label + "-" + i, node, false);
}
}
}
YAHOO.util.Event.onDOMReady(treeInit);
})();
</script>
The problem is, YUI treeview control is binded in javascript, but I want to bind in C# code, because I need to get data from Database, here is how I am binding data to asp.net treeview control
if (dsSalesRepresent.Tables[0].Rows.Count > 0)
{
dsSalesRepresent.Relations.Add("Children", dsSalesRepresent.Tables[0].Columns["NodeId"], dsSalesRepresent.Tables[0].Columns["ParentId"]);
trvSalesRepresent.Nodes.Clear();
foreach (DataRow masterRow in dsSalesRepresent.Tables[0].Rows)
{
if (masterRow["ParentId"].ToString() == "")
{
TreeNode masterNode = new TreeNode((String)masterRow["JobTitle"], Convert.ToString(masterRow["NodeId"]));
trvSalesRepresent.Nodes.Add(masterNode);
TreeNode FirstchildNode = new TreeNode((String)masterRow["UserName"], Convert.ToString(masterRow["ParentId"]));
masterNode.ChildNodes.Add(FirstchildNode);
foreach (DataRow childRow in masterRow.GetChildRows("Children"))
{
TreeNode childNode = new TreeNode((String)childRow["UserName"], Convert.ToString(childRow["ParentId"]));
masterNode.ChildNodes.Add(childNode);
}
}
}
trvSalesRepresent.ExpandAll();
}
All of my comments are assuming you mean WebForms and not MVC.
The YUI framework is purely client side. It is intended to be able to used with any website regardless of the server platform. The ASP.NET tree view is used only with ASP.Net and so doesn't have that limitation. It is a server control and so it actually emits everything the client needs even though it looks like you are binding directly to it.
A couple of options, but there's lots:
Use an AJAX/JSON to call back to your website to get the data in JSON format which you can then handle client side.
Just the way that you're asking this question makes me think that you aren't that familiar with "real" AJAX, so that's why I've got the next option:
Emit the Java YUI code directly from your code behind. Javascript is just more text that the server sends to the client and you can dynamically emit it just like any other part of your client script. ScriptManager can help here as far as getting it to the right spot on the page, but you could theoretically do it with just a place holder or literal control. Alternately, you could put most of the code in the markup and use <% %> to replace the parts that need to come from the server side. Either way, you need to write all the code to render your tree, then figure out the "Replaceable" bits and supply them from the server side code. BUT make sure that none of the info coming back is data that was entered by an end user otherwise you could end up with a Cross Site Scripting vulnerability.
Related
I am using HTMLElementCollection, HtmlElement to iterate through a website and using Get/Set attributes of a website HTML and returning it to a ListView. Is it possible to get values from website a and website b to return it to the ListView?
HtmlElementCollection oCol1 = oDoc.Body.GetElementsByTagName("input");
foreach (HtmlElement oElement in oCol1)
{
if (oElement.GetAttribute("id").ToString() == "search")
{
oElement.SetAttribute("value", m_sPartNbr);
}
if (oElement.GetAttribute("id").ToString() == "submit")
{
oElement.InvokeMember("click");
}
}
HtmlElementCollection oCol1 = oDoc.Body.GetElementsByTagName("tr");
foreach (HtmlElement oElement1 in oCol1)
{
if (oElement1.GetAttribute("data-mpn").ToString() == m_sPartNbr.ToUpper())
{
HtmlElementCollection oCol2 = oElement1.GetElementsByTagName("td");
foreach (HtmlElement oElement2 in oCol2)
{
if (oElement2 != null)
{
if (oElement2.InnerText != null)
{
if (oElement2.InnerText.StartsWith("$"))
{
string sPrice = oElement2.InnerText.Replace("$", "").Trim();
double dblPrice = double.Parse(sPrice);
if (dblPrice > 0)
m_dblPrices.Add(dblPrice);
}
}
}
}
}
}
As one of the comments mentioned the better approach would be to use HttpWebRequest to send a get request to www.bestbuy.com or whatever site. What it returns is the full HTML code (what you see) which you can then parse through. This kind of approach keeps you from seinding too many requests and getting blacklisted. If you need to click a button or type in a text field its best to mimic human input to avoid being blacklisted also. I would suggest injecting a simple javascript into the page header or body and execute it from the app to send a 'onClick' event from the button (which would then reply with a new page to parse or display) or to modify the text property of something.
this example is in c++/cx but it originally came from a c# example. the script sets the username and password text fields then clicks the login button:
String^ script = "document.GetElementById('username-text').value='myUserName';document.getElementById('password-txt').value='myPassword';document.getElementById('btn-go').click();";
auto args = ref new Platform::Collections::Vector<Platform::String^>();
args->Append(script);
create_task(wv->InvokeScriptAsync("eval", args)).then([this](Platform::String^ response){
//LOGIN COMPLETE
});
//notes: wv = webview
EDIT:
as pointed out the absolute best approach would be to get/request an api. I was surprised to see that site mason pointed out for bestbuy developers. Personally I have only tried to work with auto part stores who either laugh while saying I can't afford it or have no idea what I'm asking for and hang up (when calling corporate).
EDIT 2: in my code the site used was autozone. I had to use chrome developer tools (f12) to get the names of the username, password, and button name. From the developer tools you can also watch what is sent from your computer to the site/server. This allows you to recreate everything and mimic javascript input and actions using post/get with HttpWebRequest.
I've done quite a bit of searching (several hours actually) but I haven't been able to get this working. Basically, I have this button:
<asp:Button runat="server" Text="Go!" id="go" onClick="getDoc()" />
and this block of script:
<script type="c#" runat="server">
public void getDoc(object sender, EventArgs e) {
// Test to see if function was running (it's not...)
DocFrame.Attributes["src"] = "http://www.google.com";
// Get the current state of the dropdowns
String dropYear = (String)Year.SelectedValue;
String dropDiv = (String)Division.SelectedValue;
String dropControl = (String)Control.SelectedValue;
String dropQuart= (String)Quarter.SelectedValue;
// Get the Site where the list is
using (SPSite siteCol = new SPSite("http://portal/Corporate/IT/")) {
using (SPWeb web = siteCol.RootWeb){
// Get the list items we need
SPListItemCollection items = list.GetItems("Year", "Division", "Control", "Quarter");
SPListItem item = null;
// Loop through them until we find a matching everything
foreach (SPListItem it in items){
if(it.Year == dropYear && it.Division == dropDiv && it.Control == dropControl && it.Quarter == dropQuart){
item = it;
break;
}
}
// Assign the item as a string
String URL = (String)item["Title"];
// Set the iframe to the new URL
DocFrame.Attributes["src"] = URL;
}
}
}
It's all in the page where this is happening, please keep in mind that I've been using sharepoint for less than a week and have only ever coded in C++, so I could be doing everything horribly wrong. Anyway, it seems that getDoc() is never even getting called, so can anyone point out what I'm doing wrong?
Instead of
onClick="getDoc()"
you should do
OnClick="getDoc"
That's the proper way to wire an up an event.
By the way, you should consider following C# Naming Guidelines. If you were using better naming, it might look like this:
<asp:Button runat="server" Text="Go!" id="GoBtn" onClick="GoBtn_Click" />
Common practice convention is to append the event name after the ID of the control. It's not required, but it looks cleaner and other developers like to see that when they look at your code.
Also, DocFrame.Attributes["src"] = "http://www.google.com"; is not a good way to see if the function is running. It doesn't update the page in realtime, as the entire server side function executes, then the results are sent to the client. Instead, use your IDE's debugging tools to hook up to the server and set code breaks etc. Or what I do is have the code send me an email, I created a little utility library for that.
I am using Google Navigation charts in a project.
Everything works fine when I run the javascript code in the client side (.aspx page), but when I put it in the code behind and echo/write it out (via Response.Write()) it throws an error, specifically at the point where the javascript code trys to call the indexOf() method on an array.
I have tried to examine the cause of the error, but the only info I get is that this is a problem in IE8 and earlier with the indexOf() method- this cannot be my problem, because as I said it works fine when I call it directly from the client - it is only giving a problem form the code-behind.
This is the specific error I receive:
0x800a01b6 - Microsoft JScript runtime error: Object doesn't support property or method 'indexOf'
This will work fine (in client):
for (var i = 0; i < data.getNumberOfColumns() ; i++) {
if (i == 0 || defaultSeries.indexOf(i) > -1) {
// if the column is the domain column or in the default list, display the series
columns.push(i);
}
....
but this will throw an error (in code-behind):
htmlJS += "for (var i = 0; i < data.getNumberOfColumns() ; i++) {";
htmlJS += "if (i == 0 || defaultSeries.indexOf(i) > -1) {";
// if the column is the domain column or in the default li";st, display the series
htmlJS += "columns.push(i);";
htmlJS += "}";
....
Response.Write(htmlJS);
Does anyone know why this error only occurs from the code-behind?
Assuming defaultSeries is an array, you will need to polyfill Array.prototype.indexOf for IE<9, which only supports indexOf on strings.
Here's a polyfill from MDN:
if (!Array.prototype.indexOf) {
Array.prototype.indexOf = function (searchElement, fromIndex) {
if ( this === undefined || this === null ) {
throw new TypeError( '"this" is null or not defined' );
}
var length = this.length >>> 0; // Hack to convert object.length to a UInt32
fromIndex = +fromIndex || 0;
if (Math.abs(fromIndex) === Infinity) {
fromIndex = 0;
}
if (fromIndex < 0) {
fromIndex += length;
if (fromIndex < 0) {
fromIndex = 0;
}
}
for (;fromIndex < length; fromIndex++) {
if (this[fromIndex] === searchElement) {
return fromIndex;
}
}
return -1;
};
}
Two things:
Based on your code, you might have a white-space issue with the javascript - you are concatenating the string, and so, for example, you will have a section that looks like "{if" - however, this is not likely causing your issue.
What IS likely causing your issue is the timing of the javascript hitting the page. Does the object EXIST when the response.write gets flushed to the client? In order to make sure that all the required bits of the page exist when you need them, you normally will want to use the scripting object methods to add the script, and then CALL the code on once the page is loaded. Check out this page on adding script dynamically to a page: http://msdn.microsoft.com/en-us/library/ms178207(v=vs.100).aspx
Thank you everyone - I have found a soltuion that works:
If I create the same string which contains the javascript indexOf() method and then either assign it as output to a literal element on the aspx page, or if I "echo" it out via the <% %> special tags then the javascript code will run fine.
So the following runs:
Code-Behind:
public string jsHtml ="";
jsHtml +="<script type='text/javascript'>";
jsHtml+="var defaultSeries = [1,2,3];";
jsHtml+="alert(defaultSeries.indexOf(2));";
jsHtml+="</script>";
txtValueA.Text = jsHtml;
Client/aspx page:
<asp:Literal ID="txtValueA" runat="server></asp:Literal>
//OR
<%=jsHtml %>
Strange but True..... thanks for the input
This question already has answers here:
Calling JavaScript Function From CodeBehind
(21 answers)
Closed 9 years ago.
I am trying to learn asp.net. Assuming that I have this code:
if (command.ExecuteNonQuery() == 0)
{
// JavaScript like alert("true");
}
else
{
// JavaScript like alert("false");
}
How to I can invoke JavaScript from C# code behind? How to do that by putting that JavaScript in Scripts directory which is created by default in MS Visual Studio?
Here is method I will use from time to time to send a pop message from the code behind. I try to avoid having to do this - but sometimes I need to.
private void LoadClientScriptMessage(string message)
{
StringBuilder script = new StringBuilder();
script.Append(#"<script language='javascript'>");
script.Append(#"alert('" + message + "');");
script.Append(#"</script>");
Page.ClientScript.RegisterStartupScript(this.GetType(), "messageScript", script.ToString());
}
You can use RegisterStartupScript to load a javascript function from CodeBehind.
Please note that javascript will only run at client side when the page is render at client's browser.
Regular Page
Page.ClientScript.RegisterStartupScript(this.GetType(), "myfunc" + UniqueID,
"myJavascriptFunction();", true);
Ajax Page
You need to use ScriptManager if you use ajax.
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myfunc" + UniqueID,
"myJavascriptFunction();", true);
Usually these "startupscripts" are handy for translations or passing settings to javascript.
Although the solution Mike provided is correct on the .Net side I doubt in a clean (read: no spaghetti code) production environment this is a good practice. It would be better to add .Net variables to a javascript object like so:
// GA example
public static string GetAnalyticsSettingsScript()
{
var settings = new StringBuilder();
var logged = ProjectContext.CurrentUser != null ? "Logged" : "Not Logged";
var account = Configuration.Configuration.GoogleAnalyticsAccount;
// check the required objects since it might not yet exist
settings.AppendLine("Project = window.Project || {};");
settings.AppendLine("Project.analytics = Project.analytics || {};");
settings.AppendLine("Project.analytics.settings = Project.analytics.settings || {};");
settings.AppendFormat("Project.analytics.settings.account = '{0}';", account);
settings.AppendLine();
settings.AppendFormat("Project.analytics.settings.logged = '{0}';", logged);
settings.AppendLine();
return settings.ToString();
}
And then use the common Page.ClientScript.RegisterStartupScript to add it to the HTML.
private void RegisterAnalyticsSettingsScript()
{
string script = GoogleAnalyticsConfiguration.GetAnalyticsSettingsScript();
if (!string.IsNullOrEmpty(script))
{
Page.ClientScript.RegisterStartupScript(GetType(), "AnalyticsSettings", script, true);
}
}
On the JavaScript side it might look like this:
// IIFE
(function($){
// 1. CONFIGURATION
var cfg = {
trackingSetup: {
account: "UA-xxx-1",
allowLinker: true,
domainName: "auto",
siteSpeedSampleRate: 100,
pluginUrl: "//www.google-analytics.com/plugins/ga/inpage_linkid.js"
},
customVariablesSetup: {
usertype: {
slot: 1,
property: "User_type",
value: "Not Logged",
scope: 1
}
}
};
// 2. DOM PROJECT OBJECT
window.Project = window.Project || {};
window.Project.analytics = {
init: function(){
// loading ga.js here with ajax
},
activate: function(){
var proj = this,
account = proj.settings.account || cfg.trackingSetup.account,
logged = proj.settings.logged || cfg.customVariablesSetup.usertype.value;
// override the cfg with settings from .net
cfg.trackingSetup.account = account;
cfg.customVariablesSetup.usertype.value = logged;
// binding events, and more ...
}
};
// 3. INITIALIZE ON LOAD
Project.analytics.init();
// 4. ACTIVATE ONCE THE DOM IS READY
$(function () {
Project.analytics.activate();
});
}(jQuery));
The advantage with this setup is you can load an asynchronous object and override the settings of this object by .Net. Using a configuration object you directly inject javascript into the object and override it when found.
This approach allows me to easily get translation strings, settings, and so on ...
It requires a little bit knowledge of both.
Please note the real power of tis approach lies in the "direct initialization" and "delayed activation". This is necessary as you might not know when (during loading of the page) these object are live. The delay helps overriding the proper objects.
This might be a long shot, but sometimes I need a c# property/value from the server side displaying or manipulated on the client side.
c# code behind page
public string Name {get; set;}
JavaScript on Aspx page
var name = '<%=Name%>';
Populating to client side is generally easier, depending on your issue. Just a thought!
I am trying to build a dropdown as below.
I am generating html ul & li tags as below and works fine. However, everytime there is an anch tag (see the in-line comment); I need to be able to call a function and pass a text that was clicked. How can I do this?
foreach (var productType in productTypesNames.Keys)
{
var li = new HtmlGenericControl("li");
nav.Controls.Add(li);
var ul = new HtmlGenericControl("ul");
var anchor = new HtmlGenericControl("a");
anchor.Attributes.Add("href", "#");
foreach (var pName in productTypesNames[productType] )
{
var subLi = new HtmlGenericControl("li");
var anch = new HtmlGenericControl("a");
anch.Attributes.Add("href", "#");
//**THIS NEEDS TO CALL A C# FUNCTION AND PASS pName; instead of #**
anch.InnerHtml = pName;
subLi.Controls.Add(anch);
ul.Controls.Add(subLi);
}
anchor.InnerHtml = productType;
li.Controls.Add(anchor);
li.Controls.Add(ul);
}
If you don't mind a postback, or want it, use a LinkButton control, easily built dynamically instead of your HtmlGenericControl("a"), and have the server-side onclick method call your other method.
Otherwise you need AJAX as others have explained.
Have your href execute a JS function and that can call the server via AJAX. You can had code your own, or use jQuery or [WebMethod]s with ASP.NET Ajax.
The idea is that you can execute a server-side method by calling the server via Ajax.
Also, look at the way JSONP works - maybe you can "ping" another page with URL parameters of your choosing to do a one-way async call.