How to render a WebUserControl client-side - javascript

I created a web user control which has some ASP.NET and third-party controls.
I've already tested my control in the markup of a page and it works well.
<APP:MyControl ID="myControl1" InitializeWithValue="Employee" />
<APP:MyControl ID="myControl2" InitializeWithValue="Supplier" />
Now, I want to render this control in the same page but not when the page renders at the first time. In fact, I will click a button which will call a callback and in that moment I want to render the control.
I was trying to do something like this.
void ICallbackEventHandler.RaiseCallbackEvent(string eventArgument)
{
MyControl c1 = new MyControl();
c1.InitializeWithValue = Person.Enum.Employee; //<--CRASH
System.Text.StringBuilder sb = new System.Text.StringBuilder();
System.IO.StringWriter sw = new System.IO.StringWriter(sb);
HtmlTextWriter hw = new HtmlTextWriter(sw);
c1.RenderControl(hw);
return sb.ToString();
}
Then on my client-side receiver
Test
<div id="divControls"></div>
<script>
function receiver(arguments, context) {
document.getElementById('divControls').innerHTML = arguments;
}
</script>
But it crash at the moment of the initialization because all the inner controls of the WebUserControl are null. They have not been initialized.
This is the property of the control
[Browsable(true)]
public Person.Enum InitializeWithValue
{
get { return this.enumPersonValue; }
set
{
this.enumPersonValue = value;
//Literal control
this.litPersonType.Text = "Employee"; //<-- CRASH because litPersonType is null.
}
}
Some can help me to correct this or suggest me another way render a web control but client-side?

UserControls usually are tighted to the Page Life Cycle, so you would need to recreate a whole page and render it instead.
Second, you should load your usercontrol using its .ascx file and not only its class, this is required because only your class is not enough.
You can still try to do like you was doing only creating but using Page.LoadControl:
void ICallbackEventHandler.RaiseCallbackEvent(string eventArgument)
{
MyControl c1 = (MyControl)page.LoadControl("/Controls/myControl.ascx");
c1.InitializeWithValue = Person.Enum.Employee; //<--CRASH
System.Text.StringBuilder sb = new System.Text.StringBuilder();
System.IO.StringWriter sw = new System.IO.StringWriter(sb);
HtmlTextWriter hw = new HtmlTextWriter(sw);
c1.RenderControl(hw);
return sb.ToString();
}
But if your control has Events related to the Page Life Cycle you might need to create a whole context to it:
You can do it all like this:
using (var stringWriter = new StringWriter())
{
using (var page = new Page())
{
MyControl myControl = (MyControl)page.LoadControl("/Controls/myControl.ascx");
var head = new HtmlHead();
page.Controls.Add(head);
var form = new HtmlForm();
page.Controls.Add(form);
var div = new HtmlGenericControl("div");
div.ID = "myControlContent";
form.Controls.Add(div);
div.Controls.Add(myControl);
HttpContext.Current.Server.Execute(page, stringWriter, false);
}
return stringWriter.ToString()
}
Then in your JS you can parse the whole html and get only the innerHTML of div#myControlContent, for example:
function receiver(arguments, context) {
var parser = new DOMParser();
var doc = parser.parseFromString(arguments, "text/html");
document.getElementById('divControls').innerHTML = doc.getElementById('myControlContent').innerHTML;
}
note that DOMParser, is available only in mordern browsers, but you can find other approachs for older browsers...

Related

Antlr4 Javascript Visitor

