this is the logic for each file: CreateModal.cshtml
@page
@using Microsoft.Extensions.Localization
@using KnoroomsPayments.Localization
@using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Modal
@inject IStringLocalizer<KnoroomsPaymentsResource> L
@model KnoroomsPayments.Web.Pages.Products.CreateModalModel
@{
Layout = null;
}
@section scripts {
<abp-script src="/libs/vue/vue.min.js" />
<abp-script src="/Pages/Products/createModal.js" />
}
@section styles {
<abp-style src="/Pages/Products/CreateModal.css" />
}
<script>
var app = new Vue({
el: '#createProductApp',
data: {
currentStep: 1,
activeTab: 'tab2',
pricingModelsList:[
{
"value": "",
"text": "--- select ---"
},
{
"value": "",
"text": "Flat rate"
},
{
"value": "",
"text": "Package pricing"
},
{
"value": "",
"text": "Customer chooses price"
}
],
currencyCodesList: [
{
"value": "",
"text": "--- select ---"
},
{
"value": "dop",
"text": "DOP"
},
{
"value": "cad",
"text": "CAD"
},
{
"value": "usd",
"text": "USD"
}
],
billingPeriodList: [
{
"value": "",
"text": "--- select ---"
},
{
"value": "day",
"text": "Daily"
},
{
"value": "week",
"text": "Weekly"
},
{
"value": "month",
"text": "Monthly"
},
{
"value": "year",
"text": "Yearly"
}
],
product: {
name: '',
description: '',
unitAmount:'',
currency:'',
billingScheme: ''
}
},
methods: {
createProduct() {
fetch('/products/CreateModal', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'RequestVerificationToken': document.getElementsByName("__RequestVerificationToken")[0].value
},
body: JSON.stringify(this.product)
})
.then(response => {
if (response.ok) {
abp.notify.success('Data saved successfully');
$('#productModal').modal('hide');
}
else {
abp.notify.error('Data not saved');
}
})
.catch(error => {
abp.notify.error('network error');
});
},
nextStep() {
this.currentStep = 2;
},
previousStep() {
this.currentStep = 1;
}
}
});
</script>
<form data-ajaxForm="true" asp-page="/Products/CreateModal" autocomplete="off">
<abp-modal id="productModal">
<abp-modal-header title="@L["NewProduct"].Value"></abp-modal-header>
<abp-modal-body id="createProductApp">
<div v-if="currentStep === 1">
<div>
<label class="form-label">Name(required)</label>
<input type="text" v-model="product.name" class="form-control" />
</div>
<div>
<label class="form-label">Description</label>
<input type="text" v-model="product.description" class="form-control" />
</div>
<div class="buttonDiv">
<input type="button" class="btn btn-primary" v-on:click="nextStep" value="Next">
</div>
</div>
<div v-if="currentStep === 2">
<div class="tabDiv">
<button class="button" type="button" :class="{ active: activeTab === 'tab1'}" v-on:click="activeTab = 'tab1'">
<span class="first-line">Recurring</span>
<br/>
<span class="second-line">Charge on ongoing fee</span>
</button>
<button class="button" type="button" :class="{ active: activeTab === 'tab2'}" v-on:click="activeTab = 'tab2'">
<span class="first-line">One-off</span>
<br />
<span class="second-line">Charge a one time fee</span>
</button>
</div>
<div>
<label class="form-label">Choose your pricing model:</label>
<div>
<select class="form-select form-control" v-model="product.billingScheme">
<option v-for="item in pricingModelsList" :value="item.value">{{item.text}}</option>
</select>
</div>
</div>
<div v-if="activeTab === 'tab1'">
<label class="form-label">Billing Scheme</label>
<input type="text" v-model="product.billingScheme" class="form-control" />
</div>
<div v-if="activeTab === 'tab2'">
<div>
<h4>Price</h4>
</div>
<div>
<label class="form-label">Amount (required)</label>
<div class="currencyDiv">
<input type="text" class="form-control currencyInput" v-model="product.unitAmount" />
<select class="form-select form-control currencySelect" v-model="product.currency">
<option v-for="item in currencyCodesList" :value="item.value">{{item.text}}</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-secondary" v-on:click="previousStep" value="Back">
<input type="button" class="btn btn-primary" data-busy-text="Saving..." v-on:click="createProduct" value="Create Product">
</div>
</div>
</abp-modal-body>
</abp-modal>
</form>
CreateModal.cshtml.cs
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Rendering;
using KnoroomsPayments.Products;
using Stripe;
using System.Data;
using KnoroomsPayments.Migrations;
using System;
using KnoroomsPayments.Price;
namespace KnoroomsPayments.Web.Pages.Products
{
public class CreateModalModel : KnoroomsPaymentsPageModel
{
[BindProperty]
public Stripe.Price Price { get; set; } = new Stripe.Price();
[HiddenInput]
[BindProperty(SupportsGet = true)]
public List<SelectListItem> ListPriceTypes { get; set; }
[HiddenInput]
[BindProperty(SupportsGet = true)]
public List<SelectListItem> ListPricingModels { get; set; }
[HiddenInput]
[BindProperty(SupportsGet = true)]
public List<SelectListItem> ListCurrencyCodes { get; set; }
[HiddenInput]
[BindProperty(SupportsGet = true)]
public List<SelectListItem> ListRecurringInterval { get; set; }
private readonly ProductsAppService _productsAppService;
private readonly StripeProductAppService _stripeProductAppService;
private readonly PriceAppService _stripePriceAppService;
public SelectList ProductGroupSelectList;
public CreateModalModel(
ProductsAppService productsAppService,
StripeProductAppService stripeProductAppService,
PriceAppService stripePriceAppService)
{
_productsAppService = productsAppService;
_stripeProductAppService = stripeProductAppService;
_stripePriceAppService = stripePriceAppService;
}
public async Task OnGetAsync()
{
ListPriceTypes = new List<SelectListItem> {
new SelectListItem {
Value = "",
Text = "--- select ---"
},
new SelectListItem {
Value = "recurring",
Text = "Recurring"
},
new SelectListItem {
Value = "one_time",
Text = "One-off"
}
}.ToList();
ListPricingModels = new List<SelectListItem> {
new SelectListItem {
Value = "",
Text = "--- select ---"
},
new SelectListItem {
Value = "per_unit",
Text = "Flat Rate"
},
new SelectListItem {
Value = "tiered",
Text = "Tiered"
}
}.ToList();
ListCurrencyCodes = new List<SelectListItem> {
new SelectListItem {
Value = "",
Text = "--- select ---"
},
new SelectListItem {
Value = "CAD",
Text = "Canadian dollar"
},
new SelectListItem {
Value = "USD",
Text = "United States dollar"
}
}.ToList();
ListRecurringInterval = new List<SelectListItem> {
new SelectListItem {
Value = "",
Text = "--- select ---"
},
new SelectListItem {
Value = "day",
Text = "Daily"
},
new SelectListItem {
Value = "month",
Text = "Monthly"
},
new SelectListItem {
Value = "week",
Text = "Weekly"
},
new SelectListItem {
Value = "year",
Text = "Yearly"
}
}.ToList();
}
public async Task<IActionResult> OnPostAsync([FromBody] StripeProduct uXProduct)
{
Product productToCreate = new Product();
Stripe.Price priceToCreate = new Stripe.Price();
productToCreate.Name = uXProduct.Name;
productToCreate.Description = uXProduct.Description;
productToCreate = await _productsAppService.CreateProductAsync(productToCreate);
if (productToCreate != null)
{
priceToCreate.BillingScheme = "per_unit";
priceToCreate.UnitAmount = uXProduct.UnitAmount;
priceToCreate.UnitAmountDecimal = uXProduct.UnitAmount;
priceToCreate.Currency = uXProduct.Currency;
priceToCreate.Product = new Product();
priceToCreate.Product.Id = productToCreate.Id;
priceToCreate = await _stripePriceAppService.CreatePriceAsync(priceToCreate);
}
if (priceToCreate != null &&
productToCreate != null)
{
CreateUpdateStripeProductDto stripeProduct = new CreateUpdateStripeProductDto();
stripeProduct.Name = productToCreate.Name;
stripeProduct.Description = productToCreate.Description;
stripeProduct.StripeProductId = productToCreate.Id;
stripeProduct.DefaultPriceId = priceToCreate.Id.ToString();
stripeProduct.Object = "product";
stripeProduct.StripePriceId = priceToCreate.Id;
stripeProduct.BillingScheme = "per_unit";
stripeProduct.UnitAmount = priceToCreate.UnitAmount;
stripeProduct.UnitAmountDecimal = priceToCreate.UnitAmount;
stripeProduct.Currency = priceToCreate.Currency;
_stripeProductAppService.CreateAsync(stripeProduct);
}
return NoContent();
}
}
}
CreateModal.css
.buttonDiv {
padding: 5px;
display: flex;
flex-shrink: 0;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
}
.tabDiv {
display: flex;
}
.button {
margin: 5px;
flex: 1;
display: inline-block;
font-weight: 400;
text-align: left;
border: 1px solid transparent;
padding: .375rem .75rem;
font-size: 12px;
line-height: 1.5;
border-radius: 8px;
color: black;
background: #fcfffe;
border-color: #eeeeee;
}
.active {
border-color: #3DB9F5;
box-shadow: 0 -1px 5px 0 #3DB9F5, 0 2px 10px 0 #3DB9F5;
border-width: 2px;
background: #f5f6fd;
color: #3DB9F5;
}
.first-line {
font-weight: bold;
}
.second-line {
color:black;
}
.currencyDiv {
display: flex;
}
.currencySelect {
flex: 25%;
}
.currencyInput {
flex: 75%;
}
ABP Framework version: v8.2.0 UI Type: MVC Database System: EF Core (PostgreSQL) Tiered (for MVC): no
I am using Vue.js in the ABP Create Modal to post the data from the razor page to the UI elements for create and edit. Instead of submitting the data using the ABP save button, I'm posting the data to the razor page using vue js. Due to this once the razor page returns the data, the index page is not recognizing the success message and it is not refreshing the index page.
I am trying to handle the success message to refresh the page using the createmodal. Onresult() event handler. Is there any other way to handle the success message from the create modal in the index page.
Is there a way to reuse the same create modal for edit also using vuejs. In that case how to populate the data from the razor page code behind to the UI elements for edit.
Or, is there a end to end sample using vue.js connected to with ABP framework model manager that I can use as a guide?
Or are there any other mechanism to build responsive UIs on top of MVC pages aside from Vue that I can explore?
any answers will be greatly appreciated
Thanks very much, the issue has been identified and closed. Much appreciated.
[07:33:12 ERR] Failed executing DbCommand (4ms) [Parameters=[@p0='?' (DbType = Guid), @p1='?', @p2='?' (DbType = DateTime), @p3='?' (DbType = Guid), @p4='?' (DbType = Guid), @p5='?' (DbType = DateTime), @p6='?', @p7='?' (DbType = Int32), @p8='?', @p9='?' (DbType = Boolean), @p10='?' (DbType = DateTime), @p11='?' (DbType = Guid), @p12='?' (DbType = DateTime), @p13='?' (DbType = Boolean), @p14='?' (DbType = DateTime), @p15='?', @p16='?', @p17='?', @p18='?', @p19='?', @p20='?', @p21='?' (DbType = Boolean), @p22='?', @p23='?' (DbType = Guid), @p24='?'], CommandType='Text', CommandTimeout='30']
INSERT INTO "AbpUsers" ("Id", "ConcurrencyStamp", "CreationTime", "CreatorId", "DeleterId", "DeletionTime", "Email", "EntityVersion", "ExtraProperties", "IsActive", "LastModificationTime", "LastModifierId", "LastPasswordChangeTime", "LockoutEnabled", "LockoutEnd", "Name", "NormalizedEmail", "NormalizedUserName", "PasswordHash", "PhoneNumber", "SecurityStamp", "ShouldChangePasswordOnNextLogin", "Surname", "TenantId", "UserName")
VALUES (@p0, @p1, @p2, @p3, @p4, @p5, @p6, @p7, @p8, @p9, @p10, @p11, @p12, @p13, @p14, @p15, @p16, @p17, @p18, @p19, @p20, @p21, @p22, @p23, @p24)
RETURNING "AccessFailedCount", "EmailConfirmed", "IsDeleted", "IsExternal", "PhoneNumberConfirmed", "TwoFactorEnabled";
[07:33:13 ERR] An exception occurred in the database while saving changes for context type 'Ambar.SaaS.IdentityService.EntityFrameworkCore.IdentityServiceDbContext'.
Microsoft.EntityFrameworkCore.DbUpdateException: An error occurred while saving the entity changes. See the inner exception for details.
---> System.ArgumentException: Cannot write DateTime with Kind=Local to PostgreSQL type 'timestamp with time zone', only UTC is supported. Note that it's not possible to mix DateTimes with different Kinds in an array, range, or multirange. (Parameter 'value')
at Npgsql.Internal.Converters.DateTimeConverterResolver`1.Get(DateTime value, Nullable`1 expectedPgTypeId, Boolean validateOnly)
at Npgsql.Internal.Converters.DateTimeConverterResolver.<>c.<CreateResolver>b__0_0(DateTimeConverterResolver`1 resolver, DateTime value, Nullable`1 expectedPgTypeId)
at Npgsql.Internal.Converters.DateTimeConverterResolver`1.Get(T value, Nullable`1 expectedPgTypeId)
at Npgsql.Internal.PgConverterResolver`1.GetAsObjectInternal(PgTypeInfo typeInfo, Object value, Nullable`1 expectedPgTypeId)
at Npgsql.Internal.PgResolverTypeInfo.GetResolutionAsObject(Object value, Nullable`1 expectedPgTypeId)
at Npgsql.Internal.PgTypeInfo.GetObjectResolution(Object value)
at Npgsql.NpgsqlParameter.ResolveConverter(PgTypeInfo typeInfo)
at Npgsql.NpgsqlParameter.ResolveTypeInfo(PgSerializerOptions options)
at Npgsql.NpgsqlParameterCollection.ProcessParameters(PgSerializerOptions options, Boolean validateValues, CommandType commandType)
at Npgsql.NpgsqlCommand.ExecuteReader(Boolean async, CommandBehavior behavior, CancellationToken cancellationToken)
at Npgsql.NpgsqlCommand.ExecuteReader(Boolean async, CommandBehavior behavior, CancellationToken cancellationToken)
at Npgsql.NpgsqlCommand.ExecuteDbDataReaderAsync(CommandBehavior behavior, CancellationToken cancellationToken)
at Microsoft.EntityFrameworkCore.Storage.RelationalCommand.ExecuteReaderAsync(RelationalCommandParameterObject parameterObject, CancellationToken cancellationToken)
at Microsoft.EntityFrameworkCore.Storage.RelationalCommand.ExecuteReaderAsync(RelationalCommandParameterObject parameterObject, CancellationToken cancellationToken)
at Microsoft.EntityFrameworkCore.Update.ReaderModificationCommandBatch.ExecuteAsync(IRelationalConnection connection, CancellationToken cancellationToken)
--- End of inner exception stack trace ---
at Microsoft.EntityFrameworkCore.Update.ReaderModificationCommandBatch.ExecuteAsync(IRelationalConnection connection, CancellationToken cancellationToken)
at Microsoft.EntityFrameworkCore.Update.Internal.BatchExecutor.ExecuteAsync(IEnumerable`1 commandBatches, IRelationalConnection connection, CancellationToken cancellationToken)
at Microsoft.EntityFrameworkCore.Update.Internal.BatchExecutor.ExecuteAsync(IEnumerable`1 commandBatches, IRelationalConnection connection, CancellationToken cancellationToken)
at Microsoft.EntityFrameworkCore.Update.Internal.BatchExecutor.ExecuteAsync(IEnumerable`1 commandBatches, IRelationalConnection connection, CancellationToken cancellationToken)
at Microsoft.EntityFrameworkCore.ChangeTracking.Internal.StateManager.SaveChangesAsync(IList`1 entriesToSave, CancellationToken cancellationToken)
at Microsoft.EntityFrameworkCore.ChangeTracking.Internal.StateManager.SaveChangesAsync(StateManager stateManager, Boolean acceptAllChangesOnSuccess, CancellationToken cancellationToken)
at Npgsql.EntityFrameworkCore.PostgreSQL.Storage.Internal.NpgsqlExecutionStrategy.ExecuteAsync[TState,TResult](TState state, Func`4 operation, Func`4 verifySucceeded, CancellationToken cancellationToken)
at Microsoft.EntityFrameworkCore.DbContext.SaveChangesAsync(Boolean acceptAllChangesOnSuccess, CancellationToken cancellationToken)
Microsoft.EntityFrameworkCore.DbUpdateException: An error occurred while saving the entity changes. See the inner exception for details.
---> System.ArgumentException: Cannot write DateTime with Kind=Local to PostgreSQL type 'timestamp with time zone', only UTC is supported. Note that it's not possible to mix DateTimes with different Kinds in an array, range, or multirange. (Parameter 'value')
*EntityFrameworkCoreModule.cs inside the .EntityFrameworkCore project. *DbContextFactory.cs inside the .EntityFrameworkCore project.
Depending on your solution structure, you may find more UseSqlServer() calls that need to be changed. 4. Change the Connection Strings Update all appsettings.json files in your solution to use PostgreSQL connection strings. You typically will change the appsettings.json inside the .DbMigrator and .Web projects, but it depends on your solution structure. For details on PostgreSQL connection string options, see connectionstrings.com. 5. Re-Generate the Migrations Since EF Core Migrations depend on the selected DBMS provider, changing the DBMS provider will cause migration issues. Follow these steps:
Delete the Migrations folder under the .EntityFrameworkCore project and re-build the solution. Run Add-Migration "Initial" on the Package Manager Console. Select the .DbMigrator (or .Web) project as the startup project in the Solution Explorer and select the .EntityFrameworkCore project as the default project in the Package Manager Console.
This will create a database migration with all database objects (tables) configured. Then, run the .DbMigrator project to create the database and seed the initial data. 6. Run the Application After completing the above steps, your application should be ready to run with PostgreSQL as the database provider. Simply run the application and ensure everything works as expected.
