将复选框更改为ajax图像圈

时间:2011-04-18 19:16:38

标签: c# asp.net asp.net-mvc ajax

目前我有一个带有一堆复选框的网格 - 当点击一个复选框时,它会弹出一条警告,说明你的个人资料已经更新。我如何更改此而不是警告只是将复选框更改为ajax圈gif?我意识到我可以把它推到一个带有一些innerhtml的div并使其成为文本警报,但我不知道如何删除div。

复选框代码:

<div id='dropdown<%= proId + entitlements[i].Id.ToString() %>'>
                              <%using (Ajax.BeginForm("UpdateProfileByProfileAdmin", new AjaxOptions { OnBegin = "function(){ ShowProgress(" + proId + entitlements[i].Id.ToString() + ");}", OnComplete = "function(){ HideProgress(" + proId + entitlements[i].Id.ToString() + ");}" }))
                                {
                                    if (reqMode == "Edit")
                                    {%>
                                        <%=Html.CheckBox(proId + entitlements[i].Id.ToString(), profile.PresenceIndicators[i], new { onclick = "CheckEnt('" + proId.ToString() + "', '" + profid.ToString() + "','" + URLUpdateProfile.ToString() + "','" + entitlements[i].Id.ToString() + "','" + softwareId + "')", @class = "riskRank_dd" })%>
                                    <%}
                                    else
                                    {%>
                                        <%=Html.CheckBox(proId + entitlements[i].Id.ToString(), profile.PresenceIndicators[i], new {disabled = true})%>
                                    <% }%>
                                 <input type="submit" value="Go" class="hiddenSubmit" />

AJAX方法:

$.ajax({
                    type: "Post",
                    url: URLUpdateProfile,
                    data: "processProfileId=" + processProfileId + "&enabled=" + value + "&entitlementId=" + entitlementId + "&softwareId=" +softwareId,
                    success: function(affectedRows) {

                        if (affectedRows == "\"0\"") {
                            alert('Unable to update. Please check');
                            $('#' + id).attr('checked', !value);
                        }
                        else if (affectedRows == "\"-2\"") {
                        alert('Profile have no entitlements selected. Please check.');
                            $('#' + id).attr('checked', !value);

                        }
                        else if (affectedRows == "\"1\"" || affectedRows == "\"2\"") {
                            alert('Profile is updated successfully.');
                        }
                        else {
                         alert('The profile is duplicating with' +' '+ affectedRows+'.'+' '+'Please check.')
                         $('#' + id).attr('checked', !value);
                        }
                    }
                });

1 个答案:

答案 0 :(得分:1)

你自己完成了困难。

我可以给你一个概述。

将一个复选框和一个包含ajax图像的div放在一起。最初显示复选框,隐藏div。

在ajax请求的每个回调函数中,相应地显示复选框和div。您还可以使用jQuery的内置淡入/滑动方法来获得更好的效果。

如果这没有意义,请告诉我。我会写一些代码。

修改

类似的东西:

<div class="checkbox"><%: Html.CheckBoxFor .... %> </div> <div class="ajaxImage" style="display:none"><img src="the image" /> </div>

并在CheckEnt()函数内部(单击复选框时调用):

var theDiv = $(this).parent("div"); //get the parent div which contains the checkbox
theDiv.hide(); //you can also use .hide(400); to give a good slide out effect
var theImg = theDiv.next(); //get the ajax image div next to it
theImg.show();
$.ajax( { ... //make your ajax call now

最后是你的ajax调用的成功函数

theImg.hide();
theDiv.show(); //show the selected checkbox

我还没有测试过这一切,但它应该有效。