Skip to content

Javascripts

  • Do use the Command Name prefix for the modals (ex: changeStateModal).

Example modal definition at index.js

var changeStateModal = new abp.ModalManager({
    viewUrl: abp.appPath + "ProjectPlanning/Projects/ChangeStateModal",
    scriptUrl: "/Pages/ProjectPlanning/Projects/changeStateModal.js",
    modalClass: "projectChangeState"
});

The related modal:

var abp = abp || {};

abp.modals.projectChangeState = function () {
    var initModal = function (publicApi, args) {
        var l = abp.localization.getResource("ProjectPlanning")

        $("#cancel").click(function (e) {
            e.preventDefault();
            publicApi.close();
        });
    };

    return {
        initModal: initModal
    };
};

The related endpoint:

[HttpPut]
[Route("{id}/change-state")]
public Task<ProjectDto> ChangeStateAsync(Guid id, ChangeStateInput input)
{
    return ProjectAppService.ChangeStateAsync(id, input);
}
  • Do order modal definitions by naming

  • Do follow same property ordering at cshtml and cshtml.cs for javascript filter function

Example filter function at index.js

var getFilter = function () {
    return {
        filterText: $("#FilterText").val(),
        name: $("#NameFilter").val(),
        description: $("#DescriptionFilter").val(),
        definitionId: $("#DefinitionIdFilter").val(),
        instanceId: $("#InstanceIdFilter").val(),
        priority: $("#PriorityFilter").val(),
        currentState: $("#CurrentStateFilter").val(),
        versionMin: $("#VersionFilterMin").val(),
        versionMax: $("#VersionFilterMax").val(),
        isClosed: $("#IsClosedFilter").val(),
        startDateMin: $("#StartDateFilterMin").data().datepicker.getFormattedDate('yyyy-mm-dd'),
        startDateMax: $("#StartDateFilterMax").data().datepicker.getFormattedDate('yyyy-mm-dd'),
        endDateMin: $("#EndDateFilterMin").data().datepicker.getFormattedDate('yyyy-mm-dd'),
        endDateMax: $("#EndDateFilterMax").data().datepicker.getFormattedDate('yyyy-mm-dd'),
        commissionDateMin: $("#CommissionDateFilterMin").data().datepicker.getFormattedDate('yyyy-mm-dd'),
        commissionDateMax: $("#CommissionDateFilterMax").data().datepicker.getFormattedDate('yyyy-mm-dd'),
        inServiceDateMin: $("#InServiceDateFilterMin").data().datepicker.getFormattedDate('yyyy-mm-dd'),
        inServiceDateMax: $("#InServiceDateFilterMax").data().datepicker.getFormattedDate('yyyy-mm-dd'),
        ownerName: $("#OwnerNameFilter").val(),
        organizationUnitName: $("#OrganizationUnitNameFilter").val(),
        creatorName: $("#CreatorNameFilter").val(),
        creationTimeMin: ($("#CreationTimeFilterMin").val()),
        creationTimeMax: ($("#CreationTimeFilterMax").val()),
        lastModifierName: $("#LastModifierNameFilter").val(),
        lastModificationTimeMin: ($("#LastModificationTimeFilterMin").val()),
        lastModificationTimeMax: ($("#LastModificationTimeFilterMax").val())
    };
};

The related Index.cshtml:

