Winkel-5 Post-API-Aufruf

Ich bin sehr neu, um eine Winkel -, eine app zu Entwickeln, die in Winkel-5 . Ich bin versucht, post-Daten an eine API , unten ist mein code

.Net-Core-Web-API -

    [Produces("application/json")]
    [Route("api/Audit")]
         public class AuditController : Controller
        {
            private IConfiguration _configuration;
            private CommomUtility util;
            private Login Login;

            public AuditController(IConfiguration configuration)
            {
                _configuration = configuration;
                util = new CommomUtility(configuration);
                Login = new Login(configuration);
            }

            [HttpPost]
            public JsonResult Action([FromBody] List<Dictionary<string, string>> li)
            {
                DataTable dt = new DataTable();
                string jsonString = string.Empty;
                try
                {
                    if (li[0]["ActionMethod"].Equals("CheckLogin", StringComparison.InvariantCultureIgnoreCase))
                    {
                        dt = Login.checkLogin(li);
                    }
                }
                catch (Exception ex)
                {
                }
                finally
                {
                    dt.TableName = "Result";
                    jsonString = util.DataTableToJson(dt);
                }
                return Json(JObject.Parse(jsonString));
           }
        }

Winkel-Login Componenet

    import { Component, OnInit } from '@angular/core';
import { HttpClient,HttpClientModule,HttpParams,HttpHeaders } from '@angular/common/http';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  username: string="";
  password: string="";
  loginBtnText: string='Log In';
  clearBtnText: string='Reset Fields';
  message:string;
  cssClass:string;

  constructor(private http:HttpClient  ) { }

  ngOnInit() {
  }

  checkLogIn(){
    const params = new HttpParams();
    params.set('ActionMethod', 'CheckLogin');
    params.set('StaffCode', '15989');
    params.set('Password', '#####');
    var queryHeaders = new HttpHeaders();
    queryHeaders.append('Content-Type', 'application/json');
   debugger
    var v= this.http.post("http://localhost:57863/api/Audit/",
      params,{ headers: queryHeaders}
    )
    .subscribe(data => 
    {alert('ok');},
     error => 
     {alert("Error");}
    );
  }

  clearFields(){
    this.username="";
    this.password="";
    this.message="";
  }

}

Bin ich aufrufen checkLogIn() auf den button klicken , nach dem Aufruf dieser API, die es zu erreichen Konstruktor der API-Klasse nur, aber er geht nicht innerhalb von API-Methode.

Ich habe meine browser-Registerkarte Netzwerk, und es zeigen

415 Unsupported Media Type

Winkel-5 Post-API-Aufruf

Wenn ich das aufrufen der Get-API (values api), die standardmäßig kommt .Net-Core-Web-API-Vorlage als es funktioniert und zeigen, Warnung, OK, scheiterte aber im Fall von POST

Update 1

Winkel-5 Post-API-Aufruf

kannst du die Beispiel-json?
was ist json ?
Anfrage json-von der POST
Überprüfen Sie den Abschnitt HttpParams
Okay, gib mir paar Minuten
Überprüfen Sie die Antwort, die ich zur Verfügung gestellt
Entweder 1. auf Ihrer web-api benutzen [FromForm] anstelle von [FromBody]. Oder 2. auf Ihre kantigen Seite, legen Sie Content-Type: application/json. Siehe stackoverflow.com/questions/44538772/...
fühlt sich an wie Sie nicht aktivieren CORS auf Ihrem web-api-Seite. Stellen Sie sicher, dass CORS aktiviert und erlaubt, alle Header, die Sie in Ihren Anträgen.

InformationsquelleAutor Tanwer | 2018-04-06

2

Scheint, wie Sie erwähnt haben, von application/json-web-API als Produziert("application/json") aber nicht übergeben, es im header aus der Win-code.

Versuchen, diese
```
import { HttpClient, HttpHeaders,HttpParams} from '@angular/common/http';
```
wenn nicht ändern können, die web-api ändern Sie dann eckig-code, wie unten abgebildet, und halten Sie das web-api, wie es ist.

