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
andcshtml.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;
}
}