I am having a WCF Service (Ajax-enabled) and I need to call its methods using AJAX. The WCF Service name is NameService.svc and it is located within a WebService folder at the root directory of the Website. Here is how things work: I have to create a user control which includes a table layout containing the text fields to collect the user data and when clicking the button I need to use jQuery and Ajax to call the methods which will insert the data to the database. I tried the following code but it did not work for me and I need to know what I am missing or wrote incorrectly within the user control:
$(function() {
$('button').click(function() {
var name = $('text').val();
$.ajax({
url : 'NameService.svc/InsertData',
data : { suppliername : name },
method : 'post',
datatype : 'json',
success : function(data) {
alert(data);
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="table">
<tbody>
<tr>
<td>Supplier Name:</td>
<td><input type="text" name="sname"></td>
</tr>
<td colspan="2"><button type="button" class="btn btn primary">Insert</button></td>
</tbody>
</table>
Note I am using Bootstrap within my project. Is there a problem using the button element instead of input element with type as submit? What have I missed in the url of the ajax call? Should the method within the WCF Service be decorated with specific attributes? If I will call a method that will return only data should I use the data property within the Ajax call or ignore it also the method will be post to or it should be get in that way.
</div>