CMS Kit not publish pages in Blazor #10908

1 Answer(s)

• 

  0

  maliming created yesterday

  Support Team Fullstack Developer

  Hi,

  This is a bug in the CMS Kit Pro Blazor admin UI. The edit page doesn't keep the page status (and the layout name) when it loads the page, so every save sends Draft back. The MVC UI has Save as draft and Publish buttons, but they were never added to the Blazor UI.

  We'll fix this in the next patch release. For now, you can replace the page edit component.

  1. Add these two files to your Blazor.Client project, for example under Pages/Cms:

  MyPageUpdate.razor

  @using Blazorise.Markdown
  @using Volo.Abp.AspNetCore.Components.Web
  @using Volo.Abp.AspNetCore.Components.Web.Theming.Layout
  @using Volo.Abp.BlazoriseUI.Components.ObjectExtending
  @using Volo.Abp.DependencyInjection
  @using Volo.CmsKit.Admin.Pages
  @using Volo.CmsKit.Localization
  @using Volo.CmsKit.Pro.Admin.Blazor.Pages.CmsKit
  @inherits PageUpdate
  @attribute [ExposeServices(typeof(PageUpdate))]
  @attribute [Dependency(ReplaceServices = true)]
  @inject AbpBlazorMessageLocalizerHelper<CmsKitResource> LocalizerHelper
  
  <PageHeader Title="@L["Pages"]" BreadcrumbItems="@BreadcrumbItems">
  </PageHeader>
  
  @if (EditingPage != null)
  {
      <Card>
          <CardBody>
              <Form>
                  <Validations @ref="@ValidationsRef" Model="@EditingPage" ValidateOnLoad="false">
                      <Validation MessageLocalizer="@LocalizerHelper.Localize">
                          <Field>
                              <FieldLabel>@L["Title"] *</FieldLabel>
                              <TextInput @bind-Value="EditingPage.Title" Autofocus="true">
                                  <Feedback>
                                      <ValidationError/>
                                  </Feedback>
                              </TextInput>
                          </Field>
                      </Validation>
                      <Validation MessageLocalizer="@LocalizerHelper.Localize">
                          <Field>
                              <FieldLabel>@L["Slug"] *</FieldLabel>
                              <Tooltip Text="@L["PageSlugInformation"]">
                                  <TextInput @bind-Value="EditingPage.Slug" Autofocus="false">
                                      <Feedback>
                                          <ValidationError/>
                                      </Feedback>
                                  </TextInput>
                              </Tooltip>
                          </Field>
                      </Validation>
                      <ExtensionProperties TEntityType="UpdatePageInputDto" TResourceType="CmsKitResource" Entity="@EditingPage" LH="@LocalizerHelper" ModalType="ExtensionPropertyModalType.EditModal" />
                  </Validations>
  
                  <Tabs @bind-SelectedTab="@SelectedTab" RenderMode="TabsRenderMode.LazyLoad">
                      <Items>
                          <Tab Name="content">@L["Content"]</Tab>
                          <Tab Name="script">@L["Script"]</Tab>
                          <Tab Name="style">@L["Style"]</Tab>
                      </Items>
                      <Content>
                          <TabPanel Name="content">
                              <DynamicWidgetMarkdown @ref="@MarkdownRef" @bind-Value="@EditingPage.Content"></DynamicWidgetMarkdown>
                          </TabPanel>
                          <TabPanel Name="script">
                              <Markdown @bind-Value="@EditingPage.Script" LineNumbers="true" HideIcons="@HideIcons" AutoDownloadFontAwesome="false" UploadImage="false">
                                  <Toolbar>
                                      <MarkdownToolbarButton Action="MarkdownAction.Bold"/>
                                  </Toolbar>
                              </Markdown>
                          </TabPanel>
                          <TabPanel Name="style">
                              <Markdown @bind-Value="@EditingPage.Style" LineNumbers="true" HideIcons="@HideIcons" AutoDownloadFontAwesome="false" UploadImage="false">
                                  <Toolbar>
                                      <MarkdownToolbarButton Action="MarkdownAction.Bold"/>
                                  </Toolbar>
                              </Markdown>
                          </TabPanel>
                      </Content>
                  </Tabs>
              </Form>
          </CardBody>
          <CardFooter>
              <Button Color="Color.Primary" Outline Class="me-1" Clicked="@SaveAsDraftAsync">@L["SaveAsDraft"]</Button>
              <Button Color="Color.Primary" Clicked="@PublishAsync">@L["Publish"]</Button>
          </CardFooter>
      </Card>
  }
  

  MyPageUpdate.razor.cs

  using System.Threading.Tasks;
  using Volo.Abp.ObjectExtending;
  using Volo.CmsKit.Admin.Pages;
  using Volo.CmsKit.Pages;
  
  namespace YourProjectName.Blazor.Client.Pages.Cms;
  
  public partial class MyPageUpdate
  {
      protected override async Task GetEditingPageAsync()
      {
          var page = await PageAdminAppService.GetAsync(Id);
  
          EditingPage = new UpdatePageInputDto
          {
              ConcurrencyStamp = page.ConcurrencyStamp,
              Content = page.Content,
              Script = page.Script,
              Style = page.Style,
              Title = page.Title,
              Slug = page.Slug,
              LayoutName = page.LayoutName,
              Status = page.Status
          };
          page.MapExtraPropertiesTo(EditingPage);
      }
  
      protected virtual async Task SaveAsDraftAsync()
      {
          EditingPage.Status = PageStatus.Draft;
          await UpdatePageAsync();
      }
  
      protected virtual async Task PublishAsync()
      {
          EditingPage.Status = PageStatus.Publish;
          await UpdatePageAsync();
      }
  }
  

  2. Register it in the ConfigureServices method of your server Blazor project module as well. The server project doesn't scan the client module, so without this line the server side still renders the old page:

  context.Services.AddTransient<Volo.CmsKit.Pro.Admin.Blazor.Pages.CmsKit.PageUpdate>(
      _ => new YourProjectName.Blazor.Client.Pages.Cms.MyPageUpdate());
  

  After this, the edit page shows Save as draft and Publish instead of Submit. Click Publish to save and keep the page published. Save as draft saves it and unpublishes it. New pages are still created as draft, so create the page first, then open it and click Publish.

  Thanks

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel