I've recently introduced blazor components into my Razor pages project. Until now, my website endpoints have used either exclusively blazor components (.razor) or exclusively razor pages (.cshtml). I am now tring to insert blazor components within my cshtml pages. The problem arrises because I have set up default cascading values, such as an Access Token string and CascadingAuthenticationState in my App.razor page. I don't know how to set these within my cshtml page, as the cshtml page does not like the or components.
I am calling a blazor component like so from a cshtml page:
...
<div>
<component type="typeof(ProcessEditor)" render-mode="ServerPrerendered" param-Id="Model.Id" />
</div>
...
How do I supply this with the needed cascading values and authentication state?
Related
It seems that both Asp.net MVC Core and Asp.net MVC 5.x render html tags & attributes in lowercase and this behavior breaks angular bindings. To give an example: in my view.cshtml I define Angular component with camel case binding:
<my-component [fooBar]="foo"></my-component>
which is later rendered as:
<my-component [foobar]="foo"></my-component>
As far as Angular bindings are case-sensitive, input-property fooBar inside component remains undefined. Is there any way to override this rendering behavior and render html as-is?
When I put this in a cshtml file:
<test-tag [testingThisThing]="123" anotherThingTEST="abc"></test-tag>
I get exactly the same in the HTML source. Are you sure that the element isn't being modified after loading? Are you looking at "View Source" (not "Inspect Element")?
That said, my test-tag isn't defined as anything anywhere - are you using Tag Helpers or something? MVC itself doesn't lowercase all attributes.
Looking at view source, it appears that it is being rendered by razor as written, but when the element actually appears in chrome, it is lower-cased. I can only assume this is a chrome "feature".
I have an Umbraco CMS loosely working with ReactJS.net. I've got a root <App> component which takes an array prop of (Umbraco Node ID and Path) objects, used to generated a <Route> for each page in the site using a <Content> comp. <App> is rendered in an UmbracoViewPage and renders fine in a client browser - with #Html.ReactInitJavaScript(), it gets hydrated as expected.
The <Content> component loads up the page HTML using dangerouslySetInnerHTML. I've got a few custom Umbraco grid editors which, instead of generating conventional markup in the ASP .NET view, instead call #Html.React() to render a custom React component which might take a prop or two.
On initial page load, the grid HTML is generated server-side and these nested components work fine in the browser, because ReactJS.net is passing ReactDOM.hydrate() calls for each grid component (triggered by #Html.ReactInitJavaScript()).
BUT as soon as there is a frontend route change, the <App> mounts the relevant <Content> comp based on the path and this calls an Umbraco SurfaceController with the Umbraco Node ID. The page grid HTML for that node is returned and loaded as before using dangerouslySetInnerHTML.
The problem is I now have raw HTML which includes multiple React components which need hydrating. Because it's loading in the browser, there is no longer a #Html.ReactInitJavaScript() call hydrating all the components individually.
How can I achieve this?
Note: Answering my own question in case it helps anyone who is playing with Umbraco and React and is aiming for a tighter integration.
TL;DR - Include a list of component names, React IDs and props in my content API responses, allowing my frontend code to handle it much the same as ReactJS.NET's #Html.ReactInitJavaScript helper does (I think).
My solution was to modify my SurfaceController to include a list all of the React components rendered in the markup. So it does much the same as ReactJS.NET's #Html.ReactInitJavaScript helper but in my SurfaceController API method.
I extended ReactJS.NET's #Html.React helper so that details about the component called are also added to a custom helper service I named ReactComponentHydrator (gist, per-request singleton)*. For each component, I store the component name (e.g. Component.ExampleComponent), the React ID included in the HTML markup (e.g. react_d1gC4eKqaUatZWfAdtjkTA) and the props sent with it.
From that, in the frontend code I am to create and hydrate each component once the HTML has been loaded via dangerouslySetInnerHTML.
*ReactJS.NET does seem to keep track of each component called but this is internal and not exposed through any API I could find.
I'am new in Angular2 and now I would like to change my website to Angular2,and in cshtml file we can show specific HTML with razor like:
#if(User.IsInRole("Admin"))
{
<span>Admin can see here only!</span>
}
And now in Angular2 there's no cshtml,my choice is use AJAX to get the role and put in a variable or LocalStorage,is there any better practice?thanks
Yes, there is.
In Angular 2 you could use if conditions as well but in a different manner.
For example:
<div *ngIf="isAdmin" > Admin can see here only! </div>
This means that this div will be shown only when the isAdmin value is true.
And the is admin true should be set on your .ts (typescript) file where you actually will have the app logic.
I'm working on an ASP.net MVC 3 application. I have an external classic ASP file that renders a fragment of a page.
I understand that in ASP.net MVC 3, I can define a partial view to contain a fragment of HTML that I want to reuse on multiple pages.
The basic idea that I have is that I would like to use an external classic ASP file to render a fragment of HTML in my ASP.net MVC 3 application.
I would like to use it with something like Html.Partial, but that won't work because a classic ASP file is obviously not an MVC partial view.
Another way of doing this would be to add the content of the file to the page with AJAX, but I don't want to add the overhead of another AJAX call to my page. What might be the solution I'm looking for?
Plain HTML: Just read it from disk and output it with #Html.Raw().
Asp or other dynamically created content: You may use HttpWebRequest to get the html markup, and then insert into you own view. You may want to cache the response.
For convenience, you may create extension methods for both methods.
Create a Controller Action that makes the external call and returns the content:
Html.RenderAction("GetContent","ExternalASP"); //GetContent- Action, ExternalASP- Controller
I have HTML Pages in my ASP.net MVC project. How can i render these pages with dynamic values.
Index.html
< input type="text" value=<%=Dynamic Value Here%> />
You can't since HTML files will not be parsed by the ASP.NET MVC view engine and it won't understand the server side syntax you will need to insert dynamic values. In order to do this you will need to translate your HTML files into aspx files to use the webforms view engine syntax of <%: %> or cshtml files to use the razor syntax of #. Now you will be able to insert dynamic values since the view engine will insert those values into the HTML that is returned to the browser to be rendered.