I’m doing some modifications in a Asp.Net MVC 4.5 aplication and some improvements are generating unexpected problems. Instead using input fields, i have chosen
the drop down lists. I use a Javascript file to get the values selected in the drop downs and they are used as params for my controller method. The
searching in the database is perfect and fast, but when i try to change the drop down values so fast or even when i wait for so long, the DDL are lagging/delaying for more
than 10 seconds. My javascript uses .change() to listen and “catch” the values. I think that probably it is the .change() which is causing this delay. See the use of .change below:
$(document).ready(function () {
var debounceTimeout = null;
$("#name, #age").change(function () {
if (debounceTimeout) {
clearTimeout(debounceTimeout);
}
debounceTimeout = setTimeout(refreshGrid, 500);
});
});
function refreshGrid() {
var name = $('#name').val() == "" ? undefined : $("#name").val();
var age = $("#age").val() == "" ? undefined : $("#age").val();
$.ajax({
url: "Search/recarregarGrid",
data:
{
name: name, age: age
},
type: "GET",
dataType: "html",
success: function (data) {
$("#GridResultFetchs").html(data);
}
});
}
And here is my Index.cshtml:
@{
ViewBag.Title = "Search";
}
<section class="search_title">
<h1>Fetch Session</h1>
</section>
<div class="search">
<div class="search-container">
<section>
<section class="input_filters">
<div>
<label for="nome">Name</label>
@Html.DropDownList("DdlNames", (IEnumerable<SelectListItem>)ViewBag.DdlNames, new { id = "name", style = "height: 25px; font-size: 12px; width: 100%;" })
</div>
<div>
<label for="age">Age</label>
@Html.DropDownList("DdlAges", (IEnumerable<SelectListItem>)ViewBag.DdlAges, new { id = "age", style = "height: 25px; font-size: 12px; width: 100%;" })
</div>
</section>
<section class="filtros">
<h3><i class="fa fa-filter">Searching criteria</i><i class="fa fa-undo" id="undo_filtering"></i></h3>
<ul class="name hide"></ul>
</section>
</section>
</div>
<div class="searchingResults">
<div id="GridResultFetchs">
@RenderPage("~/Views/Fetchings/GridViews/_GridView.cshtml")
</div>
</div>
</div>
<script src="~/Scripts/Util.js"></script>
<script src="~/Scripts/Fetch/AdvancedFetching.js"></script>
@Scripts.Render("~/bundles/scripts")
I will provide more information. But i really wanna find out a way to decrease those delays and fulfill my needs.