how to click json hyperlink on page using javascript - c#

Hey on a windows 8 app I want to automatic click on a hyperlink after web page is loaded in the webviewer.. The code for the hyperlink looks like this:
<li class="first"><a class="user-signup ctools-bp-modal" href="http://webpage.com/register"> … </a></li>
the link is to a json file that will open on the page.
now I tried doing it by using both document.getElementByClassName and document.getElementByClass like:
signupWebView.InvokeScript("eval", new string[] { string.Format("document.getElementByClassName('user-signup ctools-bp-modal').click();") });
I have also tried with .submit
Is there any way to do this?
Thanks

It's getElementsByClassName (plural) and since multiple elements could have the same class, it will return an array of objects. The following code will work, but presumes you know which specific item you want among a potential list of elements with the same given class(es). Perhaps using an id attribute would be safer?
signupWebView.InvokeScript("eval", new string[] { "document.getElementsByClassName('user-signup ctools-bp-modal')[0].click();" });
Note too, the String.Format call is unnecessary.

Related

How can one syntax highlight and format GraphQL queries on an HTML page with C# on .NET Core / Blazor?

Basically what the title says; I would like to syntax highlight aka colourize the GraphQL queries like they do it in the "GraphiQL Explorer", and print it on an HTML page with .NET Core using C#. Im working with Blazor, so the pages are .razor.
See this screenshot:
And I also want to auto-format the queries so that the queries aren't on a single line, but with line-breaks and indentations as the button "prettify" does in the "GraphiQL explorer".
So here's a sample.
Convert this => {human(id: "1000") {name height(unit: FOOT)}}
to this =>
Edit:
Here's a blazorFiddle i created. BlazorFiddleSample
Basically format\indent the graphql queries in a component page like this converter does, freetooldev
This could be achieved using BlazorMonaco
https://github.com/serdarciplak/BlazorMonaco
the code setup should look like this for the options
private StandaloneEditorConstructionOptions EditorConstructionOptions(MonacoEditor editor)
{
return new StandaloneEditorConstructionOptions
{
AutomaticLayout = true,
Language = "graphql",
};
}
please follow the instructions to get it setup if this is something you want to try.
you can get more info on the use of Monaco Editor here:
https://microsoft.github.io/monaco-editor/

React Getting Data Attribute from CSHTML parent element

Brand new to React today so apologies in advance.
I have googled but for whatever reason can't seem to find the answer which I know must be out there!
I'm trying to build a TEST component just to learn.
The component is basically going to consist of a header and a number of name value pairs set out in div blocks. So I'm starting with the header and trying to make the component generic by passing in a data attribute.
I have a cshtml page with this node (solution is a .NET Core MVC project in VS2019):
<div id="detailsHeaderText" data-headerText="Details"></div>
I have set up a jsx file which looks like this:
class Header extends React.Component {
render() {
return (
<div className="col-md-12 col-sm-12"><h5>{document.getElementById("detailsHeaderText").getAttribute("data-headerText")}</h5></div>
);
}
}
ReactDOM.render(<Header />, document.getElementById('detailsHeaderText'));
This works perfectly and returns a header with the word "Details" in it.
I now want to make it generic so I can do this elsewhere on the page:
<div class="detailsHeaderText2" data-id="2" data-headerText="Header2"></div>
<div class="detailsHeaderText3" data-id="3" data-headerText="Header3"></div>
<div class="detailsHeaderText4" data-id="4" data-headerText="Header4"></div>
etc
How can I output the header text based on a data-attribute input?
The idea being that I connect the React render output to the element along the lines of this pseudocode: document.getElementById("detailsHeaderText" + data-id)
I've looked at constructors and super(props) but nothing seems to work as most of the examples are to do with handlers and hence access the event target prop.
I've found many links to passing props between components.
But none for passing in data from the parent element on a cshtml page.
An answer or a pointer to a detailed answer on passing variables into React would be most helpful.
Thanks in advance.
So I'm 12 hours further down the line in terms of learning React and Googling.
And solved the problem.
Working code is:
function Header(props) {
return <div className="col-md-12 col-sm-12"><h5>{props.headertext}</h5></div>;
}
let elems = document.getElementsByClassName("headerText");
function renderToElements(toRender, elements, dataset) {
for (var i = 0; i < elements.length; i++) {
let passText = elements[i].dataset[dataset];
let renderEl = React.createElement(toRender, { headertext: passText })
ReactDOM.render(renderEl, elements[i]);
}
}
renderToElements(Header, elems, 'headertext')
Which renders all dom nodes of the following construct:
<div class="headerText" data-headertext="Details"></div>
It may seem like a pointless exercise to some in terms of what it is achieving but hopefully this may help others in grasping some basics as I/they can now build on this to construct more complex components.

End page background working, WP8, C#

