How to made an Angular JS + .Net (asmx) webservice http.post login page

Question

How are ya?

We got a project here, that must to be easy but is driving us crazy!

I have a login page, with two fields: username and password, we also have a webservice with a function called: FazerLogin(). That function made all the login job, validation, return and redirect to homepage.

My problem is:

We were using a simple HTML login page, two imput text and a send button, on action="" in tag, we put the webservice address, like on the example:

<form id="frmConnect" action="../../Services/wsSetup.asmx/Instalar" method="post" enctype="multipart/form-data">
 <table>
  <tr>
   <td>
    <input type="text" id="txtConnectionString" name="txtConnectionString" />
    <input type="submit" id="btnSubmit" name="btnSubmit" title="Submit" value="Submit" />
   </td>
  </tr>
 </table>
</form>

Now we are changing the system to Angular JS, and all I need to know is: How to make the form send the login and password information from this two to my webservice using http.post.

If you need any information, please ask me.

Thanks in advance!

Answer 1

Is your ASMX service using SOAP or JSON to serialize request / response?.

The ideal format of serialization would be JSON because is easier to work with in Javascript. If you had access to your back-end and you can modify your service to return JSON would be better. On this post you can find the information:

Return Json Data from ASMX web service

If you can't modify your backend one option would ve compose the SOAP request by hand as is it explained on this article:

http://www.c-sharpcorner.com/UploadFile/deveshomar/calling-webservice-using-ajax-jquery-with-soap-message-creat/

You should use $http Angular service instead of a jquery ajax call but the idea is the same.

Other complex option would be use "http://javascriptsoapclient.codeplex.com/" to generate a Javascript proxy from the service WSDL.

Answer 2

Ok this is how you can post data to an ASMX service using AngularJS

$http.post('/Login.asmx/LoginUser', { Username: 'the username' }).success(function(success) {
    // do something on success
}).error(function(error) {
    // do something on error
});