Is it possible to return '*.htm' files from the ASP.Net MVC4 Web API application?
I am trying to use AngularJs to manage the client side views and when I include the following commend on my page:
<div ng-controller="application.RootController">
<div ng-switch="subview" >
<div ng-switch-when="home" ng-include="'../Views/Angular/customer/overview.htm'"></div>
<div ng-switch-when="admin" ng-include="'../Views/Angular/Admin/home.htm'"></div>
</div>
</div>
I see that this is working as expected on the browser, but the ASP.Net is returning 404 page not found.
Also I am unable to physically browse any of the htm pages, so is there a special thing i need to do in ASP.Net MVC in terms of configuring the routing to return out the htm pages?
Files in the ~/Views folder are not served directly. You should place your HTM pages somewhere else. For example you could have an ~/Angular folder.
your should place static files into '/static' folder
You can call razor #html.partial to display your partial views
<div ng-controller="application.RootController">
<div ng-switch="subview" >
<div ng-switch-when="admin"> #Html.partial("~/Views/Angular/Admin/home.htm")</div>
</div>
</div>
Related
I'm going to start a big project on asp.net core. And I need SPA for just admin panel.
My choice for SPA part is using Blazor web Assembly. and because the first load takes a long time I cant use Blazor for whole client part. I'm going to use ASP.NET Core MVC for other parts.
I don't know how to combine them. Any idea will be appreciated.
PS: for some reasons I don't want to grow separated solutions. I need all in one.
I need web assembly not server. I already checked adding server side Blazor to an existing ASP.NET Core MVC project.
Thanks a lot
edited: imagine I make 2 project in same solution. Is there any way to move from a view in mvc project to my blazor project by routing? like this : defining a link with this
href="myWebSite.come/admin/?username=john&password=123456">Enter Admin Panel
in mvc view and by clicking on this link open my blazor project. i mean is it possible to navigate between projects by routing and also use a same domain for both project?
I found out the solution in Fiodar Sazanavets - SignalR on .NET 6 - the Complete Guide_ The easiest way to enable real-time two-way HTTP communication on .NET 6 book. its a grate one.
the solution is in page 41. Because of copyright reasons i won't copy the solution here.
Step to Integrate Blazor and MVC in Single Project.
Create asp.net core MVC project from Visual Studio Project Template.
Go to program.cs and Add the following at builder section;
builder.Services.AddServerSideBlazor();
then add the following in the app section
app.MapBlazorHub(configureOptions: options =>
{
options.Transports = HttpTransportType.WebSockets | HttpTransportType.LongPolling;
});
app.MapFallbackToController("Blazor", "Home");
Go to your HomeController; and add the following.
public IActionResult Blazor() => View("_Host");
Create _Host.cshtml in the Home View Folder and the following code;
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
Create App.razor file in the root of your MVC application such as ;
Add the following code to the file;
#using Microsoft.AspNetCore.Components.Routing
#using Microsoft.AspNetCore.Components.Authorization
Sorry, you're not authorized to reach this page.
You may need to log in as a different user.
</Found>
<NotFound>
<h1>Page not found</h1>
<p>Sorry, but there's nothing here!</p>
</NotFound>
Create a Components folder and start Adding the blazor component to the folder. You should create import.razor file in the components folder and add the following code;
#using System.Net.Http
#using Microsoft.AspNetCore.Authorization
#using Microsoft.AspNetCore.Components.Authorization
#using Microsoft.AspNetCore.Components.Forms
#using Microsoft.AspNetCore.Components.Routing
#using Microsoft.AspNetCore.Components.Web
#using Microsoft.JSInterop
#using System.Text.Json
#using Microsoft.Extensions.Options
#using System.IO;
#using Microsoft.Extensions.Configuration
You reference razor component in mvc view such as;
<component type="typeof(MyHomeComponent)" render-mode="ServerPrerendered" />
You also use blazor routing to access blazor component pages.
So Im fairly new to Blazor and .Net Core and Im trying to include a custom TagHelper inside my MainLayout.razor like so:
#addTagHelper *, SmartBreadcrumbs
Inside the _Host file it works as expected, but in any other file Im getting:
The directives #addTagHelper, #removeTagHelper and #tagHelperPrefix are not valid in a component document. Use '#using ' directive instead.
Im not sure what Im missing in order to be able to use the tag inside other files then the _Host.cshtml.
Link to what Im implementing https://github.com/zHaytam/SmartBreadcrumbs
You can't use Html tag Helpers in a Blazor app. There is no such thing.
Note: The _Host.cshtml file is a Razor Pages page, not a Razor Component page. Html tag Helpers can be used in Razor Pages App's pages. Thus you can use Html tag Helpers in the _Host.cshtml file. The component tag helper is used in the _Host.cshtml file to instantiate the Blazor SPA.
<component type="typeof(App)" render-mode="ServerPrerendered" />
Note: SmartBreadcrumbs is written for MVC and Razor Pages Apps, not Blazor. Search for SmartBreadcrumbs implemented with Blazor.
New to asp.net core razor pages (asp.net core 3.1)
How do I change an image corresponding to an info that comes from a remote service? the image is defined at the header part of the app _Layout page.
Do I need to define a shared page to contain that image and #Renderpage within the header part of the _layout page? (Tried to do that but #Renderpage is not recognize d within the header part....)
10x
How do I change an image corresponding to an info that comes from a remote service? the image is defined at the header part of the app _Layout page.
If you call that remote service within your razor page handler, to pass it to the page, you can try to use ViewData, like below.
In page handler
//code logic here
//...
//call remote service and get URL to image
ViewData["myimg"] = "https://xxxx/imgs/xxxx.png";
In _Layout page
<img id="myimg" src="#ViewData["myimg"]" width="25" height="25" />
Besides, if you call that remote service on client side via Ajax etc, you can dynamically change value of src attribute, like below.
$("#myimg").attr("src", "your_img_url_here");
I'd like to set up a controller action in a already existing ASP.NET Core 3.0 MVC project to serve a Blazor app. I've seen something similar with other SPA frameworks in the past, the View for the action just includes contains the script tag with the bundle, there's usually some other setup like having the SPA build placed on wwwroot for the MVC project.
Looking at the Blazor app it seems similar to some extent, where the index.html file includes the wasm script. But I'm honestly not sure where to start to set it up. Any ideas?
Seems you're using Blazor Client Side. Basically, the entry for Blazor Client Side App is the <script> that loads the blazor.webassembly.js. And this script will download all the static assets( *.wasm and *.dlls) dynamically. Note that if you can make these assets available, you can host the Blazor Client Side App even without ASP.NET Core.
Since you're using ASP.NET Core MVC as the server, an easy approach would be :
Add a package reference to Microsoft.AspNetCore.Blazor.Server so that we can serve the *.wasm *.dll files with just one code.
<PackageReference Include="Microsoft.AspNetCore.Blazor.Server" Version="3.0.0-preview9.19465.2" />
Add a project reference to your ClientSide Project so that we can generate the statics from source code. Let's say your client side web assembly app is MyClientSideBlazorApp:
<ProjectReference Include="..\MyClientSideBlazorApp\MyClientSideBlazorApp.csproj" />
And now you can register a middleware within the Startup.cs to serve the static files:
app.UseClientSideBlazorFiles<MyClientSideBlazorApp.Startup>();
app.UseStaticFiles();
Finally, within any page/view that you want to serve the blazor, for example, the Home/Privacy.cshtml view file, add a <script> to load the entry and also a <base> element to make sure the relative path is correct.
#{
Layout = null;
}
<base href="/">
...
<app>Loading...</app>
<script src="/_framework/blazor.webassembly.js"></script>
It should work fine now.
I want to link to the swagger doc for specific API versions from a separate site. Can I pre-select the DiscoverySelector using a url route?
For example, it'd be great if I could do something like this:
<ul>
<li> My API 1.0</li>
<li> My API 2.0</li>
</ul>
I am using Web API 2, so I have to use the Swashbuckle.
Yes you can, and this is a feature of Swagger-ui not Swashbuckle:
Here are examples:
http://petstore.swagger.io/?url=http://swagger-net-test-multiapiversions.azurewebsites.net/swagger/docs/V1_0
http://petstore.swagger.io/?url=http://swagger-net-test-multiapiversions.azurewebsites.net/swagger/docs/V2_0
Here is the multiversion site:
http://swagger-net-test-multiapiversions.azurewebsites.net/swagger/ui/index