Multiple Windows In ASP.NET Core Blazor - blazor-server-side

I am learning Blazor from a WinForms background. In Winforms I used to create a new form perhaps on a click of a button to display some info or a map then drag it to a second monitor.Can I achieve the same with a blazor app. I see many tutorials on dialogs but I believe that I am correct in thinking that this is not what I am looking for in that you cant move a dialog to diffrent part of the screen or 2nd monitor?

Blazor is a web app technology, so you can't break out of the context of the tab (or tabs) in the same way that you can with WinForms by opening a new form, even dialogs will remain inside the context of the current tab.
I would suggest the following:
Use JS Interop to open a new tab targeting the component that you want opened separate from the current location
Drag that tab onto another monitor.
#inject IJSRuntime JSRuntime
public async Task OpenInNewTab(string url)
{
await JSRuntime.InvokeAsync<object>("open", url, "_blank");
}

Related

The default out-of-the box template for Blazor doesn't work on mobile

If I create a new Blazor application (Server-side or WASM), the default template that is provided with the Counter and Fetch Data menu items doesn't work properly on a mobile device. It run's ok on a desktop browser. Is there something setup incorrectly?
On the mobile, the menu never opens. The hamburger Menu button cannot be tapped. Apart from that, if you manage to navigate by URL to another page, the page keep loading without giving any error.

Transfer Sharepoint WebPart data to application page

I have created a visual web part that has one entry form, it contains 10 textboxes and a submit button to insert the data.
Now on click of submit button it redirects to another page(page is application page deployed under layout folder of same site. this page is added in same web part solution by adding new item).
I'm able to redirect to application page using SPUtility.Redirect(). but not sure about best approach to pass the data from web part page to application.
I think that query string is not a good solution. Also enabling session is manual work on each environment(as i experienced that in one server when i created session variable i got an error to enable it, but in other dev server i was able to do that).
I have done this using a public class in user control .cs page and defined all fields as static variables in side the class. now I'm able to access them in application page added inside layout folder of same project solution. Not sure if it is right approach , but it works

How to use/handle a loader in an MVC app?

in a ASP.NET MVC application that I am currently working there are multiple places in a single page that the user can click. So there is a main menu that's in _layout and for each inidividual page there can be links associated with that page.
I am trying to use a loader which will be shown on every click, mainly where the response takes time but for now it's for every click.
For example in the home page, from the main menu the user can click Students and the loader should come up and hide when the page loads completely. On the students page there can be an ajax call that gets data and binds it to the grid.
So from the time the user clicks on a menu link and the page loads the loader is active/shown. It's hidden once the page loads completely.
The grid can have editing functionality and when the user clicks on any of the CRUD links the loader should show and hide.
I am looking at suggestions on implementing this requirement.
If I can hookup any of the MVC events, that would be cool as I want less of Javascript/jQuery stuff but if Javascript/jQuery is the way then that's fine too.
Currently I don't have anything so anypointers are appreciated.
Assuming AJAX is being used
I don't see a way to keep this server-side without a middle page with a redirect being used (which would just be unnecessary bloat). And, since you're not opposed, you can implement this fairly easily using jQuery and something like blockUI.
I'll let you play with refining the binding to only links you care about, but for now we'll assume all links. Also, MVC should be using jQuery for things like Ajax.Actionlink so we can hijack events like $.ajaxStart and $.ajaxStop:
function showLoadingScreen(enabled){
return enabled ? $.blockUI() : $.unblockUI();
}
$(document).ajaxStart(function(){
showLoadingScreen(true);
}).ajaxStop(function(){
showLoadingScreen(false);
});
Later on you can maybe apply classes to the links you care about and just bind to them (instead of $.ajaxStart) but I'll leave that up to you.

Open Asp.net MVC View page in a Tab

how can i open an asp.net MVC view page in new tab. I have a left panel from where you will redirect to new page and i need to open that page in new tab of existing project not in new window.And also from ExtJS Sencha grid cell click.
Isn't it the anchor attribute target http://www.w3schools.com/tags/tag_a.asp what you are looking for? If yes then look here Opening a link in a new tab for the details how to use it.
You can't to this in a standard way.
Opening pages in new tab or new window, is a browser configurable option, not a programmable manner. So, you haven't any control over it.
However, opening new pages(whether in new tabs or new pages) is achieved in client side by this javascript line:
window.open();
Now, you have two ways in front:
1) You just want to open a new tab/page and request a view. Just set the url in the open() method:
window.open('#Url.Action(...)');
2) You send some data to controller and want to show the results in new tab/page.
First, send an ajax or ordinary post request to the controller and retrieve results in the same view.
Then, open a new tab/page and put that result to it:
var w = window.open();
$(w.document.body).html(content.responseText);

Running multiple extjs4 apps on a liferay portal page

I'm using liferay portal for a website. All of my portlets are based on Extjs4 MVC framework. The problem is that when I add multiple Extjs4 based portlets to a page one of them won't load. I experimented with the app.js files of the apps. and found out that when I added the initialization code to one of the portlets all of them starts running.
for example following code works,
Ext.Loader.setPath('Ext', '/loc-treeview-portlet/loc-treeview/ext-4.0/src');
//loader path for the first app
Ext.Loader.setPath('LocTree', '/loc-treeview-portlet/loc-treeview/app');
//loader path for the second app
Ext.Loader.setPath('ServiceTree', '/service-layer-portlet/service-treeview/app');
// Instantiate the apps which I have created by extending Ext.app.Application
Ext.create('LocTree.app.LocTreeApplication');
Ext.create('ServiceTree.app.ServiceTreeApplication');
But I can't do this in the actual portal because it's not known in advance which of the extjs4 apps will be in the page. Does any body have any idea of how to get these apps to work independently?
Perhaps you can extract the Application definition into the page template that way you know there is only one App launch event. Then each portlet is essentially a view with its own controller. You will need to call init() manually on the controllers though.
The problem seems to be that document 'ready' event in ExtJS4 only initializes one app(portlet) in a given page. So what I did was to wrap all the code app.js file in an AUI().ready() call.
AUI().ready(function(){
// all app.js code here
});