I'm currently trying to develope a JavaScript Compiler with the help of an Antlr4 Visitor. I've got this already implemented with Java but cannot figure out how to do this in JavaScript. Probably somebody can answer me a few questions?
1: In Java there is a Visitor.visit function. If im right this isn't possibile with Javascript. Is there a work around for this?
2: My Javascript Visitor got all the generated visiting functions but when I use console.log(ctx) the context is undefined. Any idea why?
Extract from the SimpleVisitor.js:
// Visit a parse tree produced by SimpleParser#parse.
SimpleVisitor.prototype.visitParse = function(ctx) {
console.log(ctx);
};
Main js file:
var antlr4 = require('lib/antlr4/index');
var SimpleLexer = require('antlr4/SimpleLexer');
var SimpleParser = require('antlr4/SimpleParser');
var SimpleVisitor = require('antlr4/SimpleVisitor');
var input = "double hallo = 1;";
var chars = new antlr4.InputStream(input);
var lexer = new SimpleLexer.SimpleLexer(chars);
var tokens = new antlr4.CommonTokenStream(lexer);
var parser = new SimpleParser.SimpleParser(tokens);
var visitor = new SimpleVisitor.SimpleVisitor();
parser.buildParseTrees = true;
var tree = parser.parse();
visitor.visitParse();
This is probably enough to start with ...
Bruno
Edit:
Probably the context is undefined because I call the function without arguments but where do I get the "starting"-context?
Edit2:
So I think I get the idea how this should work out. One Question remaining how do I determine which rule to call next inside each visitor function?
The basic idea behind the visitor is that you have to handle all the logic by yourself. To do this I generated the visitor using antlr. My own visitor overrides all functions that I need to implement my logic.
create lexer, tokens, ...
var antlr4 = require('antlr4/index');
var SimpleJavaLexer = require('generated/GrammarLexer');
var SimpleJavaParser = require('generated/GrammarParser');
var SimpleJavaVisitor = require('generated/GrammarVisitor');
var Visitor = require('./Visitor');
var input = "TestInput";
var chars = new antlr4.InputStream(input);
var lexer = new GrammarLexer.GrammarLexer(chars);
var tokens = new antlr4.CommonTokenStream(lexer);
var parser = new GrammarParser.GrammarParser(tokens);
var visitor = new Visitor.Visitor();
parser.buildParseTrees = true;
var tree = parser.parse();
and call your entry function
visitor.visitTest(tree);
inside your new visitor you need to implement your new logic to determine which function to call next (the right context as argument is important)
var GrammarVisitor = require('generated/GrammarVisitor').GrammarVisitor;
function Visitor () {
SimpleJavaVisitor.call(this);
return this;
};
Visitor.prototype = Object.create(GrammarVisitor.prototype);
Visitor.prototype.constructor = Visitor;
Visitor.prototype.visitTest = function(ctx) {
// implement logic to determine which function to visit
// then call next function and with the right context
this.visitBlock(ctx.block());
};
I hope you can understand my basic idea. If anybody got any questions just comment.

UWP WebView calls dynamic JavaScript

