Update logic in MenuItem UpdateModal

modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Menus/MenuItems/UpdateModal.cshtml

@@ -35,7 +35,21 @@
 
                     <label class="form-label" asp-for="ViewModel.PageId"></label>
 
-                    <select class="form-control" asp-for="ViewModel.PageId"></select>
+                    <select asp-for="ViewModel.PageId"
+                            class="auto-complete-select"
+                            data-autocomplete-api-url="/api/cms-kit-admin/menu-items/lookup/pages"
+                            data-autocomplete-display-property="title"
+                            data-autocomplete-value-property="id"
+                            data-autocomplete-items-property="items"
+                            data-autocomplete-filter-param-name="filter"
+                            data-autocomplete-allow-clear="true">
+
+                        <!-- You can define selected option(s) here  -->
+                        @if (Model.ViewModel.PageId.HasValue)
+                        {
+                            <option selected value="@Model.ViewModel.PageId">@Model.ViewModel.PageTitle</option>
+                        }
+                    </select>
                 </abp-tab>
 
             </abp-tabs>

modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Menus/MenuItems/updateModal.js

@@ -7,9 +7,6 @@ $(function () {
             var $pageId = $('#ViewModel_PageId');
             var $url = $('#ViewModel_Url');
             var $displayName = $('#ViewModel_DisplayName');
-            var $pageIdClearButton = $('#url-tab');
-
-            initSelectPageId();
 
             $pageId.on('change', function (params) {
                 $url.prop('disabled', $pageId.val());
@@ -22,22 +19,6 @@ $(function () {
             })
 
             $pageId.trigger('change');
-
-            $pageIdClearButton.click(function () {
-                $pageId.val('');
-                $pageId.trigger('change');
-            });
-
-            function initSelectPageId() {
-                $pageId.data('autocompleteApiUrl', '/api/cms-kit-admin/menu-items/lookup/pages');
-                $pageId.data('autocompleteDisplayProperty', 'title');
-                $pageId.data('autocompleteValueProperty', 'id');
-                $pageId.data('autocompleteItemsProperty', 'items');
-                $pageId.data('autocompleteFilterParamName', 'filter');
-                $pageId.data('autocompleteParentSelector', '#menu-update-modal');
-
-                abp.dom.initializers.initializeAutocompleteSelects($pageId);
-            }
         };
 
         return {