優化州和城市下拉列表加載效率的策略
直接在頁面加載時加載州和城市下拉列表的方法效率低下。本文將介紹更有效率和最佳實踐的方法。
推薦方法:
1. 使用視圖模型:
創建一個視圖模型,包含StateID、CityID、StateList和CityList屬性。這有助於封裝數據並提供強類型。
2. 使用非侵入式JavaScript:
避免在標記中使用內聯JavaScript。相反,使用非侵入式JavaScript來分離HTML和行為。
下拉列表修改:
HTML:
<code class="language-html">@Html.DropDownList(m => m.StateID, States, "选择州") //移除onchange属性 @Html.DropDownListFor(m => m.CityID, Cities, "选择城市") //保留默认ID</code>
JavaScript:
<code class="language-javascript">const url = '@Url.Action("GetCities", "Home")'; // 使用助手方法 const citiesDropdown = $('#CityID'); // 缓存元素 $('#StateID').change(function () { $.getJSON(url, { id: $(this).val() }, function (response) { // 清空并添加默认(null)选项 citiesDropdown.empty().append($('<option></option>').val('').text('请选择')); $.each(response, function (index, item) { citiesDropdown.append($('<option></option>').val(item.Value).text(item.Text)); }); }); });</code>
緩存優化:
如果渲染多個項目,並且它們的選項可能包含來自同一州的城市,可以使用緩存來避免重複的API調用。
<code class="language-javascript">const cache = {}; $('#StateID').change(function () { const selectedState = $(this).val(); if (cache[selectedState]) { // 从缓存中渲染选项 // ... 使用cache[selectedState]渲染城市下拉列表 } else { $.getJSON(url, { id: selectedState }, function (response) { // 添加到缓存 cache[selectedState] = response; // ... 使用response渲染城市下拉列表 }); } });</code>
無需Ajax的替代方法:
如果州和城市的數量有限,可以將所有城市傳遞到視圖中,並將其分配給JavaScript數組。但是,這可能會導致初始加載時間略長。
在控制器中:
<code class="language-csharp">model.CityList = db.Cities.Select(d => new { City = d.CountryID, Text = d.CityName, Value = d.Id }).ToList();</code>
在視圖中 (JavaScript):
<code class="language-javascript">// 将所有城市分配给JavaScript数组 const allCities = JSON.parse('@Html.Raw(Json.Encode(Model.CityList))'); $('#StateID').change(function () { const selectedState = $(this).val(); const cities = $.grep(allCities, function (item, index) { return item.CountryID == selectedState; }); // 基于cities的值构建选项 // ... 使用cities数组渲染城市下拉列表 });</code>
以上是如何提高各州和城市的加載下拉列表的效率?的詳細內容。更多資訊請關注PHP中文網其他相關文章!