Wcf service writing PUT/DELETE methods crashes the service

Question

I am creating a web service to interact with a database and it is supposed to perform the CRUD operations. Right now it works fine with the read and post operation the WCF service supposed to have a method that is called from within jQuery whenever the page completes load to retrieve a list of all providers and it works fine, however, when I update the WCF Service with a method like this

[OperationContract]
[WebInvoke(Method = "PUT", RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json)]
public Object PutSupplier(int id, Supplier oParameter)
{
    // Do work
}

OR

[OperationContract]
[WebInvoke(Method = "DELETE", RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json)]
public Object DeleteSupplier(int id)
{
    // Do work
}

Something happen and no data comes back when the page loads and the insertion operation failed too and I got a 500 internal error?!. Like if the whole WCF Service got unseen or not functioning.

Here is my other WCF Service methods and the calling jQuery/Ajax

[OperationContract]
[WebInvoke(Method = "GET", RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json)]
public List<Supplier> GetSupplier(int id)
{
    // Add your operation implementation here
    return DbContext.DbContextManager.GetSupplier(id.ToNullableInt());
}
[OperationContract]
[WebInvoke(Method = "POST", RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json)]
public Supplier PostSupplier(Supplier oParameter)
{
    return DbContext.DbContextManager.PostSupplier(oParameter);
}

<script>
$(function () {
    $.ajax({
        method: 'GET',
        url: '/WebServices/NameService.svc/GetSupplier',
        data: JSON.stringify({ id : 0 }),
        dataType: 'json',
        contentType: 'application/json; charset=utf-8',
        success: function (item) {
            $.each(item, function (i) {
                var _tr = '<tr><td class="readonly-"><input type="text" class="form-control" value="' + item[i].CompanyName + '" style="display:table-cell; width:100%" readonly/></td><td>' +
                    '<button type="button" id="pencilbutton_' + item[i].SupplierId + '"  class="btn btn-success">' +
                    '<span class="glyphicon glyphicon-pencil"></span> Pencil</span></button>' +
                    '<button type="button" id="removebutton_' + item[i].SupplierId + '"  class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span> Remove</button></td></tr>';
                $('tbody').append(_tr);
            });
        }
    });
    $('table').on('focus', 'input[type="text"]', function () {
        $(this).removeAttr('readonly');
    });
    $(':button[class*="btn-primary"]').click(function () {
        if (Page_ClientValidate("MyValidationGroup")) {
            $.ajax({
                method: 'POST',
                url: '/WebServices/NameService.svc/PostSupplier',
                data: JSON.stringify({ 'SupplierId': 0, 'CompanyName': $(':text[class="form-control"]').val() }),
                dataType: 'json',
                contentType: 'application/json; charset=utf-8',
                success: function (item) {
                    var _tr = '<tr><td class="readonly-"><input type="text" class="form-control" value="' + item.CompanyName + '" style="display:table-cell; width:100%" readonly/></td><td>' +
                             '<button type="button" id="pencilbutton_' + item.SupplierId + '"  class="btn btn-success">' +
                             '<span class="glyphicon glyphicon-pencil"></span> Pencil</span></button>' +
                             '<button type="button" id="removebutton_' + item.SupplierId + '"  class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span> Remove</button></td></tr>';
                    $('tbody').append(_tr);
                }
            });
        }
    });
});