Base solution for your next web application

Activities of "HCCNOV"

Perfect. I have moved my data request inside the JS file to point to a separate service. Thank you for the guidance.

The Audit feature DOES work but I have to have the ABP/Zero tables in the older database AS WELL AS the Asp.Net Zero db. Is it possible to have one database (the original older SQL database) and not create the Asp.Net Zero database with all the ABP/Zero tables? Is that the pattern I should have followed?

Hello.

It inherits from AbpDbContext.

I changed our second DbContext to AbpZeroDbContext and added all the ABP/Zero tables to that DB and I have the Auditing working. I don't understand this paradigm as I'm not sure why I would have 2 AbpLanguageTexts in my application (one for each db)

Does that seem right? (our second DB is a very old SQL database and knows nothing about Zero as it was originally connected to an AccessApp and now connected to Zero)

Using version 8.x MVC JQuery.

Also, I have seen this post: StackOVerflow from last year: ASP.NET Boilerplate multiple databases and DbContexts

namespace NOVZERO.EntityFrameworkCore
{
    public class Data70DbContext : AbpDbContext
    {
        public Data70DbContext(DbContextOptions<Data70DbContext> options)
           : base(options)
        {
        }

Thank you for the quick confirmation that my code was correctly implemented. That led me to look elsewhere. I started first by removing columns in the DataTable (and adding them back in one at a time). The problem was that Modal JS TableB had a .click function on column 1 called "showDocument" and my Index.js for TableA had a jquery function by the same name. That was causing all kinds of weirdness on the DataTables.Net control.

I renamed the method in the Modal JQuery and problem solved.

thank you.

I really have no idea how to implement a DataTables.Net load routine in a Modal Init. Is there any examples in the base project for MVC/JQuery Core ?

Just to clarify, I only have one Modal. TableA is loaded on a regular page (non-Modal). I want to launch the Modal that contains TableB.

With the code below, the Modal pops up and the DataTables.Net result grid is empty and displays "loading" (never changes). If I change the "max entries" using the UI the results load (but the "loading" never goes away). So, I know service is connected and working, the table just isn't populating on load of modal.

My modal code:

(function ($) {
    app.modals.ViewDocumentsModal = function () {

        var _$clientnameDocumentsTable = $('#clientnameDocumentsTable');
        var _customerDocumentsService = abp.services.app.customerDocuments;
        var _novDocumentsService = abp.services.app.novDocuments;
        var _$documentsForm = null;


        var _modalManager;
        var _$documentsModalFormModalForm = null;


        this.init = function (modalManager) {
            _modalManager = modalManager;
            var modal = _modalManager.getModal();
            _$documentsForm = _modalManager.getModal().find('form[name=DocumentsModalForm]');
            refreshDocumentList();
        };


        function refreshDocumentList() {

            var dataTableDocuments = _$clientnameDocumentsTable.DataTable({
                paging: true,
                serverSide: true,
                processing: true,
                listAction: {
                    ajaxFunction: _customerDocumentsService.getAll,
                    inputFilter: function () {
                        return {
                            countyAccountNumber: $('#AccountNumber').val()
                        };
                    }
                },
                columnDefs: [
                    {
                        className: 'control responsive',
                        orderable: false,
                        render: function () {
                            return '';
                        },
                        targets: 0
                    },
                    {
                        targets: 1,
                        data: null,
                        orderable: false,
                        defaultContent: '',
                        rowAction: {
                            element: $("<div/>")
                                .addClass("text-center")
                                .append($("<button/>")
                                    .addClass("btn")
                                    .attr("title", app.localize("Open Document"))
                                    .append($("<i/>").addClass("la la-search"))
                                ).click(function () {
                                    showDocument($(this).data());
                                })
                        }
                    },
                    {
                        targets: 2,
                        data: "documentItems.fileName",
                        name: "fileName"
                    },
                    {
                        targets: 3,
                        data: "documentItems.classification",
                        name: "classification"
                    },
                    {
                        targets: 4,
                        data: "documentItems.description",
                        name: "description"
                    },
                    {
                        targets: 5,
                        data: "documentItems.documentMime",
                        name: "documentMime"
                    },
                    {
                        targets: 6,
                        data: "documentItems.source",
                        name: "source"
                    },
                    {
                        targets: 7,
                        data: "documentItems.dateCreated",
                        name: "dateCreated",
                        render: function (dateCreated) {
                            if (dateCreated) {
                                return moment(dateCreated).format('L');
                            }
                            return "";
                        }
                    },
                    {
                        targets: 8,
                        data: "documentItems.createdBy",
                        name: "createdBy"
                    }

                ]
            });
        }


        function showDocument(document) {

                event.preventDefault();
                if (document.documentItems.source == "TIFF") {
                    _novDocumentsService.getTiff(document.countyAccountNumber)
                        .done(function (result) {
                            app.downloadTempFile(result);
                        });
                } else {
                    _novDocumentsService.getDocument(document.documentItems.id)
                        .done(function (result) {
                            app.downloadTempFile(result);
                        });
                }
            }


    };
})(jQuery);

and my view:

@using Abp.Extensions
@using NOVZERO.Web.Areas.App.Models.Common.Modals
@model NOVZERO.Web.Areas.App.Models.NovDocuments.ViewDocumentsModalViewModel

@await Html.PartialAsync("~/Areas/App/Views/Common/Modals/_ModalHeader.cshtml", new ModalHeaderViewModel("clientnameDocuments"))

@section Scripts
{
    <script abp-src="/view-resources/Areas/App/Views/NovDocuments/_ViewDocumentsModal.js" asp-append-version="true"></script>
}

<div class="modal-body">
    <form class="form-horizontal audit-log-detail-view" role="form" name="DocumentsModalForm">
        <div class="form-body">
            <input type="hidden" id="AccountNumber" value="@Model.countyAccountNumber" />
            <div class="row align-items-center" style="margin-top:20px;">
                <div class="col-lg-12">
                    <table id="clientnameDocumentsTable" class="display table table-striped table-bordered table-hover dt-responsive nowrap">
                        <thead>
                            <tr>
                                <th></th>
                                <th>@L("Description")</th>
                                <th>@L("Classification")</th>
                                <th>@L("FileType")</th>
                                <th>@L("DateCreated")</th>
                                <th>@L("CreatedBy")</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </form>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">@L("Close")</button>
</div>

Thank you for the support and direction. It is appreciated.

I was able to achieve the desired result but do not know if this is an acceptable practice. This way also updates the data list on the page under the modal.