<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 page-search-filter-text" 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" class="text-decoration-none">@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="DescriptionFilter" label="@L["Description"].Value" />
            </abp-column>
            <abp-column size="_3">
                <abp-select asp-items="Model.PriorityList" asp-for="PriorityFilter" label="@L["Priority"].Value" />
            </abp-column>
            <abp-column size="_3">
                <abp-input asp-for="CurrentStateFilter" label="@L["State"].Value" />
            </abp-column>
            <abp-column size="_3">
                <abp-input asp-for="VersionFilterMin" label="@L["MinVersion"].Value" />
            </abp-column>
            <abp-column size="_3">
                <abp-input asp-for="VersionFilterMax" label="@L["MaxVersion"].Value" />
            </abp-column>
            <abp-column size="_3">
                <abp-select asp-items="Model.IsClosedList" asp-for="IsClosedFilter" label="@L["IsItClosed"].Value" />
            </abp-column>
            <abp-column size="_3">
                <abp-input asp-for="StartDateFilterMin" label="@L["MinStartDate"].Value" type="date" />
            </abp-column>
            <abp-column size="_3">
                <abp-input asp-for="StartDateFilterMax" label="@L["MaxStartDate"].Value" type="date" />
            </abp-column>
            <abp-column size="_3">
                <abp-input asp-for="EndDateFilterMin" label="@L["MinEndDate"].Value" type="date" />
            </abp-column>
            <abp-column size="_3">
                <abp-input asp-for="EndDateFilterMax" label="@L["MaxEndDate"].Value" type="date" />
            </abp-column>
            <abp-column size="_3">
                <abp-input asp-for="CommissionDateFilterMin" label="@L["MinCommissionDate"].Value" type="date" />
            </abp-column>
            <abp-column size="_3">
                <abp-input asp-for="CommissionDateFilterMax" label="@L["MaxCommissiontDate"].Value" type="date" />
            </abp-column>
            <abp-column size="_3">
                <abp-input asp-for="InServiceDateFilterMin" label="@L["MinInServiceDate"].Value" type="date" />
            </abp-column>
            <abp-column size="_3">
                <abp-input asp-for="InServiceDateFilterMax" label="@L["MaxInServiceDate"].Value" type="date" />
            </abp-column>
            <abp-column size="_3">
                <abp-input asp-for="OwnerNameFilter" label="@L["OwnerName"].Value" />
            </abp-column>
            <abp-column size="_3">
                <abp-input asp-for="OrganizationUnitNameFilter" label="@L["OrganizationUnitName"].Value" />
            </abp-column>
            <abp-column size="_3">
                <abp-input asp-for="CreatorNameFilter" label="@L["CreatorName"].Value" />
            </abp-column>
            <abp-column size="_3">
                <abp-input asp-for="CreationTimeFilterMin" label="@L["MinCreationTime"].Value" type="date" />
            </abp-column>
            <abp-column size="_3">
                <abp-input asp-for="CreationTimeFilterMax" label="@L["MaxCreationTime"].Value" type="date" />
            </abp-column>
            <abp-column size="_3">
                <abp-input asp-for="LastModifierNameFilter" label="@L["LastModifierName"].Value" />
            </abp-column>
            <abp-column size="_3">
                <abp-input asp-for="LastModificationTimeFilterMin" label="@L["MinLastModificationTime"].Value" type="date" />
            </abp-column>
            <abp-column size="_3">
                <abp-input asp-for="LastModificationTimeFilterMax" label="@L["MaxLastModificationTime"].Value" type="date" />
            </abp-column>
        </abp-row>

        <abp-table striped-rows="true" id="ProjectsTable">
            <thead>
                <tr>
                    <th>@L["Actions"]</th>
                    <th>@L["Name"]</th>
                    <th>@L["Description"]</th>
                    <th>@L["BaseModel"]</th>
                    <th>@L["Priority"]</th>
                    <th>@L["State"]</th>
                    <th>@L["Version"]</th>
                    <th>@L["IsItClosed"]</th>
                    <th>@L["StartDate"]</th>
                    <th>@L["EndDate"]</th>
                    <th>@L["CommissionDate"]</th>
                    <th>@L["InServiceDate"]</th>
                    <th>@L["OwnerName"]</th>
                    <th>@L["OrganizationUnitName"]</th>
                    <th>@L["CreatorName"]</th>
                    <th>@L["CreationTime"]</th>
                    <th>@L["LastModifierName"]</th>
                    <th>@L["LastModificationTime"]</th>
                </tr>
            </thead>
        </abp-table>
    </abp-card-body>
</abp-card>

The related Index.cshtml.cs:

    public class IndexModel : AbpPageModel
    {
        public string NameFilter { get; set; }

        public string DescriptionFilter { get; set; }

        public int? PriorityFilter { get; set; }

        public string CurrentStateFilter { get; set; }

        public int? VersionFilterMin { get; set; }

        public int? VersionFilterMax { get; set; }

        public bool? IsClosedFilter { get; set; }

        public DateTime? StartDateFilterMin { get; set; }

        public DateTime? StartDateFilterMax { get; set; }

        public DateTime? EndDateFilterMin { get; set; }

        public DateTime? EndDateFilterMax { get; set; }

        public DateTime? CommissionDateFilterMin { get; set; }

        public DateTime? CommissionDateFilterMax { get; set; }

        public DateTime? InServiceDateFilterMin { get; set; }

        public DateTime? InServiceDateFilterMax { get; set; }

        public string OwnerNameFilter { get; set; }

        public string OrganizationUnitNameFilter { get; set; }

        public string CreatorNameFilter { get; set; }

        public DateTime? CreationTimeFilterMin { get; set; }

        public DateTime? CreationTimeFilterMax { get; set; }

        public string LastModifierNameFilter { get; set; }

        public DateTime? LastModificationTimeFilterMin { get; set; }

        public DateTime? LastModificationTimeFilterMax { get; set; }

        public List<SelectListItem> PriorityList { get; set; }

        public List<SelectListItem> IsClosedList { get; set; }

        private readonly IStringLocalizer<ProjectPlanningResource> _localizer;

        public IndexModel(IStringLocalizer<ProjectPlanningResource> localizer)
        {
            _localizer = localizer;

            PriorityList = new List<SelectListItem>
            {
                new SelectListItem { Value = "", Text = _localizer["Select"].Value},
                new SelectListItem { Value = Convert.ToInt32(Priority.Highest).ToString(), Text = _localizer["Project:Priority:Highest"].Value},
                new SelectListItem { Value = Convert.ToInt32(Priority.High).ToString(), Text = _localizer["Project:Priority:High"].Value},
                new SelectListItem { Value = Convert.ToInt32(Priority.Medium).ToString(), Text = _localizer["Project:Priority:Medium"].Value},
                new SelectListItem { Value = Convert.ToInt32(Priority.Low).ToString(), Text = _localizer["Project:Priority:Low"].Value},
                new SelectListItem { Value = Convert.ToInt32(Priority.Lowest).ToString(), Text = _localizer["Project:Priority:Lowest"].Value},
            };

            IsClosedList = new List<SelectListItem>
            {
                new SelectListItem { Value = "", Text = _localizer["Select"].Value},
                new SelectListItem { Value = false.ToString(), Text = _localizer["No"].Value},
                new SelectListItem { Value = true.ToString(), Text = _localizer["Yes"].Value}
            };
        }

        public async Task OnGetAsync()
        {
            await Task.CompletedTask;
        }
    }