Hi Anjali_Musmade,
I tried your codes, but failed.
The url of ajax has parameter 'handler', Will it be handled automatically by the abp framework , or it needs to be handled manually? like this:
namespace XTC.BaaSo.ProductService.Web.Pages.Products;
public class IndexModel : ProductServicePageModel
{
public string NameFilter { get; set; }
public float? PriceFilterMin { get; set; }
public float? PriceFilterMax { get; set; }
// Parse Url?
public async Task<ActionResult> OnGet()
{
string? handler= null;
Microsoft.Extensions.Primitives.StringValues handlerParam;
if (Request.Query.TryGetValue("handler", out handlerParam))
{
if (handlerParam.Count > 0)
handler = handlerParam[0];
if(handler == "Handle")
Handle();
}
return Page();
}
//TODO invoke this method in javascript
public void Handle()
{
}
}
if needs to be handled manually, how to pass the parameters?
like this?
$.ajax({
type: "POST", // Or "GET" depending on your scenario
url: "/ToDo1s?handler=Handle¶m1=hello¶m2=world", // Add URL of your handler method
success: function (data) {
console.log(data);
},
error: function (error) {
console.error(error);
}
});
public class IndexModel : ProductServicePageModel
{
public string NameFilter { get; set; }
public float? PriceFilterMin { get; set; }
public float? PriceFilterMax { get; set; }
// Parse Url?
public async Task<ActionResult> OnGet()
{
string? handler= null;
string? param1 = null;
string? param2 = null;
Microsoft.Extensions.Primitives.StringValues strParam;
if (Request.Query.TryGetValue("param1", out strParam))
{
if (strParam.Count > 0)
handler = strParam[0];
}
if (Request.Query.TryGetValue("param1", out strParam))
{
if (strParam.Count > 0)
param1= strParam[0];
}
if (Request.Query.TryGetValue("param2", out strParam))
{
if (strParam.Count > 0)
param2 = strParam[0];
}
if(handler == "Handle")
Handle(param1, param2);
return Page();
}
//TODO invoke this method in javascript
public void Handle(string _param1, string _param2)
{
Console.WriteLine($"{_param1} {_param2}");
}
}
Hi Anjali_Musmade,
Thanks for your reply, it is useful, the event of button works fine now.
But how to invoke method of IndexModel.Handle(Index.cshtml.cs) from index.js?
OK, there are my codes
Index.cshtml
@page
@using Microsoft.AspNetCore.Authorization
@using Volo.Abp.AspNetCore.Mvc.UI.Layout
@using Microsoft.AspNetCore.Mvc.Localization
@using Microsoft.AspNetCore.Mvc.TagHelpers
@using XTC.BaaSo.ProductService.Localization
@using XTC.BaaSo.ProductService.Web.Menus
@using XTC.BaaSo.ProductService.Web.Pages.Products
@using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Button
@using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Card
@using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form
@using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid
@using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Table
@using Volo.Abp.AspNetCore.Mvc.UI.Bundling.TagHelpers
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Pages.Shared.Components.AbpPageToolbar
@inject IHtmlLocalizer<ProductServiceResource> L
@inject IAuthorizationService Authorization
@model XTC.BaaSo.ProductService.Web.Pages.Products.IndexModel
@inject IPageLayout PageLayout
@{
PageLayout.Content.Title = L["Products"].Value;
PageLayout.Content.MenuItemName = ProductServiceMenus.Products;
}
@section scripts
{
<abp-script src="/Pages/Products/index.js" />
}
@section content_toolbar {
@await Component.InvokeAsync(typeof(AbpPageToolbarViewComponent), new { pageName = typeof(IndexModel).FullName })
}
<abp-card>
<abp-card-body>
<abp-row class="mb-3">
<abp-column size-md="_12">
<form id="SearchForm" autocomplete="off">
<div class="input-group">
<input class="form-control" id="FilterText" placeholder="@L["Search"]"/>
<abp-button button-type="Primary" type="submit" icon="search"/>
</div>
</form>
</abp-column>
<abp-column size-md="_12" class="mt-3">
<a href="javascript:;" id="AdvancedFilterSectionToggler">@L["SeeAdvancedFilters"]</a>
</abp-column>
</abp-row>
<abp-row id="AdvancedFilterSection" style="display: none;">
<abp-column size="_3">
<abp-input asp-for="NameFilter" label="@L["Name"].Value" />
</abp-column>
<abp-column size="_3">
<abp-input asp-for="PriceFilterMin" label="@L["MinPrice"].Value" />
</abp-column>
<abp-column size="_3">
<abp-input asp-for="PriceFilterMax" label="@L["MaxPrice"].Value" />
</abp-column>
</abp-row>
<abp-table striped-rows="true" id="ProductsTable">
<thead>
<tr>
<th>@L["Name"]</th>
<th>@L["Price"]</th>
<th></th>
<th>@L["Actions"]</th>
</tr>
</thead>
</abp-table>
</abp-card-body>
</abp-card>
Index.cshtml.cs
namespace XTC.BaaSo.ProductService.Web.Pages.Products;
public class IndexModel : ProductServicePageModel
{
public string NameFilter { get; set; }
public float? PriceFilterMin { get; set; }
public float? PriceFilterMax { get; set; }
//TODO invoke this method in javascript
public void Handle()
{
}
}
index.js
$(function () {
var l = abp.localization.getResource("ProductService");
var productService = window.xTC.baaSo.productService.products.product;
var createModal = new abp.ModalManager({
viewUrl: abp.appPath + "Products/CreateModal"
});
var editModal = new abp.ModalManager({
viewUrl: abp.appPath + "Products/EditModal"
});
var getFilter = function() {
return {
filterText: $("#FilterText").val(),
name: $("#NameFilter").val(),
priceMin: $("#PriceFilterMin").val(),
priceMax: $("#PriceFilterMax").val()
};
};
var dataTable = $("#ProductsTable").DataTable(abp.libs.datatables.normalizeConfiguration({
processing: true,
serverSide: true,
paging: true,
searching: false,
scrollX: true,
autoWidth: false,
scrollCollapse: true,
order: [[1, "asc"]],
ajax: abp.libs.datatables.createAjax(productService.getList, getFilter),
columnDefs: [
{
{ data: "name" },
{ data: "price" },
{
//TODO 1
render: function (data) {
return '<button type="button" class="btn btn-outline-primary"></button>';
}
},
rowAction: {
items:
[
{
text: l("Browse"),
visible: true,
action: function (data) {
console.log(data.record.id);
//TODO 2
}
},
{
text: l("Edit"),
visible: abp.auth.isGranted('ProductService.Products.Edit'),
action: function (data) {
editModal.open({
id: data.record.id
});
}
},
{
text: l("Delete"),
visible: abp.auth.isGranted('ProductService.Products.Delete'),
confirmMessage: function () {
return l("DeleteConfirmationMessage");
},
action: function (data) {
productService.delete(data.record.id)
.then(function () {
abp.notify.info(l("SuccessfullyDeleted"));
dataTable.ajax.reloadEx();
});
}
}
]
}
}
]
}));
createModal.onResult(function () {
dataTable.ajax.reloadEx();
});
editModal.onResult(function () {
dataTable.ajax.reloadEx();
});
$('#AbpContentToolbar button[name=CreateProduct]').click(function (e) {
e.preventDefault();
createModal.open();
});
$("#SearchForm").submit(function (e) {
e.preventDefault();
dataTable.ajax.reloadEx();
});
$('#AdvancedFilterSectionToggler').on('click', function (e) {
$('#AdvancedFilterSection').toggle();
});
$('#AdvancedFilterSection').on('keypress', function (e) {
if (e.which === 13) {
dataTable.ajax.reloadEx();
}
});
$('#AdvancedFilterSection select').change(function() {
dataTable.ajax.reloadEx();
});
});
By the way, I use the microservice-pro, this is my command:
abp new XTC.MyTest -t microservice-pro -u mvc --version 7.3.2
Our main users are school students, In the teaching phase, the number of users is very large, I noticed the Team/Business/Enterprise only include 3 developer seats. So it's a bit impractical to make each student purchase a license or allocate our developer seats.
We love the many features of abp commercial and include them in our platform. We hope that students will also have the opportunity to use them in their practice.
Whether client can use LeptonX-Lite to develop libraries without login into abp account, auto upgrade it to LeptonX when building and integration in our platform? Or do you have any good suggestions?
Hi maliming,
Thanks for reply, Around your prompt, I resolved this issue.
abp generate-proxy -t csharp -u https://localhost:44361/ -m vendorService, and delete files that differ from the ProductService sample and manual modify the VendorService-generate-proxy.json.
resolve: add --without-contracts and don't make any modifications.context.Services.AddStaticHttpClientProxies，but the new project, use the context.Services.AddHttpClientProxies
resolve: manual modify context.Services.AddHttpClientProxies to context.Services.AddStaticHttpClientProxies in my new service