image – 在MVC webgrid中添加“加载”指示符？

发布时间：2020-12-16 06:59:00 所属栏目：asp.Net 来源：网络整理

导读：我正在使用MVC3并在webgrid中显示我的数据.我想显示我过滤/搜索时显示的加载指示符(加载图像).什么是最好的方法？我的搜索过滤器(代码)： @using (Html.BeginForm()){ fieldset id="fieldset1" class="coolfieldset" legendSearch for Towers Watson Subscr

我正在使用MVC3并在webgrid中显示我的数据.我想显示我过滤/搜索时显示的加载指示符(加载图像).什么是最好的方法？

我的搜索过滤器(代码)：

@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)}

解决方法

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();
};

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!