0
avanekar02 created
Hello in the RADtool i have used 2 navigation properties 1) City and 2) Spots in City
when i select the City from the first drop down, i want to populate the Spots in City by passing the CityID so that only those spots in the selected city is displayed .
Can you please show me how it is done.
Regards Anwar
11 Answer(s)
-
0
When you select a city, id and name of the selected city are saved. ( in getNewCityId() method )
So, you can pass the cityId or cityName variable to lookup component and use it as a filter there.
openSelectSpotModal() { this.spotLookupTableModal.id = this.X.spottId; this.spotLookupTableModal.displayName = this.spotName; this.spotLookupTableModal.filterText = this.X.cityName; // <- add this to filter the spots this.spotLookupTableModal.show(); }Also, call getAll() when the lookup modal is shown. (in show() method)
Or you can pass the id and use it in getAllSpotForLookupTable method. And it is a better way.
-
0
This is my CreatOrEditModal.js made changes
----------From Here
(function ($) { app.modals.CreateOrEditInstitutionModal = function () {
var _institutionsService = abp.services.app.institutions; var _modalManager; var _$institutionInformationForm = null; var _cityLookupTableModal = new app.ModalManager({ viewUrl: abp.appPath + 'App/Institutions/CityLookupTableModal', scriptUrl: abp.appPath + 'view-resources/Areas/App/Views/Institutions/_CityLookupTableModal.js', modalClass: 'CityLookupTableModal' }); var _schoolLookupTableModal = new app.ModalManager({ viewUrl: abp.appPath + 'App/Institutions/SchoolLookupTableModal', scriptUrl: abp.appPath + 'view-resources/Areas/App/Views/Institutions/_SchoolLookupTableModal.js', modalClass: 'SchoolLookupTableModal' }); var _gradeLookupTableModal = new app.ModalManager({ viewUrl: abp.appPath + 'App/Institutions/GradeLookupTableModal', scriptUrl: abp.appPath + 'view-resources/Areas/App/Views/Institutions/_GradeLookupTableModal.js', modalClass: 'GradeLookupTableModal' }); var _sectionLookupTableModal = new app.ModalManager({ viewUrl: abp.appPath + 'App/Institutions/SectionLookupTableModal', scriptUrl: abp.appPath + 'view-resources/Areas/App/Views/Institutions/_SectionLookupTableModal.js', modalClass: 'SectionLookupTableModal' }); var _academicyearLookupTableModal = new app.ModalManager({ viewUrl: abp.appPath + 'App/Institutions/AcademicyearLookupTableModal', scriptUrl: abp.appPath + 'view-resources/Areas/App/Views/Institutions/_AcademicyearLookupTableModal.js', modalClass: 'AcademicyearLookupTableModal' }); this.init = function (modalManager) { _modalManager = modalManager; var modal = _modalManager.getModal(); modal.find('.date-picker').datetimepicker({ locale: abp.localization.currentLanguage.name, format: 'L' }); _$institutionInformationForm = _modalManager.getModal().find('form[name=InstitutionInformationsForm]'); _$institutionInformationForm.validate(); }; $('#OpenCityLookupTableButton').click(function () { var institution = _$institutionInformationForm.serializeFormToObject(); _cityLookupTableModal.open({ id: institution.cityId, displayName: institution.cityCitiName }, function (data) { _$institutionInformationForm.find('input[name=CityCitiName]').val(data.displayName); _$institutionInformationForm.find('input[name=CityId]').val(data.id); }); }); $('#ClearCityCitiNameButton').click(function () { _$institutionInformationForm.find('input[name=CityCitiName]').val(''); _$institutionInformationForm.find('input[name=CityId]').val(''); }); $('#OpenSchoolLookupTableButton').click(function () { var institution = _$institutionInformationForm.serializeFormToObject();
_schoolLookupTableModal.open({ id: institution.schoolId, displayName: institution.schoolSchoolName,filterText:institution.cityCitiName}, function (data) {---------------------------------------------------------------------------------------------------------------------- _$institutionInformationForm.find('input[name=SchoolSchoolName]').val(data.displayName); _$institutionInformationForm.find('input[name=SchoolId]').val(data.id); }); });
$('#ClearSchoolSchoolNameButton').click(function () { _$institutionInformationForm.find('input[name=SchoolSchoolName]').val(''); _$institutionInformationForm.find('input[name=SchoolId]').val(''); }); $('#OpenGradeLookupTableButton').click(function () { var institution = _$institutionInformationForm.serializeFormToObject(); _gradeLookupTableModal.open({ id: institution.gradeId, displayName: institution.gradeGradeName }, function (data) { _$institutionInformationForm.find('input[name=GradeGradeName]').val(data.displayName); _$institutionInformationForm.find('input[name=GradeId]').val(data.id); }); }); $('#ClearGradeGradeNameButton').click(function () { _$institutionInformationForm.find('input[name=GradeGradeName]').val(''); _$institutionInformationForm.find('input[name=GradeId]').val(''); }); $('#OpenSectionLookupTableButton').click(function () { var institution = _$institutionInformationForm.serializeFormToObject(); _sectionLookupTableModal.open({ id: institution.sectionId, displayName: institution.sectionSectionName }, function (data) { _$institutionInformationForm.find('input[name=SectionSectionName]').val(data.displayName); _$institutionInformationForm.find('input[name=SectionId]').val(data.id); }); }); $('#ClearSectionSectionNameButton').click(function () { _$institutionInformationForm.find('input[name=SectionSectionName]').val(''); _$institutionInformationForm.find('input[name=SectionId]').val(''); }); $('#OpenAcademicyearLookupTableButton').click(function () { var institution = _$institutionInformationForm.serializeFormToObject(); _academicyearLookupTableModal.open({ id: institution.academicyearId, displayName: institution.academicyearYear_Attended }, function (data) { _$institutionInformationForm.find('input[name=AcademicyearYear_Attended]').val(data.displayName); _$institutionInformationForm.find('input[name=AcademicyearId]').val(data.id); }); }); $('#ClearAcademicyearYear_AttendedButton').click(function () { _$institutionInformationForm.find('input[name=AcademicyearYear_Attended]').val(''); _$institutionInformationForm.find('input[name=AcademicyearId]').val(''); }); this.save = function () { if (!_$institutionInformationForm.valid()) { return; } var institution = _$institutionInformationForm.serializeFormToObject(); _modalManager.setBusy(true); _institutionsService.createOrEdit( institution ).done(function () { abp.notify.info(app.localize('SavedSuccessfully')); _modalManager.close(); abp.event.trigger('app.createOrEditInstitutionModalSaved'); }).always(function () { _modalManager.setBusy(false); }); }; };})(jQuery);
-
0
please format your code with the `` tags.
-
0
@avanekar02 i assumed you are working on angular, my bad.
But key point is same. Pass the selected city id value to spot lookup modal and use it as a filter.
in create or edit modal:
$('#OpenSpotLookupTableButton').click(function () { var entity = _$entityInformationForm.serializeFormToObject(); _spotLookupTableModal.open({ id: entity.spotId, displayName: entity.spotName, cityId: entity.cityId}, function (data) { // we added cityId: entity.cityId parameter here _$entityInformationForm.find('input[name=SpotName]').val(data.displayName); _$entityInformationForm.find('input[name=SpotId]').val(data.id); }); });it passed cityId to controller:
In controller:
public PartialViewResult SpotLookupTableModal(long? id, string displayName, int cityId) { var viewModel = new SpotLookupTableViewModel() { Id = id, DisplayName = displayName, CityId = cityId, // declare a CityId variable in SpotLookupTableViewModel FilterText = "" }; return PartialView("_SpotLookupTableModal", viewModel); }Then Create a hidden input in _SpotLookupTableViewModal
<input class="form-control" id="CityIdFilter" value="@Model.CityId" type="text" name="CityId" hidden/>Now you can use it to filter spots when you call getAllSpotForLookupTable.
-
0
hello
i followed the instruction but the cityId is not passed to the controller, it is always 0
regards Anwar
-
0
are other parameters also not passed?
-
0
yes, no other parameters are passed....
-
0
Use "CityId" instead of "cityId". Looks like There is a case mismatch.
-
0
Hello i did the following
*** This is my CreateOrEditModal.js part
$('#OpenSchoolLookupTableButton').click(function () { var institution = _$institutionInformationForm.serializeFormToObject(); _schoolLookupTableModal.open({ id: institution.schoolId, displayName: institution.schoolSchoolName, cityId: institution.CityId}, function (data) { _$institutionInformationForm.find('input[name=SchoolSchoolName]').val(data.displayName); _$institutionInformationForm.find('input[name=SchoolId]').val(data.id); }); }); $('#ClearSchoolSchoolNameButton').click(function () { _$institutionInformationForm.find('input[name=SchoolSchoolName]').val(''); _$institutionInformationForm.find('input[name=SchoolId]').val(''); });*** This is my Controller.js part
[AbpMvcAuthorize(AppPermissions.Pages_Institutions_Create, AppPermissions.Pages_Institutions_Edit)] public PartialViewResult SchoolLookupTableModal(int? id, string displayName, int cityId) { var viewModel = new SchoolLookupTableViewModel() { Id = id, CityId = cityId, DisplayName = displayName, FilterText = "" }; return PartialView("_SchoolLookupTableModal", viewModel); }*** This is my Service part
public async Task<PagedResultDto<SchoolLookupTableDto>> GetAllSchoolForLookupTable(GetAllForLookupTableInput input) { var query = _schoolRepository.GetAll().WhereIf( !string.IsNullOrWhiteSpace(input.Filter), e=> e.SchoolName.ToString().Contains(input.Filter) ); var totalCount = await query.CountAsync(); var schoolList = await query .PageBy(input) .ToListAsync(); var lookupTableDtoList = new List<SchoolLookupTableDto>(); foreach(var school in schoolList){ lookupTableDtoList.Add(new SchoolLookupTableDto { Id = school.Id, DisplayName = school.SchoolName.ToString() }); } return new PagedResultDto<SchoolLookupTableDto>( totalCount, lookupTableDtoList ); }*** This is my GetAllForLookupTableInput part
public class GetAllForLookupTableInput : PagedAndSortedResultRequestDto { public int? CityId { get; set; } public string Filter { get; set; } }*** This is my SchoolLookupTableViewModel part added line marked with ****
public class SchoolLookupTableViewModel { public int? Id { get; set; } public int? CityId { get; set; } public string DisplayName { get; set; } public string FilterText { get; set; } }*** This is my part SchoolLookupTableViewModel
@using NOOR.Sched.Authorization @using NOOR.Sched.Web.Areas.App.Models.Institutions @using NOOR.Sched.Web.Areas.App.Startup @using NOOR.Sched.Web.Areas.App.Models.Common.Modals @model SchoolLookupTableViewModel @section Scripts { <script abp-src="/view-resources/Areas/App/Views/Institutions/_SchoolLookupTableModal.js" asp-append-version="true"></script> } @Html.Partial("~/Areas/App/Views/Common/Modals/_ModalHeader.cshtml", new ModalHeaderViewModel(L("PickSchool"))) <div class="m-content"> <div class="m-portlet m-portlet--mobile"> <div class="m-portlet__body"> <div class="m-form m-form--label-align-right"> <div class="row align-items-center m--margin-bottom-10"> <div class="col-xl-12"> <div class="form-group m-form__group align-items-center"> <div class="input-group"> **** <input class="form-control" id="CityIdFilter" value="@Model.CityId" type="text" name="CityId" hidden /> **** <input type="text" id="SchoolTableFilter" class="form-control m-input" placeholder="@L("SearchWithThreeDot")" value="@Model.FilterText"> <span class="input-group-btn"> <button id="GetSchoolButton" class="btn btn-primary" type="submit"><i class="flaticon-search-1"></i></button> </span> </div> </div> </div> </div> </div> <div class="row align-items-center"> <table id="SchoolTable" class="display table table-striped table-bordered table-hover dt-responsive nowrap"> <thead> <tr> <th>@L("Actions")</th> <th>@L("SchoolName")</th> </tr> </thead> </table> </div> </div> </div> </div> @Html.Partial("~/Areas/App/Views/Common/Modals/_ModalFooterWithClose.cshtml") -
0
To send city Id as filter (lookup table js file)
listAction: { ajaxFunction: _institutionsService.getAll{{NP_Foreign_Entity_Name_Here}}ForLookupTable, inputFilter: function () { return { filter: $('#SchoolTableFilter').val(), cityId:$('#CityIdFilter').val(), // <--- }; } },To filter the schools by cityId,
var query = _schoolRepository.GetAll() .WhereIf( !string.IsNullOrWhiteSpace(input.Filter), e=> e.SchoolName.ToString().Contains(input.Filter)) .WhereIf( input.CityId != null, e=> e.CityId == input.CityId); // <--- -
0
Thanks
