MVC importing lpx-avatar component #5717

WilliamT created one year ago

ABP Framework version: v7.3.0
UI Type: MVC
Database System: EF Core (SQL Server, Oracle, MySQL, PostgreSQL, etc..)
Tiered (for MVC) or Auth Server Separated (for Angular): yes
Exception message and full stack trace:
Steps to reproduce the issue:

Hi,

I would like to create my custom page with empty layout, and i need to import the user menu I want that only without any toolbar menu.

maliming created one year ago

Support Team Fullstack Developer

What theme are you using now?

Lepton or LeptonX? mvc or angular

Thanks

WilliamT created one year ago

Hi,

I am using LeptonX with MVC

Thanks

WilliamT created one year ago

I believe the fastest way if I can get the component code that i can insert in the ToolBarContributor.cs If I can get this as soon as possible, that would be great.

Regards,

maliming created one year ago

Support Team Fullstack Developer

OK I will share the source code of the layout with you. You can tell me which source code you need.

liming.ma@volosoft.com

Please send a mail to me, Thanks

maliming created one year ago

Support Team Fullstack Developer

WilliamT created one year ago

Thanks,

I have sent the email

WilliamT created one year ago

Hi,

Just confirming If you have replied to my email? as it may be filtered on my end.

Regards,

maliming created one year ago

Support Team Fullstack Developer

Sent. :)

WilliamT created one year ago

Hi,

Thank you.

However, I am missing the Js functionality especially when i click on the icon, the menu does not show. Can you help me?

Thanks,

maliming created one year ago

Support Team Fullstack Developer

Can you create a new template and add your component code to reproduce the problem?

liming.ma@volosoft.com

WilliamT created one year ago

Hi,

Sorry I don't understand. I just use the code that you sent then on the page that I want to implement the component i used.

@await Component.InvokeAsync(typeof(Components.UserMenu.UserMenuViewComponent))

maliming created one year ago

Support Team Fullstack Developer

Can you share a simple project?

I will download and check. Thanks

WilliamT created one year ago

Hi,

Do I send the sample via email?

Regards,

maliming created one year ago

Support Team Fullstack Developer

Yes You can run abp clean command and remove the node_modules, then compess the folder.

WilliamT created one year ago

Hi,

Would it be possible to receive a sample code from you instead? Apologies been very busy with work.

Regards,

WilliamT created one year ago

Hi also,

Im using

@{Layout = ThemeManager.CurrentTheme.GetEmptyLayout();} in one of my cshtml. but it is wrapped with a card with class="m-5"

how do i remove that.

maliming created one year ago

Support Team Fullstack Developer

Can you share a simple project? this project reproduces your problem, Then I will download and check. Thanks

liming.ma@volosoft.com

WilliamT created one year ago

email sent

WilliamT created one year ago

Hi,

Sorry I am not allowed to create a sample project. But I copied the page I am working now but removed the sensitive information.

There are few things I wanted to add:

Footer at the bottom
After it got rendered, it is wrapped with div with class “m-5 card mb-3” and I want to remove that.

Hope you can help.

Thanks

@page
@using Volo.Abp.AspNetCore.Mvc.UI.Theming;
@using Microsoft.AspNetCore.Mvc.Localization
@using test.Localization
@inject IThemeManager ThemeManager
@inject IHtmlLocalizer L
@model test.Web.Pages.IndexModel
@{
Layout = ThemeManager.CurrentTheme.GetEmptyLayout();
}
@section scripts
{

<br>
<br>
}
@await Component.InvokeAsync(typeof(Components.Toolbar.UserMenu.UserMenuViewComponent))
<div>
	<div class="text-center">
		<abp-card>
			<abp-card-body>
				<h1>test</h1>
			</abp-card-body>
		</abp-card>
	</div>
</div>

<div class="">
	<div class="">
		<abp-card>
			<abp-card-body>
				<abp-row class="mb-3">
					<abp-column size-md="_12">
						<form id="SearchForm" action="/search" autocomplete="off">
							<div id="search-container" class="input-group container">
								<div class="form-control px-0 bg-white">
									<input class="border-0 bg-white form-control page-search-filter-text" id="FilterText" name="query" placeholder="@L["Search"]" />
								</div>
								<abp-button button-type="Primary" type="submit">Search</abp-button>
							</div>
						</form>
					</abp-column>
				</abp-row>
			</abp-card-body>
		</abp-card>
	</div>
</div>

<abp-modal-footer></abp-modal-footer>
<footer class="text-center row">
	@Html.Partial("~/Themes/LeptonX/Layouts/Application/_Footer.cshtml")
</footer>

I also notice this Add PageContent layout hook. https://github.com/abpframework/abp/pull/4573/files

Is there a way to add a custom page content layout hook for a specific page? I believe that can help solve my problem.

Regards,

maliming created one year ago

Support Team Fullstack Developer

Is there a way to add a custom page content layout hook for a specific page?

This feature works on layout pages, for specific pages you should replace it with a custom page.

maliming created one year ago

Support Team Fullstack Developer

There are few things I wanted to add:

Footer at the bottom

After it got rendered, it is wrapped with div with class “m-5 card mb-3” and I want to remove that.

You can use pure html code instead of abp's taghelper in the page

WilliamT created one year ago

hi

Is there a way to add a custom page content layout hook for a specific page?

This feature works on layout pages, for specific pages you should replace it with a custom page.

Sorry can you clarify it further? im using this

Layout = ThemeManager.CurrentTheme.GetEmptyLayout();

then how do i add LayoutHook.PageContent.First because whatever i put in my cshtml will be under @RenderPage() right?

WilliamT created one year ago

There are few things I wanted to add:

Footer at the bottom

After it got rendered, it is wrapped with div with class “m-5 card mb-3” and I want to remove that.

You can use pure html code instead of abp's taghelper in the page

the <div> i mentioned above was built in from using the empty layout from the abp.

would be great if i can get the code for the empty layout cshtml as well so i can customise it as i still need some built in code such as the lpx-wrapper, or css & js imports, etc.