ASP How to change cursor AND go to controller action on the same button?-CodePudding

I have an issue. At the moment i have a button in the front that redirect to an action in the controller, all works fine.

            <div >
                <input type="submit" value="Create"  />
            </div>

But i want to change the cursor to hourglass during the calculations of the back end. I find the way to switch my cursor to hourglass :

document.body.style.cursor = 'wait';

The problem is that I don't know how to do both at the same time since the button will directly redirect to the back end without going through the js function. Is this the right way to change your cursor during calculations? Thank you for your help

CodePudding user response：

Asynchronous submission using ajax.

Ajax concept:

ASynchronous JavaScript And XML Asynchronous JavaScript and XML.

Asynchronous and synchronous:

Client and server communicate with each other.

Synchronize:

The client must wait for a response from the server. The client cannot do other operations while waiting.

asynchronous:

The client does not need to wait for a response from the server. While the server is processing the request, the client can perform other operations. Ajax is a technique for updating parts of a web page without reloading the entire web page.

Ajax enables web pages to be updated asynchronously by exchanging small amounts of data with the server in the background. This means that parts of a page can be updated without reloading the entire page. Traditional web pages (without Ajax) have to reload the entire web page if the content needs to be updated.

        <div >
            <input type="submit" value="Create"   onclick="fun();" />
        </div>


   //define method
     function fun() {
         //Use $.ajax() to send asynchronous requests
         $.ajax({
             url:"xxxxx" , // request path
             type:"POST" , //Request method
             //data: "username=jack&age=23",//Request parameters
             data:{"username":"jack","age":23},
             success:function (data) {
                 alert(data);
             },//The callback function after the response is successful
             error:function () {
                 alert("Something went wrong...")
             },//Indicates the callback function that will be executed if there is an error in the request response
             dataType:"text"//Set the format of the received response data
         });

       document.body.style.cursor = 'wait';
     }