如何在asp.net中使用jquery在向客户端发送消息之前和之后显示/隐藏模态弹出窗口 c#

zkure5ic 于 2023-08-04 发布在 jQuery

关注(0)|答案(1)|浏览(136)

我想在发送消息到客户端之前显示一个模态弹出消息，并在发送消息到客户端（显示/隐藏）后隐藏该模态弹出消息，以实现我在下面写的逻辑概念。
注意（我的逻辑应该是这样的）：-当发送消息到客户端时，模态弹出窗口应该显示“您将很快收到消息，请等待片刻，一旦完成弹出窗口将关闭”，一旦所有消息发送到客户端，模态弹出窗口应该隐藏。
模态弹出逻辑：-

<div class="modal fade " id="modal_loader" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-bs-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-body">
                            <div class="form-group row">
                                <div class="loader"> <img src="assets/images/loding_animation.gif" /></div>
                                <p> <center>you will receive messages shortly please wait a moment once done popup will close</center></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

字符串
HTML逻辑是：

<a href="javascript://" title="Export to Whatsapp" id="plrepobulkwhatsapp" onclick="plreportexportexcel_pdftoemail()" class="btn btn-success">Email</a>

型
jquery逻辑是：

function plreportexportexcel_pdftoemail() {

$("#modal_loader").modal('show');

var msg = Successmessage("abc");
if (msg != "")
        {
            $("#modal_loader").modal('hide');
            alert(bulkexcelpdfmsg);
        }

}

型
在Successmessage(code)方法中，我编写了ajax逻辑来执行GenerateCustomPDF_ExcelBulk方法并获取msg返回数据。
aspx.cs：-

[WebMethod]
public static string GenerateCustomPDF_ExcelBulk(string clientcode)
{    
        string msg = "";

       //Here I written my required logic and returned the success message 
       //msg = "success";
        return msg;
}

型
这里我的要求是，如果我单击<a>标记，我的plreportexportexcel_pdftoemail()方法将执行，并应显示modal_loader弹出消息，一旦我收到msg响应
从后端GenerateCustomPDF_ExcelBulk方法modal_loader弹出消息应该隐藏这样我写了逻辑，但它没有正确执行。
建议我在我的代码中显示/隐藏弹出消息的错误在哪里？
对不起，我的英语不好。

新增：-新增Successmessage函数Loigic：-

public function getName（）{

//$("#modal_loader").modal('show');

var sus = "";
var param = { clientcode: clientcode };

var res = $.ajax({

    type: "POST",
    contentType: "application/json; charset=utf-8",
    url: "reports.aspx/GenerateCustomPDF_ExcelBulk",
    dataType: "json",
    //data: "{}",
    data: JSON.stringify(param),
    success: function (response) {

        //$("#modal_loader").modal('hide');

        sus = response.d;

    },
    async: false,
    error: function (err) {
        console.log("eror is ==> .. " + err);
    }

});


return sus;

型
}

jquery

来源：https://stackoverflow.com/questions/76730488/how-to-show-hide-modal-popup-before-and-after-send-message-to-clients-using-jque

1条答案

按热度按时间

33qvvth11#

这是 AJAX 时一个很常见的混淆。
JavaScript是异步的（大部分）。
因此，与其尝试从“SuccessMessage”函数返回值，不如尝试在特定的“callback”函数中执行逻辑。
否则，您最终会出现不希望的效果，例如在webrequest之后执行的“modal（'show '）”。
我必须做3个修改才能使你的代码工作：
1-使用“成功”回调。这将在Web请求成功完成后执行。注意，我把它设置为“async：true”。我也不会从这个函数返回任何东西。
所以你的代码应该是这样的：

function SuccessMessage(clientCode) {
    var param = { clientcode: clientCode };
    $.ajax({

        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "reports.aspx/GenerateCustomPDF_ExcelBulk",
        dataType: "json",
        //data: "{}",
        data: JSON.stringify(param),
        success: function (response) {

            //execute your logic here
            if(response !== undefined && response !== null){
                var msg = response.d;

                if (msg !== undefined && msg !== null && msg.trim() != "") {
                    console.log("notempty");
                    //added this delay for demo purposes only
                    setTimeout(function () {
                        $("#modal_loader").modal('hide');
                    }, 1000);
                } else {
                    console.log("empty");
                }
            }
            
        },
        async: true,
        error: function (err) {
            //error is an object not a string
            console.log(err);
        }

    });
}

字符串
2-将plreportexportexcel_pdftoemail函数更改为。它有一个错别字“成功消息”而不是“成功消息”... JavaScript是大小写敏感的。

function plreportexportexcel_pdftoemail() {

    $("#modal_loader").modal('show');

    SuccessMessage("abc");
}

型
3-更改C#操作以返回Json，因为您的函数总是返回空字符串。如果不返回Json，jQuery AJAX 调用将不会命中success函数，而是命中error回调。

public string GenerateCustomPDF_ExcelBulk(string clientcode)
{
    string msg = "123ABC";

    //there are better ways to convert to json like Newtonsoft
    return $"{{ \"d\":\"{msg}\" }}";
}

型
最后，所有这些都执行得真实的快，所以如果C#不花时间处理，看起来很奇怪。它会显示和隐藏模态真的很快。所以我使用setTimeout添加了一个JavaScript“delay”，只是为了演示的目的。你应该做对你的代码最好的事情。

赞(0）回复(0）举报 2023-08-04

我来回答

如何在asp.net中使用jquery在向客户端发送消息之前和之后显示/隐藏模态弹出窗口 c#

1条答案

相关问题

热门标签

最新问答