Winkel
```
checkLogIn(){
    var requestData=[];

    var params={
      "ActionMethod":"CheckLogin",
      "StaffCode":"15989",
      "Password":"####"
    }
    requestData.push(params);

    const httpOptions = {
          headers: new HttpHeaders({
            'Content-Type':  'application/json'
          })
        };

    //pass it if you can't modify web api
    var v= this.http.post("http://localhost:5000/api/Audit/",
      requestData,httpOptions
    )
    .subscribe(data => 
    {alert('ok');},
     error => 
     {alert("Error");}
    );

}
```
wenn Sie ändern, können web-api,

Winkel
```
checkLogIn(){
    var requestData=[];

    var params={
      "ActionMethod":"CheckLogin",
      "StaffCode":"15989",
      "Password":"####"
    }


    const httpOptions = {
          headers: new HttpHeaders({
            'Content-Type':  'application/json'
          })
        };

   //pass it like this if you can change web api
    var v= this.http.post("http://localhost:5000/api/Audit/",
      params,httpOptions
    )
    .subscribe(data => 
    {alert('ok');},
     error => 
     {alert("Error");}
    );
}
```
web-api-controller
```
public class LoginContract
{
    public string ActionMethod { get; set; }
    public string StaffCode { get; set; }
    public string Password { get; set; }
}

[HttpPost]
public JsonResult Action([FromBody] LoginContract li)
{
    DataTable dt = new DataTable();
    string jsonString = string.Empty;
    try
    {
        if (li.ActionMethod.Equals("CheckLogin", StringComparison.InvariantCultureIgnoreCase))
        {
            dt = Login.checkLogin(li);
        }
    }
    catch (Exception ex)
    {
        Console.Write(ex);
    }
    finally
    {
        dt.TableName = "Result";
        jsonString = util.DataTableToJson(dt);
    }
    return Json(JObject.Parse(jsonString));
}
```
Ich denke, dass Sie noch nicht aktiviert die Cors-Moduls in Ihrem web-api. fügen Sie den folgenden code zu starten.cs von Ihrem web-api.

Wenn Sie nicht installieren Sie die CORS nuget-Paket
```
Install-Package Microsoft.AspNetCore.Cors
```
Fügen Sie den code in ConfigureServices Methode.
```
services.AddCors(options =>
            {
                options.AddPolicy("AllowAll",
                    builder =>
                    {
                        builder
                        .AllowAnyOrigin() 
                        .AllowAnyMethod()
                        .AllowAnyHeader()
                        .AllowCredentials();
                    });
            });
```
Nun in der Configure-Methode fügen Sie den folgenden code vor app.UseMvc().
```
app.UseCors("AllowAll");
```
Ich hoffe, dies wird dein problem lösen. Wenn Sie irgendwelche Probleme oder Zweifel, lassen Sie es mich wissen.
- Jetzt heißt es 404 not Found . Und es sollte Content-Type json-aber im Kopf ist es nur show 'Access-Control-Request-Headers: content-type' und 'Request-Methode: OPTIONEN' statt POST
- Ich habe es für mich funktioniert? es können Fehler sein, aber es kann nicht sein 404. kann u befestigen Sie den screenshot?
- überprüfen Sie Update 1 , ich habe zwei ScreenShot
- überprüfen Sie die aktualisierte Antwort, der Fehler, den Sie bekam, weil cors ist nicht aktiviert
- es funktioniert , drücken Sie die api aber Parameter null ist , Etwas ist immer noch die Blockierung der params-Einstellung
- überprüfen Sie die aktualisierte Antwort bekam ich die params von Winkel-web-api ohne ein problem. überprüfen Sie, ob beide Winkel-code und web-api-code
- die übergabe Parameter und der Datentyp, der in Ihrer Empfangsseite nicht passen zueinander, das ist, warum Sie immer null. Ändern Sie die web-api als ich sagte, es funktioniert wie Charme 🙂
- ja es wird auf diese Weise funktionieren, aber Stell dir vor, jetzt habe ich zu entwickeln, die verschiedenen API für jeden Zweck habe ich (sagen wir 100) , mit Liste<dictionary<string,string>> ich möchte die Liste der Parameter als Schlüssel / Wert-paar , gibt es einen Schlüssel (ActionMethod) ist zwingend, die mir sagen, was zu tun ist und die anderen Tasten werden die Parameter name, deren Wert
- Lassen Sie uns weiter, diese Diskussion im chat.
- Ich aktualisiert meine Antwort. Überprüfen Sie es und lassen Sie mich wissen, die feedback.
- Vielen Dank , können Sie sich alle post über die Weiterleitung zu anderen Seiten im Angular5 und wie kann ich einen Mechanismus implementieren, wie Sitzung in asp.net core halten, einige Werte, die durch meine Anwendung
InformationsquelleAutor Suvethan Nantha
0