I dont know if it is even possible, but is there some way how to "end" page in Windows Phone 8 app?
My problem is that i am using one delegate (to know when is my xml downloaded) on multiple pages. It works fine, but when i open one page, she initialize herself, i go on other page (trough back button) and new page initialize herself too. Everything is fine, but the previous page is still listening to the delegate and it is really big problem. So i need to get the previous page (that closed) into a same state like she was not ever opened.
I will be thankful for any advice (maybe i am thinking in wrong way now, i dont know, maybe the page just have to be de-initialize).
PS: If its necessary i will post the code, but i think it is not. :)
Okey here is some code:
In class whis is downloading XML i have delegate like this:
public delegate void delDownloadCompleted();
public static event delDownloadCompleted eventDownloadCompleted;
This class is downloading few different xml files depends of constructor in run(int number) method.
After is download complete and all information from xml are saved in my local list i call delegateCompled. if (eventDownloadCompleted != null)
{
eventDownloadCompleted();
}
Then i have few different pages. All pages are used for display specific data from downloaded xml. So on this specific page I have method that is fired when "downloadClass" says it is complet.
XML_DynamicDataChat.delDownloadCompleted delegMetoda = new XML_DynamicDataChat.delDownloadCompleted(inicialiyaceListu);
XML_DynamicDataChat.eventDownloadCompleted += delegMetoda;
This is that "inicializaceListu" method:
private void inicialiyaceListu()
{
Dispatcher.BeginInvoke(() =>
{
model = new datka();
// object model is just model where i am saving all specific list of informations that i got from xml files.
chatList9 = model.getChat(1);
gui_listNovinky.ItemsSource = chatList9;
gui_loadingGrid.Visibility = Visibility.Collapsed;
});
}
All of these works fine, but when i go back (with back button) and open other specific page with other specific information from other downloaded xml, previous page is still listening for the delegate and inicialiyaceListu() method is still fired everytime i complete download of xml.
So i need to say previous page something like: "hey page, you are now closed! Can you shut the **** up and stop work?!?"
I think that specific delegate for each pages could solve this, but it is not correct programing way.
I solved it nice and easy. It is really simple solution. I just created bool variable and set it false when i go back. In inicializaceListu() i have condition if it is true. If it is true do that stuffs when false do nothing.

Using Javascript for Google Maps API from WPF

I am creating an application that interfaces with Google's Maps API v3. My current approach is using a WebBrowser control by WebBrowser.Navigate("Map.html"). This is working correctly at the moment; however, I am also aware of WebBrowser.InvokeScript(). I have seen this used to execute a javascript function, but I would like to have something like the following structure:
APICalls.js - Contains different functions that can be called, or even separated out into a file for each function if necessary.
MapInterface.cs
WebBrowser.InvokeScript("APICalls.js", args) - Or control the javascript variables directly.
I have seen the InvokeScript method used, but none of the examples gave any detail to the source of the function, so I'm not sure if it was calling it from an html file or js file. Is it possible to have a structure like this, or a similarly organized structure, rather than creating an html file with javascript in each one and using Navigate()?
Additionally, are there any easier ways to use Google Maps with WPF. I checked around, but all of the resources I found were at least 2-3 years old, which I believe is older than the newest version of the maps API.
I can't suggest a better way of using Google Maps API with WPF (although I'm sure it exists), but I can try to answer the rest of the question.
First, make sure to enable FEATURE_BROWSER_EMULATION for your WebBrowser app, so Google Maps API recognizes is it as modern HTML5-capable browser.
Then, navigate to your "Map.html" page and let it finish loading. Here's how it can be done using async/await (the code is for the WinForms version of WebBrowser control, but the concept remains the same).
You can have your APICalls.js as a separate local file, but you'd need to create and populate a <script> element for it from C#. You do it once for the session.
Example:
var scriptText = File.ReadAllText("APICalls.js");
dynamic htmlDocument = webBrowser.Document;
var script = htmlDocument.createElement("script");
script.type = "text/javascript";
script.appendChild(htmlDocument.createTextNode(scriptText));
htmlDocument.body.appendChild(script);
Then you can call functions from this script in a few different ways.
For example, your JavaScript entry point function in APICalls.js may look like this:
(function() {
window.callMeFromCsharp = function(arg1, arg2) {
window.alert(arg1 + ", " +arg2);
}
})();
Which you could call from C# like this:
webBrowser.InvokeScript("callMeFromCsharp", "Hello", "World!");
[UPDATE] If you're looking for a bit more modular or object-oriented approach, you can utilize the dynamic feature of C#. Example:
JavaScript:
(function() {
window.apiObject = function() {
return {
property: "I'm a property",
Method1: function(arg) { alert("I'm method 1, " + arg); },
Method2: function() { return "I'm method 2"; }
};
}
})();
C#:
dynamic apiObject = webBrowser.InvokeScript("apiObject");
string property = apiObject.property;
MessageBox.Show(property);
apiObject.Method1("Hello!");
MessageBox.Show(apiObject.Method2());

I need a WPF application to populate a HTML template (ideally like an MVC project can). How can I do this?

I'm working on a WPF application that needs to populate HTML templates and save them to the disk.
Ideally I could use an MVC project to do this, e.g. define a View and pass a ViewModel to it, and then write the output to a FileStream rather than the Response stream.
Unfortunately there's no guarantee of internet access so I can't host it on a remote server, and there's no guarantee of a local web server either, so I have nowhere to host it.
Is there any way for me to do this in WPF or to get an MVC project (that I can reference from the WPF solution) to work outside the context of a web server?
Or should I take a different approach?
The solution is to use RazorEngine
E.g.:
public static string RenderPartialViewToString(string templatePath, string templateName, object viewModel)
{
string text = File.ReadAllText(Path.Combine(templatePath, templateName));
string renderedText = Razor.Parse(text, viewModel);
return renderedText;
}
in this case, templateName is a .cshtml file that contains the following Html & Razor code:
<div>
<h1>Age: #Model.Age</h1>
<input type="button" value="Just a Sample Button" />
</div>
and viewModel is simply an anonymous object defined as
var anonObj = new
{
Age = 10,
};
Razor.Parse() does the magic of parsing the contents of templateName and replacing the inline C# with values in the HTML.

Categories

Resources