CODEWITHSUNDEEP
.netajaxangular
kris
kris

Reputation: 23

Enable/disable a button based on Http response

I am currently developing an Angular App with .net as Backend. I am looking for guidance on how to Enable a button in Angular, when an ajax post request is successful or when the response is ready on backend(c#).

appcomponent.html

 <button mat-button (click) = "cvalid()" >submit</button>
 <button mat-button id="getdoc" (click) = "getdoc()" [disabled] = "disabled" >Download</button>

appcomponent.ts

cvalid(){
 $.ajax({
    type: "POST", 
    url: 'http://localhost:5000/api/D/Postdata',       
    data: d1,
   contentType: "application/json",    
  success: function (data) {
    console.log(data)
    console.log(typeof(data));
    this.disabled = false ; //button trigger .
  }, 
  error: function (data) {
      console.log('error in sending data...:(');

 },
  });
}

controller

  [HttpPost]
   public IActionResult Postdata([FromBody] RootObject data)
   {
        var data1 = JsonConvert.SerializeObject(data)
        return Ok(data1);

   }

Please guide me regarding this. Thanks in Advance.

Upvotes: 1

Views: 1045

Answers (1)

Adrita Sharma
Adrita Sharma

Reputation: 22213

Declare that = this so you have a reference of this

Try like this:

cvalid(){
 this.disabled = true;
 var that = this;
 $.ajax({
    type: "POST", 
    url: 'http://localhost:5000/api/D/Postdata',       
    data: d1,
   contentType: "application/json",    
  success: function (data) {
    console.log(data)
    console.log(typeof(data));
    that.disabled = false ; //button trigger .
  }, 
  error: function (data) {
      console.log('error in sending data...:(');

 },
  });
}

Note: In Angular, you should use HttpClient

Upvotes: 1

Related Questions