Невозможно опубликовать данные в WebApi с помощью Jquery из html5

У меня проблема с публикацией данных в контроллер WebaPi с использованием Jquery ajax на html-странице. Когда я тестирую через скрипач, он подключен и работает нормально, но когда я пытаюсь использовать Ajax, он дает только ошибку

вот мой пример кода..

var bookData = {
                "CurrentCompany": "BizSight Sample Product Company",
                "CompanyName": CompanyName,
                "LegalName": "Biztech",
                "Address1": Address1,
                "Address2": Address2,
                "City": City,
                "State": State,
                "Phone": Phone,
                "ZipCode": ZipCode,
                "Fax": Fax,
                "Email": Email,
                "Website": Website,
                "CountryID": 1,
                "federalTaxID": 1,
                "CurrentUser": CurrentUser,
                "BusinessType": BusinessType,
                "CurrentFiscalYear": Jsondate
            };
            $.ajax({
                type: "POST",
                cache: false,
                url: "http://77b2130d5c3446eea4e4210c51529230.cloudapp.net:8080/Create/",
                data: JSON.stringify(bookData),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                processData: true,
                success: function (data, status, jqXHR) {
                        var result = JSON.stringify(data);
                    $("#loading").show();
                    alert("success..." + result);
                },
                error: function (xhr) {
                    $("#loading").show();
                    alert("Test3:" + xhr.statusText);
                }
            });

Когда я отправляю данные из html и проверяю скрипач, он выдает сообщение, как показано ниже.

введите здесь описание изображения я что-то пропустил в этом коде..? Скрипач сам по себе работает, но html-страница frmo не работает. Не могли бы вы помочь мне, как решить и достичь этого

Мой класс API `

public class CreateController : ApiController
{
    public static string CompanyName = " ";
    public static string con;
    public static string sqlConnection;
    public static string DatabaseName;
    string TrustedConnection = "Yes";
    string DBServer = " ";
    string FilePath = null;
    string testFirstline = " ";
    //clsLog objLog = new clsLog();
    bool isSuccess = false;




    public string Post(DatabaseCls cls)
    {
        string ReturnMessage = "Success";

        // ReturnMessage = "Hello  " + id + "_" + parameter1 + "_" + parameter2 + "_" + parameter3 + "_" + parameter4 + "_" + parameter5 + "_" + parameter6 + "_" + parameter7 + "_" + parameter8 + "_" + parameter9 + "_" + parameter10 + "_" + parameter11 + "_" + parameter12 + "_" + parameter13 + "_" + parameter14 + "_" + parameter15;
      return ReturnMessage;
    }}

Спасибо Виктор .А


person Victor Athoti.    schedule 03.11.2015    source источник
comment
ты уверен, что тебе нужно это сделать : data : JSON.stringify(bookData),   -  person Timothy Groote    schedule 03.11.2015
comment
Можете ли вы показать ошибку, которую вы получаете, метод webAPI и класс, в который вы пытаетесь сериализоваться? Если метод найден при вызове его из ajax, но вы получаете сообщение об ошибке, то, скорее всего, ваш объект не будет сериализован в указанный вами тип или ваш веб-API не настроен для разрешения запросов CORS.   -  person Stephen Brickner    schedule 03.11.2015
comment
@timothy, мне нужно передать данные json в мой API .. есть ли альтернатива ..?   -  person Victor Athoti.    schedule 03.11.2015
comment
@Stephen, он не выдает никаких сообщений, кроме строки ошибки..... но когда я тестирую метод публикации скрипача, он становится опцией ..   -  person Victor Athoti.    schedule 03.11.2015
comment
Хорошо, ошибка параметров, которую вы видите, - это проблема CORS, о ​​которой я говорил. Ваш API должен быть настроен для разрешения межсайтовых запросов.   -  person Stephen Brickner    schedule 03.11.2015
comment
@Stephen, я обновил свой исходный запрос, добавив свой класс API, не могли бы вы проверить мой класс API ..   -  person Victor Athoti.    schedule 03.11.2015
comment
Если вы получаете сообщение об ошибке OPTIONS, то CORS — это ваша проблема (на это у меня есть ответ ниже). Я также обновлю свой ответ предложением для вашего метода API.   -  person Stephen Brickner    schedule 03.11.2015
comment
@ВикторАтоти. я не уверен, чего ожидает ваш обработчик. отсутствие строковых данных приведет к тому, что они будут отправлены как отдельные переменные POST.   -  person Timothy Groote    schedule 03.11.2015
comment
@ Тимоти, тогда как я могу опубликовать свои данные в APIController ... не могли бы вы помочь мне ...   -  person Victor Athoti.    schedule 04.11.2015


Ответы (1)


Ошибка OPTIONS, которую вы видите, связана с CORS. Вам нужно добавить это в свой WebAPI в Startup.cs, чтобы разрешить межсайтовые запросы.

public void Configuration(IAppBuilder app)
{
    app.UseCors(CorsOptions.AllowAll);

    var formatters = configuration.Formatters;

    //-- Disable XML support
    formatters.XmlFormatter.SupportedMediaTypes.Clear();

    var jsonFormatter = formatters.JsonFormatter;
    jsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("application/json-patch+json"));
    jsonFormatter.SerializerSettings.Formatting = Newtonsoft.Json.Formatting.Indented;
    jsonFormatter.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();
    jsonFormatter.SerializerSettings.NullValueHandling = NullValueHandling.Ignore;
    jsonFormatter.SerializerSettings.DateTimeZoneHandling = DateTimeZoneHandling.Utc;
}

(редактирование, предложение)

[RoutePrefix("api")]
public class CreateController : ApiController
{
    [HttpPost, Route("create")]
    public IHttpActionResult Post([FromBody]DatabaseCls cls)
    {
        try
        {
             return Ok(new { success = true });
        }
        catch
        {
             return InternalServerError();
        }
    }
}

$.ajax({
  type: "POST",
  cache: false,
  url: "http://77b2130d5c3446eea4e4210c51529230.cloudapp.net:8080/api/Create", //note the additional "api" in url
  data: JSON.stringify(bookData),
  dataType: "json",
  success: function (data, status, jqXHR) {
       var result = JSON.stringify(data);
       $("#loading").show();
       alert("success..." + result);
   },
   error: function (xhr) {
       $("#loading").show();
       alert("Test3:" + xhr.statusText);
   }
});
person Stephen Brickner    schedule 03.11.2015
comment
Он находится в System.Web.Http. Если вы не можете его добавить, вы можете просто удалить его и изменить маршрут на этот: [HttpPost, Route(api/create)] - person Stephen Brickner; 03.11.2015
comment
Привет, Стивен, это мне не помогает ... я пробовал то же самое, что вы мне предлагаете ... это дает исключение 415, когда я проверяю скрипача ... - person Victor Athoti.; 04.11.2015
comment
Возможно, вам просто нужно разрешить json в вашем webApi. Я отредактировал ответ, чтобы показать это. Кроме того, при использовании fiddler вам необходимо указать тип содержимого. Тип содержимого: приложение/json - person Stephen Brickner; 04.11.2015
comment
Я бы также посмотрел на бесплатное приложение под названием Postman, которое гораздо удобнее для тестирования вашего API, чем Fiddler. - person Stephen Brickner; 04.11.2015
comment
Давайте продолжим обсуждение в чате. - person Victor Athoti.; 04.11.2015