Блог

У меня есть страница, на которой есть список фильтров, на основе которых я хочу перезагрузить ее основное содержимое. Я пытаюсь сделать это с помощью window.history.pushState (HTML5), чтобы постоянно обновлять строку запроса URL каждый раз, когда пользователь меняет фильтры.

Это работает для первого фильтра и не работает, когда я добавил другой фильтр после первого.

Вот мой код. Функция FilteredByHospital() вызывается всякий раз, когда в контрольном списке больниц происходят изменения.

 var filters = new Object();
filters.Hospitals = new Array();
function FilteredByHospital(hospitalId) {
    debugger;
    var obj = { hospitalId: hospitalId };
    filters.Hospitals.push(obj);
    var isFirstFilter = window.location.href.indexOf('?') == -1;
    var currentUrl = window.location.href;
    if (isFirstFilter) {
        window.history.pushState(filters, "Filter_"   hospitalId, currentUrl   "?hospitalIds[0]="   hospitalId);
    } else {
        window.history.pushState((filters, "Filter_"   hospitalId, currentUrl   "amp;hospitalIds["   (filters.Hospitals.length - 1)   "]="   hospitalId));
    }
}
  

Контрольный список больниц (Razor)

 <div class="FilterBox">
    @foreach (var hospital in Model.Hospitals)
    {
        <input style="cursor: pointer;" type="checkbox" name="HospitalId" value="@(hospital.Value)" onchange="FilteredByHospital('@(hospital.Value)')"/><span>@(hospital.Text)</span><br/>
    }
</div>
  

Когда я устанавливаю один из флажков больницы, URL-адрес правильно меняется на http://localhost:56195/ApplicationHealthCheck/Index?hospitalIds[0]=139961407289011 , и действие моего контроллера выполняется.

Когда я делаю это снова для другого флажка, URL остается тем же, и действие выполняется снова только с первым идентификатором больницы. Вместо этого URL-адрес должен измениться на http://localhost:56195/ApplicationHealthCheck/Index?hospitalIds[0]=139961407289011amp;hospitalIds[1]=26419769705609 .

Что я делаю не так?

Во втором вызове pushState была дополнительная пара скобок.

Заменено

 window.history.pushState((filters, "Filter_"   hospitalId, currentUrl   "amp;hospitalIds["   (filters.Hospitals.length - 1)   "]="   hospitalId));
  

с

 window.history.pushState(filters, "Filter_"   hospitalId, currentUrl   "amp;hospitalIds["   (filters.Hospitals.length - 1)   "]="   hospitalId);
  

Внимательно посмотрите на эту строку вашего кода:

 window.history.pushState((filters, "Filter_"   hospitalId, currentUrl   "amp;hospitalIds["   (filters.Hospitals.length - 1)   "]="   hospitalId));
  

Вы заметили двойные круглые скобки в pushState(( ?

В этой строке вы не вызываете pushState с тремя аргументами. Вы применяете оператор запятой к своим аргументам, а затем передаете результат в pushState . Ваш код оценивается как

 window.history.pushState(currentUrl   "amp;hospitalIds["   (filters.Hospitals.length - 1)   "]="   hospitalId);
  

Что, очевидно, неправильно.