I have studied Window Universal App these days. When working with WebView, I see it can invoke a script inside the html file, but how about executing an external JavaScript script?
WebView webview = new WebView();
webview.Navigate(new Uri("https://www.google.com"));
string script = #"
function getBodyHTML()
{
var innerHTML = document.getElementsByTagName('body')[0].innerHTML;
return innerHTML;
}
";
I want to get the bodyHTML, possibly using something like this:
// pseudo code
webview.IncludeScript(script);
string bodyHTML = webview.ExecuteScript("getBodyHTML()");
oops, just realize that the similar question was answered.
I could do my thing by:
string[] arguments = new string[] {#"document.getElementsByTagName('body')[0].innerHTML;"};
try
{
string bodyHTML = await webview.InvokeScriptAsync("eval", arguments);
}
catch (Exception ex)
{
}

How to using XPath in WebBrowser Control?

In C# WinForms sample application, I have used WebBrowser control. I want to use JavaScript XPath to select single node. To do this, I use XPathJS
But with the following code, the returned value of vResult is always NULL.
bool completed = false;
WebBrowser wb = new WebBrowser();
wb.ScriptErrorsSuppressed = true;
wb.DocumentCompleted += delegate { completed = true; };
wb.Navigate("http://stackoverflow.com/");
while (!completed)
{
Application.DoEvents();
Thread.Sleep(100);
}
if (wb.Document != null)
{
HtmlElement head = wb.Document.GetElementsByTagName("head")[0];
HtmlElement scriptEl = wb.Document.CreateElement("script");
mshtml.IHTMLScriptElement element = (mshtml.IHTMLScriptElement)scriptEl.DomElement;
element.src = "https://raw.github.com/andrejpavlovic/xpathjs/master/build/xpathjs.min.js";
head.AppendChild(scriptEl);
// Initialize XPathJS
wb.Document.InvokeScript("XPathJS.bindDomLevel3XPath");
string xPathQuery = #"count(//script)";
string code = string.Format("document.evaluate('{0}', document, null, XPathResult.ANY_TYPE, null);", xPathQuery);
var vResult = wb.Document.InvokeScript("eval", new object[] { code });
}
Is there a way to do JavaScript XPath with WebBrowser control ?
Rem : I'd like to avoid using HTML Agility Pack, I wanted to directly manipulate WebBrowser control's DOM's content mshtml.IHTMLElement
I have found solution, here is the code:
bool completed = false;
WebBrowser wb = new WebBrowser();
wb.ScriptErrorsSuppressed = true;
wb.DocumentCompleted += delegate { completed = true; };
wb.Navigate("http://stackoverflow.com/");
while (!completed)
{
Application.DoEvents();
Thread.Sleep(100);
}
if (wb.Document != null)
{
HtmlElement head = wb.Document.GetElementsByTagName("head")[0];
HtmlElement scriptEl = wb.Document.CreateElement("script");
mshtml.IHTMLScriptElement element = (mshtml.IHTMLScriptElement)scriptEl.DomElement;
element.text = System.IO.File.ReadAllText(#"wgxpath.install.js");
head.AppendChild(scriptEl);
// Call wgxpath.install() from JavaScript code, which will ensure document.evaluate
wb.Document.InvokeScript("eval", new object[] { "wgxpath.install()" });
string xPathQuery = #"count(//script)";
string code = string.Format("document.evaluate('{0}', document, null, XPathResult.NUMBER_TYPE, null).numberValue;", xPathQuery);
int iResult = (int) wb.Document.InvokeScript("eval", new object[] { code });
}
I use "A pure JavaScript XPath library": wicked-good-xpath and download the wgxpath.install.js

Create application based on Website

I searched and tried a lot to develop an application which uses the content of a Website. I just saw the StackExchange app, which looks like I want to develop my application. The difference between web and application is here:
Browser:
App:
As you can see, there are some differences between the Browser and the App.
I hope somebody knows how to create an app like that, because after hours of searching I just found the solution of using a simple WebView (which is just a 1:1 like the browser) or to use Javascript in the app to remove some content (which is actually a bit buggy...).
To repeat: the point is, I want to get the content of a website (on start of the app) and to put it inside my application.
Cheers.
What you want to do is to scrape the websites in question by getting their html code and sorting it using some form of logic - I recomend xPath for this. then you can implement this data into some nice native interface.
You need however to be very aware that the data you get is not allways formated the way you want so all of your algorithems have to be very flexible.
the proccess can be cut into steps like this
retrive data from website (DefaultHttpClient and AsyncTask)
analyse and retrive relevant data (your relevant algorithm)
show data to user (Your interface implementation)
UPDATE
Bellow is some example code to fetch some data of a website it implements html-cleaner libary and you will need to implement this in your project.
class GetStationsClass extends AsyncTask<String, String, String> {
#Override
protected String doInBackground(String... params) {
HttpClient httpclient = new DefaultHttpClient();
httpclient.getParams().setParameter(CoreProtocolPNames.PROTOCOL_VERSION, HttpVersion.HTTP_1_1);
httpclient.getParams().setParameter(CoreProtocolPNames.HTTP_ELEMENT_CHARSET, "iso-8859-1");
HttpPost httppost = new HttpPost("http://ntlive.dk/rt/route?id=786");
httppost.setHeader("Accept-Charset", "iso-8859-1, unicode-1-1;q=0.8");
try {
// Add your data
List<NameValuePair> nameValuePairs = new ArrayList<NameValuePair>(3);
httppost.setEntity(new UrlEncodedFormEntity(nameValuePairs, "utf-8"));
// Execute HTTP Post Request
HttpResponse response = httpclient.execute(httppost);
int status = response.getStatusLine().getStatusCode();
String data = "";
if (status != HttpStatus.SC_OK) {
ByteArrayOutputStream ostream = new ByteArrayOutputStream();
response.getEntity().writeTo(ostream);
data = ostream.toString();
} else {
BufferedReader reader = new BufferedReader(new InputStreamReader(response.getEntity().getContent(),
"iso-8859-1"));
String line = null;
while ((line = reader.readLine()) != null) {
data += line;
}
XPath xpath = XPathFactory.newInstance().newXPath();
try {
Document document = readDocument(data);
NodeList nodes = (NodeList) xpath.evaluate("//*[#id=\"container\"]/ul/li", document,
XPathConstants.NODESET);
for (int i = 0; i < nodes.getLength(); i++) {
Node thisNode = nodes.item(i);
Log.v("",thisNode.getTextContent().trim);
}
} catch (XPathExpressionException e) {
e.printStackTrace();
}
}
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
#Override
protected void onPostExecute(String result) {
super.onPostExecute(result);
//update user interface here
}
}
private Document readDocument(String content) {
Long timeStart = new Date().getTime();
TagNode tagNode = new HtmlCleaner().clean(content);
Document doc = null;
try {
doc = new DomSerializer(new CleanerProperties()).createDOM(tagNode);
return doc;
} catch (ParserConfigurationException e) {
e.printStackTrace();
} catch (Exception e) {
e.printStackTrace();
}
return doc;
}
to run the code above use
new getStationsClass.execute();

actionscript p2p - chat how to create multiple connections and send messages to all/any of them

i'm new in action script. today i've written this part of code and the strange thing but it works)))
<?xml version="1.0" encoding="utf-8"?>
private const SERVER_ADDRESS:String = "rtmfp://p2p.rtmfp.net/bla-bla/";
private var nc:NetConnection;
private var ss:NetStream;
private var rs:NetStream;
private var myPeerID:String;
private var recvStreams:Object = new Object();
private var sendStreams:Object = new Object();
private var soundNewMsg:Class;
private function initConnection():void{
nc = new NetConnection();
nc.maxPeerConnections = 1000;
nc.addEventListener(NetStatusEvent.NET_STATUS, ncStatus);
nc.connect(SERVER_ADDRESS);
}
public function ncStatus(event:NetStatusEvent):void{
if(event.info.code == "NetConnection.Connect.Success"){
myPeerID = nc.nearID;
initSendStream();
ExternalInterface.call("alert",nc.nearID);
}
else ExternalInterface.call("p2pError",event.info.code);
}
private function initSendStream():void{
ss = new NetStream(nc, NetStream.DIRECT_CONNECTIONS);
ss.publish('chat');
var client:Object = new Object();
client.onPeerConnect = function(subscriber:NetStream):Boolean{
if(!sendStreams[subscriber.farID]&&!recvStreams[subscriber.farID]){
initReceiveStream(subscriber.farID);
sendStreams[subscriber.farID] = true;
}
return true;
};
ss.client = client;
}
private function initReceiveStream(peerID:String):void{
rs = new NetStream(nc,peerID);
rs.play('chat');
var client:Object = new Object();
client.receiveSomeData = receiveSomeData;
rs.client = client;
recvStreams[peerID] = true;
}
private function sendSomeData(str:String):void{
if(str)ss.send('receiveSomeData', str);
}
private function receiveSomeData(str:String):void{
ExternalInterface.call("receiveSomeData", str);
}
public function init():void{
ExternalInterface.addCallback("initConnection",initConnection);
ExternalInterface.addCallback("sendSomeData",sendSomeData);
ExternalInterface.addCallback("initReceiveStream",initReceiveStream);
ExternalInterface.call("p2pStartInit");
}
]]>
</mx:Script>
js:
function getP2p(){
if(navigator.appName.indexOf("Microsoft")!=-1)return window.p2p;
else return document.p2p;
}
function p2pStartInit(){
try{getP2p().initConnection()}
catch(e){p2pError('flasherror')}
}
function initReceiveStream(p2pId){
try{getP2p().initReceiveStream(p2pId)}
catch(e){p2pError(e)}
}
function sendSomeData(str){
try{getP2p().sendSomeData(str)}
catch(e){p2pError('flasherror')}
}
function p2pError(err){
alert(err)
}
function receiveSomeData(str,id){
alert('Received:'+str+'/'+id)
}
and html:
<input onblur="initReceiveStream(this.value)" value="initReceiveStream(p2pId)" />
<input onblur="sendSomeData(this.value)" value="sendSomeData(str)" />
and now what i'm doing:
first example i open in opera. it gives me its id.
then i open the second one in mozilla. in the first input field i put id of an opera example. it connects fine. after when i'm trying to send/receive messages between these 2 examples all works fine (both of them receive/send messages)
and here my first problem goes:
when i'm open the third example in some other browser and putting the third example id into the input field of the 2nd example (which is in mozilla) then in opera i get "NetStream.Connect.Closed". if i tried to send some message from mozilla example this message will apear both in opera an in the third browser. but if i tried to send message from opera it wont go enywhere. what should i do that messages from opera could be sent to mozilla and messages from mozilla could be sent to all examples?
and the second problem is:
when i succeed with the first one i want that the second example (which should contain ids of all connected chats) can choose where it should send messege: to the first one, or the third one or to both of them? how can i achive that?
thanks a lot for your help!
actualy i've just found out how to do it.
<?xml version="1.0" encoding="utf-8"?>
import mx.collections.ArrayCollection;
private const SERVER_ADDRESS:String = "rtmfp://p2p.rtmfp.net/bla-bla/";
private var nc:NetConnection;
private var ss:NetStream;
private var rs:NetStream;
private var myPeerID:String;
private var recvStreams:Object = new Object();
private var sendStreams:Object = new Object();
private var soundNewMsg:Class;
private function initConnection():void{
nc = new NetConnection();
nc.maxPeerConnections = 1000;
nc.addEventListener(NetStatusEvent.NET_STATUS, ncStatus);
nc.connect(SERVER_ADDRESS);
}
public function ncStatus(event:NetStatusEvent):void{
ExternalInterface.call("p2pError",event.info.code);
if(event.info.code == "NetConnection.Connect.Success"){
myPeerID = nc.nearID;
initSendStream();
ExternalInterface.call("alert",nc.nearID);
}
}
private function initSendStream():void{
ss = new NetStream(nc, NetStream.DIRECT_CONNECTIONS);
ss.publish('chat');
var client:Object = new Object();
client.onPeerConnect = function(subscriber:NetStream):Boolean{
if(!sendStreams[subscriber.farID])sendStreams[subscriber.farID] = subscriber;
if(!recvStreams[subscriber.farID])initReceiveStream(subscriber.farID);
return true;
}
ss.client = client;
}
private function initReceiveStream(peerID:String):void{
if(peerID){
rs = new NetStream(nc,peerID);
rs.play('chat');
var client:Object = new Object();
client.receiveSomeData = receiveSomeData;
rs.client = client;
var peer:Object = new Object();
peer.stream = rs;
recvStreams[peerID] = peer;
}
}
private function sendSomeData(str:String,farIds:String):void{
if(str!=null&&str!=""){
str = str.replace(/(^[\r\n\t\s]+)|([\r\n\t\s]$)/g,"");
farIds = farIds == null ? "" : farIds.replace(/[^a-z0-9;]/gi,"");
if(farIds!=""){
var farId:Array = farIds.split(";");
for(var i:int;i<farId.length;i++){
if(farId[i]&&sendStreams[farId[i]]){
sendStreams[farId[i]].send('receiveSomeData', str, myPeerID);
}
}
}
else{
for(var id:String in sendStreams){
sendStreams[id].send('receiveSomeData', str, myPeerID);
}
}
}
}
private function receiveSomeData(str:String, farId:String):void{
ExternalInterface.call("receiveSomeData", str, farId);
}
public function init():void{
ExternalInterface.addCallback("initConnection",initConnection);
ExternalInterface.addCallback("sendSomeData",sendSomeData);
ExternalInterface.addCallback("initReceiveStream",initReceiveStream);
ExternalInterface.call("p2pStartInit");
}
]]>
</mx:Script>
i hope google didn't lie to me)
For the first problem:
yes, you have to keep the subscribers' stream objects somewhere (from within onPeerConnect handler). This will allow multiple clients to connect to the publishing stream without dropping the old clients.

Categories

Resources