locked
Database insertion problem in web api and angular7 RRS feed

  • Question

  • User1839056048 posted

    Hi All.

    I have an angular 7 application.iam using crud with web api

    following is the code for register in web api

    using System;
    using System.IdentityModel.Tokens.Jwt;
    using System.Security.Claims;
    using System.Threading.Tasks;
    using System.Text;
    using dateApp.API.Data;
    using dateApp.API.Models;
    using dateApp.API.Dtos;
    using Microsoft.AspNetCore.Mvc;
    using Microsoft.Extensions.Configuration;
    using Microsoft.IdentityModel.Tokens;
    namespace dateApp.API.Controllers
    {
        [Route("api/[controller]")]
        [ApiController]
        public class AuthController : ControllerBase
        {
            private readonly IAuthRepository _repo;
            private readonly IConfiguration _config;
            public AuthController(IAuthRepository repo, IConfiguration config)
            {
                _config = config;
                _repo = repo;
            }
    
            [HttpPost("register")]
            public async Task<IActionResult> Register(UserForRegisterDto userForRegisterDto)
            {
                userForRegisterDto.Username = userForRegisterDto.Username.ToLower();
    
                if (await _repo.UserExists(userForRegisterDto.Username))
                    return BadRequest("Username already exists");
    
                var userToCreate = new User
                {
                    Username = userForRegisterDto.Username
                };
    
                var createdUser = await _repo.Register(userToCreate, userForRegisterDto.Password);
    
                return StatusCode(201);
            }
    
           
        }
    }

    there is no error in web api application.

    following code for angular in register component .ts

    import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
    import { AuthService } from '../_services/auth.service';
    
    @Component({
      selector: 'app-register',
      templateUrl: './register.component.html',
      styleUrls: ['./register.component.css']
    })
    export class RegisterComponent implements OnInit {
      @Output() cancelRegister = new EventEmitter();
      model: any = {};
    
      constructor(private authService: AuthService) { }
    
      ngOnInit() {
      }
    
      register() {
        console.log(this.model);
    
        this.authService.register(this.model).subscribe(() => {
          console.log('registration successful');
        }, error => {
          console.log(error);
        });
      }
    
      cancel() {
        this.cancelRegister.emit(false);
        console.log('cancelled');
      }
    
    }
    

    code for service.ts

    import { Injectable } from '@angular/core';
    import { HttpClient } from '@angular/common/http';
    import { map } from 'rxjs/operators';
    @Injectable({
      providedIn: 'root'
    })
    export class AuthService {
    constructor(private http: HttpClient) { }
    baseUrl = 'http://localhost/5000/api/auth/';
    register(model: any) {
      console.log(model);
      return this.http.post(this.baseUrl + 'register', model);
    }
    
    
    }
    

    register.html

    <form #registerForm="ngForm" (ngSubmit)="register()">
      <h2 class="text-center text-primary">Sign Up</h2>
      <hr>
    
      <div class="form-group">
        <input type="text" class="form-control" required name="username" [(ngModel)]="model.username" placeholder="Username">
      </div>
      
    
      <div class="form-group">
        <input type="password" class="form-control" required name="password" [(ngModel)]="model.password" placeholder="Password">
      </div>
    
      <div class="form-group text-center">
        <button class="btn btn-success" type="submit">Register</button>
        <button class="btn btn-default" type="button" (click)="cancel()">Cancel</button>
      </div>
      
    </form>

    problem is when I enter and press register details following error showing

    OPTIONS http://localhost/5000/api/auth/register net::ERR_CONNECTION_REFUSED

    XHR failed loading: OPTIONS "http://localhost/5000/api/auth/register".
    scheduleTask @ zone.js:3243
    push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
    onScheduleTask @ zone.js:301
    push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:404
    push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
    push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:261
    scheduleMacroTaskWithCurrentZone @ zone.js:1245
    (anonymous) @ zone.js:3276
    proto.(anonymous function) @ zone.js:1569
    (anonymous) @ http.js:1723
    push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe @ Observable.js:43
    push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:29
    (anonymous) @ subscribeTo.js:21
    subscribeToResult @ subscribeToResult.js:11
    push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._innerSub @ mergeMap.js:74
    push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext @ mergeMap.js:68
    push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next @ mergeMap.js:51
    push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54
    (anonymous) @ scalar.js:5
    push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe @ Observable.js:43
    push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:29
    push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapOperator.call @ mergeMap.js:29
    push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:24
    push../node_modules/rxjs/_esm5/internal/operators/filter.js.FilterOperator.call @ filter.js:15
    push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:24
    push../node_modules/rxjs/_esm5/internal/operators/map.js.MapOperator.call @ map.js:18
    push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:24
    push../src/app/register/register.component.ts.RegisterComponent.register @ register.component.ts:21
    (anonymous) @ RegisterComponent.html:1
    handleEvent @ core.js:23107
    callWithDebugContext @ core.js:24177
    debugHandleEvent @ core.js:23904
    dispatchEvent @ core.js:20556
    (anonymous) @ core.js:22046
    schedulerFn @ core.js:13527
    push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:196
    push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:134
    push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:77
    push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54
    push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47
    push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:13499
    push../node_modules/@angular/forms/fesm5/forms.js.NgForm.onSubmit @ forms.js:4433
    (anonymous) @ RegisterComponent.html:1
    handleEvent @ core.js:23107
    callWithDebugContext @ core.js:24177
    debugHandleEvent @ core.js:23904
    dispatchEvent @ core.js:20556
    (anonymous) @ core.js:21003
    (anonymous) @ platform-browser.js:993
    push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
    onInvokeTask @ core.js:17290
    push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:422
    push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
    push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
    invokeTask @ zone.js:1744
    globalZoneAwareCallback @ zone.js:1770
    Show 26 more frames
    register.component.ts:24 HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: "http://localhost/5000/api/auth/register", ok: false, …}

    how to solve this

    regards

    Baiju

    Tuesday, April 9, 2019 6:52 AM

Answers

  • User-746821919 posted

    Looks like you have the wrong value in the baseUrl variable.

    Change it to

    baseUrl = 'http://localhost:5000/api/auth/';
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, April 9, 2019 9:36 AM

All replies

  • User-746821919 posted

    Looks like you have the wrong value in the baseUrl variable.

    Change it to

    baseUrl = 'http://localhost:5000/api/auth/';
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, April 9, 2019 9:36 AM
  • User1839056048 posted

    Thanks friend.

    it was by mistake

    Tuesday, April 9, 2019 6:40 PM