Open Closed

Create Customize Page #2118


User avatar
0
LawrenceKwan created

Hello All

I have create new menu list by CMS kit module and want to integrate customize page with abp commercial. As I am integrating other system with abp commercial, how to make customize page with calling http request on C# and show returned viewbag on web. Any related document on this? thanks.

  • ABP Framework version: v4.4.4
  • UI type: MVC
  • DB provider: EF Core
  • Tiered (MVC) or Identity Server Separated (Angular): no

7 Answer(s)
  • User Avatar
    0
    enisn created
    Support Team .NET Developer

    Hello @LawrenceKwan

    You can learn more about customizing pages with following documentation: https://docs.abp.io/en/abp/latest/UI/AspNetCore/Customization-User-Interface


    You can place following page into your project to replacement

    Create following class into exact path under your Web project:

    • Pages/Public/CmsKit/Pages/Index.cshtml.cs
     public class MyIndexModel : CommonPageModel
    {
        [BindProperty(SupportsGet = true)] 
        public string Slug { get; set; }
    
        protected IPagePublicAppService PagePublicAppService { get; }
    
        public PageDto Page { get; set; }
    
        public string YourParameter { get; set; }
    
        public IndexModel(IPagePublicAppService pagePublicAppService)
        {
            PagePublicAppService = pagePublicAppService;
        }
    
        public async Task<IActionResult> OnGetAsync()
        {
            Page = await PagePublicAppService.FindBySlugAsync(Slug);
    
            YourParameter = "Some result from request";
            
            if (Page == null)
            {
                return NotFound();
            }
    
            return Page();
        }
    }
    

    Then add following page into exact path under your Web project:

    • Pages/Public/CmsKit/Pages/Index.cshtml
    @page
    @using Microsoft.AspNetCore.Mvc.Localization
    @using Volo.CmsKit.Localization
    @using Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Pages
    
    @* ** Don't forget to Update Model from here: ** *@
    @model MyIndexModel
    
    @inject IHtmlLocalizer<CmsKitResource> L
    
    @section styles{
        
        <abp-style src="/Pages/Public/CmsKit/Pages/index.css" />
    
        <style>
            @Html.Raw(Model.Page.Style)
        </style>
    }
    
    @section scripts{
        <script>
            @Html.Raw(Model.Page.Script)
        </script>
    }
    
    @* ** You can render anything before or after page content ** *@
    <h1>@Model.YourParameter</h1>
    
    @await Component.InvokeAsync(typeof(DefaultPageViewComponent),
        new
        {
            pageId = Model.Page.Id,
            title = Model.Page.Title,
            content = Model.Page.Content
        })
    
  • User Avatar
    0
    LawrenceKwan created

    Hello @LawrenceKwan

    You can learn more about customizing pages with following documentation: https://docs.abp.io/en/abp/latest/UI/AspNetCore/Customization-User-Interface


    You can place following page into your project to replacement

    Create following class into exact path under your Web project:

    • Pages/Public/CmsKit/Pages/Index.cshtml.cs
     public class MyIndexModel : CommonPageModel 
    { 
        [BindProperty(SupportsGet = true)]  
        public string Slug { get; set; } 
     
        protected IPagePublicAppService PagePublicAppService { get; } 
     
        public PageDto Page { get; set; } 
     
        public string YourParameter { get; set; } 
     
        public IndexModel(IPagePublicAppService pagePublicAppService) 
        { 
            PagePublicAppService = pagePublicAppService; 
        } 
     
        public async Task<IActionResult> OnGetAsync() 
        { 
            Page = await PagePublicAppService.FindBySlugAsync(Slug); 
     
            YourParameter = "Some result from request"; 
             
            if (Page == null) 
            { 
                return NotFound(); 
            } 
     
            return Page(); 
        } 
    } 
    

    Then add following page into exact path under your Web project:

    • Pages/Public/CmsKit/Pages/Index.cshtml
    @page 
    @using Microsoft.AspNetCore.Mvc.Localization 
    @using Volo.CmsKit.Localization 
    @using Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Pages 
     
    @* ** Don't forget to Update Model from here: ** *@ 
    @model MyIndexModel 
     
    @inject IHtmlLocalizer<CmsKitResource> L 
     
    @section styles{ 
         
        <abp-style src="/Pages/Public/CmsKit/Pages/index.css" /> 
     
        <style> 
            @Html.Raw(Model.Page.Style) 
        </style> 
    } 
     
    @section scripts{ 
        <script> 
            @Html.Raw(Model.Page.Script) 
        </script> 
    } 
     
    @* ** You can render anything before or after page content ** *@ 
    <h1>@Model.YourParameter</h1> 
     
    @await Component.InvokeAsync(typeof(DefaultPageViewComponent), 
        new 
        { 
            pageId = Model.Page.Id, 
            title = Model.Page.Title, 
            content = Model.Page.Content 
        }) 
    

    Hi thanks for your reply. I am stuck because I cannot see the module index pages. Here are my project structure and cannot find your CmskitIndex.cs page (Pages/Public/CmsKit/Pages/Index.cshtml.cs)

    I am sure I have install my CMSKit module:

    If I dont have the source code, I afraid I cannot do the above Customize Page ? I am right now doing proof of concept of the project, only can upgrade ABP commercial lisence after PoC is done. Are there any way to do Customize Page without source code?(with nuget only)

  • User Avatar
    0
    enisn created
    Support Team .NET Developer

    You have to create into your project Pages/Public/CmsKit/Pages/Index.cshtml.cs and Pages/Public/CmsKit/Pages/Index.cshtml with content which I presented

  • User Avatar
    0
    LawrenceKwan created

    You have to create into your project Pages/Public/CmsKit/Pages/Index.cshtml.cs and Pages/Public/CmsKit/Pages/Index.cshtml with content which I presented

    If I do have the cmsKit module source code, can I do it? If yes, I have created the class and page but the model is missing, MyIndexModel. What's Next?

  • User Avatar
    0
    enisn created
    Support Team .NET Developer

    You have to create into your project Pages/Public/CmsKit/Pages/Index.cshtml.cs and Pages/Public/CmsKit/Pages/Index.cshtml with content which I presented

    If I do have the cmsKit module source code, can I do it? If yes, I have created the class and page but the model is missing, MyIndexModel. What's Next?

    I've just write it as MyIndexModel as a sample. You can name it whatever you want. And don't miss to add 'using' namespace of that model.

    For the second question, yes you can directly make changes in source code of cmskit.

  • User Avatar
    0
    LawrenceKwan created

    MyIndexModel

    I have make serveral pages and all point to the index page. If I add second page, how to do web routing?

    I expect it should be a typical MVC structure but it does not have controller. I think the .cshtml.cs act as controller function. How to triggle the function in .cshtml.cs file?

  • User Avatar
    0
    LawrenceKwan created

    I got the answer, the menu should config on ConfigureMainMenuAsync on XXXXXXMenuContributor class

Made with ❤️ on ABP v9.1.0-preview. Updated on December 05, 2024, 12:19