Добавить индикатор загрузки в сетку MVC? - PullRequest
Новая
       24

Добавить индикатор загрузки в сетку MVC?

5 голосов
/ 28 ноября 2011

Я использую MVC3 и отображаю свои данные в сетке.Я хотел бы отобразить индикатор загрузки (изображение загрузки), отображаемый при фильтрации / поиске.Каков наилучший подход?

Мой поисковый фильтр (код): 

@using (Html.BeginForm())
{
     <fieldset  id="fieldset1" class="coolfieldset">

        <legend>Search for Towers Watson Subscribers/Contacts</legend>
        <div class="div-table">
        <div class="div-table-row">
            <div class="div-table-col">Reg Date:</div>
            <div class="div-table-col"><input id="regDateFrom" class="datepicker" name="regDateFrom" value="@regDateFrom" type="text" /> to <input id="regDateEnd" class="datepicker" value="@regDateEnd" name="regDateEnd" type="text" /></div>
        </div>
        <div class="div-table-row">
            <div class="div-table-col">Profile Mod Date:</div>
            <div class="div-table-col"><input type="text" id="profileModDateFrom" class="datepicker" value="@profileModDateFrom"  name="profileModDateFrom" /> to <input id="profileModDateEnd" class="datepicker" value="@profileModDateEnd" name="profileModDateEnd" type="text" /></div>
        </div>
        <div class="div-table-row">
            <div class="div-table-col">Last Name:</div>
            <div class="div-table-col"><input type="text" id="lastName" name="lastName" value="@lastName" /></div>
        </div>
          <div class="div-table-row">
            <div class="div-table-col"><input id="search" name="search" type="submit" value="Search" /></div>
            <div class="div-table-col"></div>
        </div>
        </div>      
    </fieldset>
}
{@Html.Partial("List_Ajax", Model)}

1 Ответ

5 голосов
/ 28 ноября 2011

http://www.ajaxload.info/ позволяет вам создать красивый загрузочный GIF. Создайте изображение и поместите его в div, как показано ниже. Затем свяжите кнопку поиска с jQuery, чтобы отобразить скрытый div при нажатии.

Поместите следующий div, где вы хотите, чтобы появился значок загрузки. 

<div id="loadingDiv" style="display:none"><img src="loading.gif"></div>

Тогда это в вашем файле Javascript 

$(document).ready(){
    $('#search').click(function(){
        $('#loadingDiv').show();
    });
});

Затем, когда вы закончите загрузку, просто: 

function SomeCallBackEvent(){
    $('#loadingDiv').hide();
};
...