Fehler 415 Unsupported media type Sagen, dass der Wert des request-header content-type nicht, was der server erwartet in der Anfrage. Versuchen Sie, content-type-header mit dem Wert application/json, in eckig.
- Ich habe Inhaltstyp hinzufügen , check meinen post aktualisiert , aber in der Registerkarte "Netzwerk" noch zeigen Content-Type: application/x-www-form-urlencoded;charset=UTF-8
- Aber Sie sind nicht vorbei an das json-Objekt in der Anfrage. Pass json-Nutzlast, die direkt in die Anfrage.
- Ich versuchte das auch , Jetzt zeigt es den Fehler 404 Nicht Gefunden
- in der ajax-Welt ist dies ein sehr häufiges problem. Suche im internet über diese. Um es zu lösen, entweder Ihr server sollte den fehlenden header mit dem host-Namen Ihres angular app oder wenn Ihr eckige app bereitgestellt wird, auf demselben server, verwenden Sie den relativen Pfad in ajax-call.
InformationsquelleAutor Agam
0

Content-type scheint falsch zu sein. Sie können versuchen, das senden ein JSON-Objekt als payload direkt.
`
```
const payload = 
{'ActionMethod': 'CheckLogin',
'StaffCode': '15989',
'Password': 'a$a#'
}
var v= this.http.post("http://localhost:57863/api/Audit/",payload)`
```
- Mit diesem Ansatz zeigt, 404 Nicht Gefunden
InformationsquelleAutor Brian Li

Sind Sie vor COARS Fehler problem sehr berühmt
als u-aufrufen von anderen Prozessen verknüpfen schlagen so bewirkt, dont panic
Tun

webapiconfig.cs

  var cors = new System.Web.Http.Cors.EnableCorsAttribute("http://localhost:51156", 
  "*", "*");

        config.EnableCors(cors);

        //ADD JUST THIS LINE TO REGISTER FOLLOWING CLASS.
        config.Formatters.Add(new BrowserJsonFormatter());

fügen Sie nun folgenden code ovverride

//TO SEE DATA IN JSON IN CHROME BROWSER ADD FOLLOWING CLASS BrowserJsonFormatter and REGISTER IN METHOD ADD NEW OBJECT OF THIS CLASS.
public class BrowserJsonFormatter : System.Net.Http.Formatting.JsonMediaTypeFormatter
{
    public BrowserJsonFormatter()
    {
        this.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/html"));
        this.SerializerSettings.Formatting = Formatting.Indented;
    }

    public override void SetDefaultContentHeaders(Type type, HttpContentHeaders headers, MediaTypeHeaderValue mediaType)
    {
        base.SetDefaultContentHeaders(type, headers, mediaType);
        headers.ContentType = new MediaTypeHeaderValue("application/json");
    }
}

//-----------------------------------------------------------------------------------------------------------------------

InformationsquelleAutor Ashish Kamble

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.