This browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
Hi all;
I am creating a somewhat simple CRUD ASP.NET Core 6 app using Blazor. I'm experienced with ASP.NET MVC (6 years ago) but am new to Blazor. And this app needs to auto-layout based on screen size so it looks good on a phone as well as the desktop. It'll be server side Blazor.
I have a couple of questions:
thanks - dave
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(128, 8%, 22%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EA%3C/text%3E%3C/svg%3E)
Hi @David Thielen ,
To create a Asp.net core Blazor application with CRUD operations, you can refer to the following tutorials:
CRUD Operations Using Blazor, .Net 6.0, Entity Framework Core
ASP.NET Core Blazor Server with Entity Framework Core (EF Core)
To create an auto-layout based on screen size, you can try to use Bootstrap, by default the Asp.net core Template has already added the Bootstrap package in your application, and you can find it already add the Bootstrap reference in the index.cshtml page or the layout.cshtml page. So, just check the Bootstrap document and create the responsive layout.
About the last question, you can find them in the Asp.net core official document.
Best regards,
Dillion
Hi Dillon;
Thanks for the links. Any suggestions for the first two questions?
On question #2, I'm hoping there's a WYSIWYG designer like there is for Forms applications. I know I can write it out in bootstrap in the .cshtml file. But having a WYSIWYG designer would be a lot nicer.
thanks - dave
Hi @David Thielen ,
At present, Microsoft doesn't provide this kind of tools for the wireframe and UI designer, and it doesn't provide the extension like the Web Live preview in the .Net Framework. So, In asp.net core Blazor, might be you can try to use hot reload to preview the result.
Besides, you can also submit feedback about this kind of tool on the Asp.net Core Github Issue or Visual Studio, hope they can provide this kind of tools in the future.
Best regards,
Dillion
Hi Dillon;
Thank you. Not the answer I was hoping for but it's helpful to know to stop looking for this.
thanks - dave
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(211.20000000000002, 61%, 30%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EBS%3C/text%3E%3C/svg%3E)
most popular:
figma. has plugins and template to match libraries. some 3rd blazor component libraries will have templates.
https://www.figma.com
sketch (Mac Only)
https://www.sketch.com
adobe cloud or XD
https://www.adobe.com/creativecloud.html
Thank you - figma looks perfect.
I'm leaving the question open for parts 2 - 4.
thanks - dave
1
2 visual studio is best, as the blazor app need to compile to display. this should be simple if you supply template for the wireframe tool
3 Blazor html/css, so any CSS responsive library will work. The typical Microsoft one is bootstrap. Material has one which is good for mobile. office has one for the online office look (though it has better react support than plain html), there are 3rd part components with their own css libraries. If you pick a third party, check that it has figma support.
Hi;
Thanks for the follow-up. Yep, I'll definitely use bootstrap. By any chance do you have an opinion on the Dev Express controls? Their Blazor controls work on bootstrap. I used their Forms controls a lot and found those to be excellent.
thanks - dave