  function _addJurisdiction() {
          	// Do Add here
			// Reload collection on modal
            _modalManager.setBusy(true);
            _propertiesService.addTaxJurisdiction({
                taxJurisdictionCode: $('#Jurisdiction').val(),
                countyAccountNumber: $('#CountyAccountNumber').val()
            }).done(function () {
                abp.notify.info(app.localize('InsertedSuccessfully'));
                _modalManager.getModal().on('hidden.bs.modal', function (e) {
                    _modalManager.reopen();
                });
                _modalManager.close();
            }).always(function () {
                _modalManager.setBusy(false);
            });
            abp.event.trigger('app.EditTaxValuesModalSaved');
        }                

And the delete (ID hidden in the Button ID tag):

 function _deleteJurisdiction(thisTax) {       
            _propertiesService.deleteTaxJurisdiction({
                taxJurisdictionCode: thisTax,
                countyAccountNumber: $('#CountyAccountNumber').val()
            }).done(function () {
                abp.notify.info(app.localize('InsertedSuccessfully'));
                _modalManager.getModal().on('hidden.bs.modal', function (e) {
                    _modalManager.reopen();
                });
                _modalManager.close();
            }).always(function () {
                _modalManager.setBusy(false);
            });
            abp.event.trigger('app.EditTaxValuesModalSaved');
        }

Thank you. There is also one other thing (While we're here) i'm not sure of is how to get the index of the row I clicked so I can delete it.

Modal
@using Abp.Extensions
@using MYPROJECT.Web.Areas.App.Models.Common.Modals
@using MYPROJECT.CustomersAndAccounts
@using MYPROJECT.CustomersAndAccounts.Dtos
@model MYPROJECT.Web.Areas.App.Models.CustomersAndAccounts.EditTaxJurisdictionsModalViewModel

@await Html.PartialAsync("~/Areas/App/Views/Common/Modals/_ModalHeader.cshtml", new ModalHeaderViewModel("EditTaxJurisdictions"))


<div class="modal-body">
    <form class="form-horizontal audit-log-detail-view" role="form" name="EditTaxJurisdictionsModalForm">
        <div class="form-body">
            <table class="table table-bordered table-striped table-hover">
                <thead>
                    <tr>
                        <td>Code</td>
                        <td>Name</td>
                        <td width="15"></td>
                    </tr>
                </thead>
                <tbody>
                    @foreach (GetTaxJurisdictionForEditDto gtj in Model.taxJurisdictions)
                    {
                        <tr>
                            <td>@gtj.TaxJurisdiction.TaxJurisdictionCode</td>
                            <td>@gtj.TaxJurisdiction.TaxJurisdictionName</td>
                            <td><button id="DeleteButton" name="DeleteButton" class="btn col-lg-1 delete-button"><i class="fa fa-trash" style="color:#E7272F;" title="Remove"></i></button></td>
                        </tr>
                    }
                </tbody>
            </table>

            <div class="form-group kt-form__group row" style="margin-top:20px;">
                <div class="form-group form-md-line-input form-md-floating-label no-hint col-lg-6">
                    <label style="color:#787676">@L("ChooseJurisdiction"):</label>
                    <select id="Jurisdiction" name="Jurisdiction" class="form-control" style="font-size:20px;color:#555555;padding:0px;height:calc(1.5em +  2px);">
                        <option value="-1">Select Jurisdiction</option>
                        @foreach (var jd in Model.taxJurisdictionList)
                        {
                            <option value="@jd.TaxJurisdictionCode">@jd.CodeAndName</option>
                        }
                    </select>
                </div>
                <div class="form-group form-md-line-input form-md-floating-label no-hint col-lg-6" style="margin-top:20px;">
                    <div class="form-group form-md-line-input form-md-floating-label no-hint col-lg-12">
                        <button id="AddButton" name="AddButton" class="btn btn-success col-lg-6 add-button" span><i class="fa fa-plus"></i>@L("AddJurisdiction")</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">@L("Close")</button>
</div>
JS
(function ($) {
    app.modals.EditTaxJurisdictionsModal = function () {

        var _propertiesService = abp.services.app.customersAndAccounts;

        var _modalManager;
        var _$editTaxJurisdictionsModalForm = null;

        this.init = function (modalManager) {
            _modalManager = modalManager;

            var modal = _modalManager.getModal();

            _$editTaxJurisdictionsModalForm = _modalManager.getModal().find('form[name=EditTaxJurisdictionsModalForm]');
            _$editTaxJurisdictionsModalForm.validate();

            _modalManager.getModal().find('.add-button').click(function () {
                _addJurisdiction();
            });
            _modalManager.getModal().find('.delete-button').click(function () {
                _deleteJurisdiction();
            });
        };

        function _deleteJurisdiction() {
            // Do Delete here
			// Reload collection on modal
        }

        function _addJurisdiction() {
          	// Do Add here
			// Reload collection on modal
        }
    };
})(jQuery);

Thank you for pointing me to the sample. I did perform a search through the forum for this issue and did not find anything.

This is essentially what I did to my own form but could not get the validation to trigger. (red text, etc)

I spent the time and implemented your solution above (Mvc-Core) and was able to make this work for me here. I will go back and review my code more carefully.

A request to server would be most beneficial here since "related" data might not be in original request/dto.

Showing 1 to 10 of 16 entries