using Visual Studio 2019, I created a Blazor Web Assembly project.
I want to use the index.html page for something else, so I removed the <app></app> tag from it.
Then created another page named dashboard.html and added a dashboard.razor page. In this page added #page "/dashboard" and the <app></app> tag.
Now when I navigate to dashboard.html from index.html, am getting message "there is nothing at this address"
How could I make the dashboard.html page as my main app page?
Any ideas most appreciated.
This is how the project properties look:
To get this running I suggest you set up a blank WASM project from the Blazor template. Once you have it running you can make the necessary changes to your project. (My project is called Blazor.Starter.WASM.)
Move the Client project wwwroot to the Server project.
Copy index.html to dashboard.html - here's
serverproject/wwwroot/dashboard.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Blazor.Starter.WASM</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="Blazor.Starter.WASM.Client.styles.css" rel="stylesheet" />
</head>
<body>
<div id="app">Loading...</div>
<div id="blazor-error-ui">
An unhandled error has occurred.
Reload
<a class="dismiss">🗙</a>
</div>
<script src="/site.js"></script>
<script src="_framework/blazor.webassembly.js"></script>
</body>
</html>
My simple index.html looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Blazor.Starter.WASM</title>
<base href="/"/>
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="m-4 p-4">
Go to Dashboard
</div>
</body>
</html>
Index.razor looks like this. Note the two page references
#page "/"
#page "/dashboard/"
<h1>Hello, world!</h1>
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />
#code {
}
Counter.razor and all other pages in the SPA - add #page "/dashboard/nnnnn"
#page "/counter"
#page "/dashboard/counter"
.....
NavMenu.razor looks like this (changes to the hrefs):
.....
<div class="#NavMenuCssClass" #onclick="ToggleNavMenu">
<ul class="nav flex-column">
<li class="nav-item px-3">
<NavLink class="nav-link" href="dashboard" Match="NavLinkMatch.All">
<span class="oi oi-home" aria-hidden="true"></span> Home
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="dashboard/counter">
<span class="oi oi-plus" aria-hidden="true"></span> Counter
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="dashboard/fetchdata">
<span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
</NavLink>
</li>
......
Finally update Startup.cs on the Server project.
....
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
app.UseWebAssemblyDebugging();
}
else
{
app.UseExceptionHandler("/Error");
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseBlazorFrameworkFiles();
app.UseStaticFiles();
// New section to map all requests starting with /dashboard to the Blazor Wasm project
app.MapWhen(ctx => ctx.Request.Path.StartsWithSegments("/dashboard"), app1 =>
{
app1.UseRouting();
app1.UseEndpoints(endpoints =>
{
endpoints.MapRazorPages();
endpoints.MapControllers();
endpoints.MapFallbackToFile("dashboard.html");
});
});
// default endpoint
app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapRazorPages();
endpoints.MapControllers();
endpoints.MapFallbackToFile("index.html");
});
}
}
}
If I have these instructions correct the application should start on the simple index page. Once in the WASM try an F5 to check the Endpoint mapping works correctly - note all #page references within the SPA must be prefixed with /dashboard to ensure the F5 reload works.
Related
i have to use React component in my MVC project. I found out that is possible by installing some Packages with NuGets. I installed:
-React.Web.Mvc4
-JavaScriptEngineSwitcher.V8
-Microsoft.ClearScript.V8.Native.win-x86 and x64
I tried to follow tutorials online but seem that i miss something important cause the simple string that i want to show doesn't appear.
Maybe is only an error of setting so i leave here the codes and the directory folders. In many tutorials the have a Scripts folder, but i don't cause creating an MVC project with VS put js file in 'wwwroot" so i thougth to use that folder to contains my Component.
Program.cs:
using JavaScriptEngineSwitcher.Core;
using JavaScriptEngineSwitcher.V8;
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddControllersWithViews();
builder.Services.AddMvc().AddRazorRuntimeCompilation();
JsEngineSwitcher.Current.DefaultEngineName = V8JsEngine.EngineName;
JsEngineSwitcher.Current.EngineFactories.AddV8();
var app = builder.Build();
// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/Home/Error");
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();
app.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
app.Run();
Index.js:
class Index extends React.Component {
render() {
return (
<h1> Hello Jems </h1>
)
}
}
ReactDOM.render(<Index />, document.getElementById("root"))
Index.cshtml
#using SportData.Web.Models;
#using React.Web.Mvc;
#model SportContainer
<div id="root"></div>
<script src="~/js/index.jsx"></script>
_Layout.cshtml:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - SportData</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="~/WebApplication1.styles.css" asp-append-version="true" />
<link rel="stylesheet" href="~/css/card.css" asp-append-version="true" />
</head>
<body>
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<script crossorigin="anonymous" src="https://unpkg.com/react#17/umd/react.development.js"></script>
<script crossorigin="anonymous" src="https://unpkg.com/react-dom#17/umd/react-dom.development.js"></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
[link to directory foldes]
[1]: https://i.stack.imgur.com/VEQom.png
I'm learning asp.net and using mvc as a starting point. I've got the app running however when trying to add CSS to a particular view it doesn't do anything. I've seen many solutions but not seem to work for me. Plugging css selector directly in _Layout works only for the main page but doesnt for independent views
Refresh cache
#Styles.Render("~/Content/styles.css") add to view
link css in head of _Layout
I am obviously missing something; can someone figure out what I am doing wrong and explain why it works?
Folder structure:
_Layout.cshtml head
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - bugtracker</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css">
<link rel="stylesheet" href="~/bugtracker.styles.css" asp-append-version="true" />
<link href="~/Content/css/styles.css" rel="stylesheet" type="text/css"/>
</head>
Index.cshtml
#model IEnumerable<bugtracker.Models.Issue>
#{
ViewData["Title"] = "Index";
}
#foreach (var item in Model) {
<span class="cardborder">
<p> ID: #Html.DisplayFor(modelItem => item.Id) </p>
<p> #Html.DisplayFor(modelItem => item.Name) </p>
<p> #Html.DisplayFor(modelItem => item.Description) </p>
<p> #Html.DisplayFor(modelItem => item.Type) </p>
<p> #Html.DisplayFor(modelItem => item.Priority) </p>
</span>
}
Content/css/styles.css
.cardborder{
border: 1px solid red;
}
Yes, I'd also try to load the script at the bottom of the _Layout.cshtml to see if that changes behavior, also make sure to have caching turned off in your browser.
Can we render a Blazor component as an independent DOM fragment, or somehow else consume it as a standard Web Component within a vanilla HTML/JS page?
This might be a naive question from the Blazor architectural standpoints. I am not a Blazor expert by far, but I think it can be a useful technique for incremental "brownfield" modernization of legacy web applications. I'm surprised this doesn't appear to be officially supported.
To illustrate, consider this simple web component example, which renders a custom element <date-info>:
// define a custom web component
customElements.define("date-info", class DateInfo extends HTMLElement {
constructor() {
super();
// create an "open" (vs "closed") shadow DOM,
// i.e., accessible to the outside JavaScript
this.attachShadow({ mode: "open" });
}
async connectedCallback() {
console.log(`${this.constructor.name}.${this.connectedCallback.name} called`);
// get the content from the server,
// this could be a Blazor component markup
try {
const response = await fetch("https://worldtimeapi.org/api/ip");
const data = await response.json();
const content = new Date(data.utc_datetime).toString();
this.shadowRoot.innerHTML = `<span>${content}</span>`;
}
catch(e) {
console.error(e);
const info = document.createTextNode(e.message);
this.shadowRoot.appendChild(info);
}
}
});
<!-- use the web component -->
<p>Current time: <date-info/></p>
Now, instead of fetching https://worldtimeapi.org/api/ip, I'd like to fetch and render a detached markup for a Blazor/Server component, e.g.:
#* this is a Blazor component *#
<p>#(DateTime.Now)</p>
Moreover, I'd expect this markup to remain functional and dynamic, i.e., the client-side DOM events and the server-side updates for this Blazor component to further propagate both ways, through the life cycle of the wrapping web component.
It's surely possible to make it a Blazor #page and load it into an iframe, but I'm rather looking to render it as a part of the outer page's DOM.
So far, I've come across this:
Apparently, that wasn't one of Blazor design goals back in 2018:
https://github.com/dotnet/aspnetcore/issues/16033.
Later Steve Sanderson created an (unofficial) library to test Blazor components in isolation, which in theory can be used to get a standalone Blazor component markup: https://stackoverflow.com/a/60457390/1768303.
Is it the best approach to tackle this problem, so far?
MS has addressed this limitation, but the solution requires .Net 6.
https://github.com/aspnet/AspLabs/tree/main/src/BlazorCustomElements
This was done by the man himself, Steve Sanderson.
In the meantime you can mix the old cshtml with razor components.
I use this approach to maintain the same graphic layout between the two systems.
An example, the following file is _Layout.cshtml used by Identity.
I've used various Blazor components via static rendering:
#using Microsoft.AspNetCore.Hosting
#using Microsoft.AspNetCore.Mvc.ViewEngines
#inject IWebHostEnvironment Environment
#inject ICompositeViewEngine Engine
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
#using Project.Server.Shared
<!DOCTYPE html>
<html>
<head>
<component type="typeof(MainLayoutHead)" render-mode="Static" />
</head>
<body>
<app>
<div class="container main">
<component type="typeof(MainLayoutTopImages)" render-mode="Static" />
<div class="row navmenu-row">
<div class="col-md-12 bg-dark navmenu-col">
<component type="typeof(NavMenu)" render-mode="Static" />
</div>
</div>
<div class="row content pt-4 pb-0 mt-0">
<div class="col-md-12">
<div class="row">
<div class="col-md-12">
#*Required for GDPR.*#
<partial name="_CookieConsentPartial" />
</div>
</div>
<div class="row body-row">
<div class="col-md-12 body-col">
#RenderBody()
</div>
</div>
</div>
</div>
<component type="typeof(MainLayoutFooter)" render-mode="Static" />
</div>
</app>
<script src="~/Identity/lib/jquery/dist/jquery.min.js"></script>
<script src="~/Identity/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/Identity/js/site.js" asp-append-version="true"></script>
#RenderSection("Scripts", required: false)
</body>
</html>
The MainLayoutHead, MainLayoutFooter and NavMenu are regular Blazor components.
Not sure if this helps but you can definitely do it from a server side page (I'll delete this answer if it doesn't). Here's a test page that renders all three standard "pages" inside a cshtml page with server side content. You need to actually forget the "page" concept in Blazor. EVERYTHING is a Component. Pages are just components with a Page custom attribute.
The problem with this setup is that as soon as you refresh the page you restart the three components and you lose any scoped data.
#page "/test"
#namespace StackOverflow.Answers.Pages
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
#{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>StackOverflow.Answers</title>
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
<link href="StackOverflow.Answers.styles.css" rel="stylesheet" />
</head>
<body>
<div class="m-2 p-s bg-light">
<h3>A Normal Razor Page</h3>
<p>
Lots of server side rendered junk
</p>
<component type="typeof(StackOverflow.Answers.Shared.SurveyPrompt)" render-mode="ServerPrerendered" />
</div>
<div class="m-2 p-s bg-info">
<h3>A Normal Header</h3>
<p>
Lots More server side rendered junk
</p>
<component type="typeof(StackOverflow.Answers.Pages.Counter)" render-mode="ServerPrerendered" />
</div>
<div class="m-2 p-s bg-light">
<h3>A Normal Header</h3>
<p>
Lots More server side rendered junk
</p>
<component type="typeof(StackOverflow.Answers.Pages.Counter)" render-mode="ServerPrerendered" />
</div>
<div class="m-2 p-s bg-light">
<h3>Yet Another Normal Header</h3>
<p>
Lots More server side rendered junk
</p>
<component type="typeof(StackOverflow.Answers.Pages.FetchData)" render-mode="ServerPrerendered" />
</div>
<div class="m-2 p-s bg-light">
<h3>Yet Another Normal Header</h3>
<p>
Lots More server side rendered junk
</p>
<component type="typeof(StackOverflow.Answers.Pages.FetchData)" render-mode="ServerPrerendered" />
</div>
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
Reload
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
I am creating a Vazor (VB.NET Razor) using XML literals supported in VB.NET. I generate a string containging Html code but it needs further processing to resolve paths, handle asp- attributes, do ant encryption or authentication … etc. All this work is already done in Razor, so I don't want to reinvent the wheel. I want to know the part of the Razor doing this to deliver my HTML code to and get the work done.
I create a Class for each view, that implements IVazor Interface. The vbxml code is written in teh Vazor method. This is how it looks like:
Public Function Vazor() As XElement Implements IVazor.Vazor
ViewBag.Title = "Vazor Sample"
Return _
<p>
<h3> Browse Students</h3>
<p>Select from <%= students.Count() %> students:</p>
<ul>
<%= (Iterator Function()
For Each std In students
Yield <li><%= std.Name %></li>
Next
End Function)() %>
</ul>
<script>
var x = 5;
document.writeln("students count = <%= students.Count() %>");
</script>
</p>
End Function
I made a proof of concept here: https://github.com/VBAndCs/VB.NET-Razor
Note: I changed the VBRazor to Vazor but didn't upload this yet.
I want to complete this work, but I need help. My Vazor delivers a string containing HTML code without any C# ot VB code, so it differs from Razor in three things:
1- no need to locate any chtml file.
2- no need to combine view parts (layout, sections, etc) because mu view classes take care of that (I didn't complete this yet. I only cobine the layout for now)
3- no need co compile the View or evaluate any thing.
So, I deliver html code like this:
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewBag.Title - WebApplication1</title>
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css" asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" crossorigin="anonymous" integrity="sha256-eSi1q2PG6J7g7ib17yAaWMcrr5GrtohYChqibrV7PBE=" />
</environment>
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<header>
<nav Class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div Class="container">
<a Class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">WebApplication1</a>
<button Class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span Class="navbar-toggler-icon"></span>
</button>
<div Class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul Class="navbar-nav flex-grow-1">
<li Class="nav-item">
<a Class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li Class="nav-item">
<a Class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div Class="container">
<partial name="_CookieConsentPartial" />
<main role="main" class="pb-3">
<p>
<h3> Browse Students</h3>
<p>Select from 3 students:</p>
<ul>
<li>Adam</li>
<li>Mark</li>
<li>Tom</li>
</ul>
<script>
var x = 5;
document.writeln("students count = 3");
</script>
</p>
</main>
</div>
<footer Class="border-top footer text-muted">
<div Class="container">
copy; 2019 - WebApplication1 - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a></div>
</footer>
<environment include="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
</environment>
<environment exclude="Development">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" asp-fallback-src="~/lib/jquery/dist/jquery.min.js" asp-fallback-test="window.jQuery" crossorigin="anonymous" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js" asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js" asp-fallback-test="window.jQuery, window.jQuery.fn, window.jQuery.fn.modal" crossorigin="anonymous" integrity="sha256-E/V4cWE4qvAeO5MOhjtGtqDzPndRO1LBk8lJ/PR7CA4="></script>
</environment>
<script src="~/js/site.js" asp-append-version="true"></script>
#RenderSection("Scripts", false)
</body>
</html>
This Html code needs further processing to resolve paths, handle asp- attributes, do ant encryption or authentication … etc. All this work is already done in Razor, so I don't want to reinvent the wheel. I want to know the part of the Razor doing this to deliver my HTML code to and get the work done. I spend days looking at the Razor code but didn't get what I want, so a little help is appreciated here.
And who are interested, they can participate in the discussion here:
https://github.com/dotnet/vblang/issues/397
Thanks.
I found a perfgect easy solution, by using VirtualPathProvider. But it disapeared in ASP.NET Core!
I found an alternative with IFileProvider.. More details here:
https://www.mikesdotnetting.com/article/301/loading-asp-net-core-mvc-views-from-a-database-or-other-location
but when I tried to register my virual file provider with this code:
services.Configure(Of MvcRazorRuntimeCompilationOptions)(
Sub(options) options.FileProviders.Add(New Vazor.VazorViewProvider())
)
I found that FileProviders is no longer a member of RazorViewEngineOptions!
In ASP.NET Core 3.0, it is done using MvcRazorRuntimeCompilationOptions (needs to reference Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation:
services.Configure(Of MvcRazorRuntimeCompilationOptions)(
Sub(options) options.FileProviders.Add(New Vazor.VazorViewProvider())
)
And here is the implementation of this idea: Vazor 1.0 up and running:
https://github.com/VBAndCs/Vazor
Vazor is ready now. Start using it today to create wep pages for ASP.NEt Core 3.1 in VB.NET:
1. Install Vazor project templates
2. Install Html5 completion provider VS extension
3. Use the instructions in the ReadMe file
4. Use eShopOnWeb.VB as a guide app.
5. Have fun :)
This is the complete story behind Vazor.
And this is a short version published in Visual studio Magazine article.
I have a whole web page source code in a string type variable.
These code is given below:
<!DOCTYPE html>
<html lang="en" dir="ltr"
class="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<title>Twitter / Authorize an application</title>
<link href="https://abs.twimg.com/a/1373417125/tfw/css/tfw.bundle.css" media="screen" rel="stylesheet" type="text/css" />
<!--[if (IEMobile) & (lt IE 9)]>
<link href="https://abs.twimg.com/a/1373417125/tfw/css/tfw_iemobile.bundle.css" media="screen" rel="stylesheet" type="text/css" />
<![endif]-->
<style type="text/css">
html { display:none; }
</style>
<noscript>
<style type="text/css">
html { display: block; }
</style>
</noscript>
<!--[if IEMobile & lt IE 9]>
<style type="text/css">
html { display: block; }
</style>
<![endif]-->
</head>
<body class="oauth
write
signed-in
tfw
en
logged-in
noloki
">
<div id="header" role="banner">
<div class="bar">
<h1 class="logo">Twitter</h1>
<div id="session" role="navigation">
<h2 class="current-user"><a href="https://twitter.com/xyz" title="Ankita Kumar">
<img src="https://twimg0-a.akamaihd.net/profile_images/37880007865454313/7c577aeb3085dasf355dgf76f043c1cd09_mini.jpeg" alt="" width="24" height="24">
<span class="name">ankita_yahoo</span>
</a></h2>
<div class="user-menu">
<h3 class="session">User Management</h3>
<ul class="session">
<li class="new">New Tweet</li>
<li class="settings">Settings</li>
<li class="help">Help</li>
<li class="signout"><form action="/intent/session" method="post"><div style="margin:0;padding:0"><input name="_method" type="hidden" value="delete" /><input name="authenticity_token" type="hidden" value="015cfb030df22330e517d50b0770c4dab7f3f89b" /></div>
<input id="referer" name="referer" type="hidden" value="/oauth/authorize" />
<input type="submit" class="textual link" value="Sign out">
</form></li>
</ul>
</div>
</div>
</div>
</div>
<div id="bd" role="main">
<p class="action-information">You've granted access to ThisTweetControl!</p>
<div id="oauth_pin">
<p>
<span id="code-desc">Next, return this PIN to complete the authorization process:</span>
<kbd aria-labelledby="code-desc"><code>6107346</code></kbd>
</p>
</div>
</div>
<div class="footer" role="navigation"><div id="ft">
Go to Twitter
Go to the ThisTweetControl homepage
<p class="tip">You can revoke access to any application at any time from the Applications tab of your Settings page.</p>
<p><small>By authorizing an application you continue to operate under Twitter's Terms of Service. In particular, some usage information will be shared back with Twitter. For more, see our Privacy Policy.</small></p>
</div></div>
<script type="text/javascript" charset="utf-8">
var twttr = twttr || {};
twttr.form_authenticity_token = '015cfb03a75wdsfgdf6753dsfb0770c4dab7f3f89b';
if (self == top) {
document.documentElement.style.display = 'block';
}
</script>
<script src="https://abs.twimg.com/a/14353417125/javascripts/loadrunner.js" data-main="tfw/intents/main" data-path="https://abs.twimg.com/a/1373417125/javascripts/modules" type="text/javascript"></script>
</body>
</html>
In above line of code have a code tag <code>6107346</code> with some value and I need to get the numeric value in a variable.
If you use System.Windows.Controls.WebBrowser control then this should work, however it works on assumption that you only have one CODE tag:
var myTagValue = (wbBrowser.Document as mshtml.HTMLDocument)
.getElementsByTagName("CODE")
.OfType<mshtml.IHTMLElement>()
.First()
.innerText
You'll need to reference Internet Explorer's COM library: Microsoft HTML Object Library. getElementsByTagName returns you list of all matching tags, no matter where they are in HTML