Using Web API redirect to angular html page

web api redirect to url
rest service redirect to page
web api redirect not working
asp.net web api with angular

I want to redirect an HTML page using WEB API. I'm using ASP.Net Web API as a back-end and a front-end is on Angular 5. Here is my code. Here is my updated API source code.

[System.Web.Http.HttpGet]
public string[] Payment(string uri)
{
    try
    {
        RegistrationRequestX reg = new RegistrationRequestX();
        reg.Customer = "Test Api";
        reg.Channel = Channels.Web;
        reg.Language = "EN";
        reg.Amount = 10;
        reg.OrderID = "1234";
        reg.OrderInfo = "test info";
        reg.OrderName = "testing order";
        string retPath = uri;
        retPath = retPath.Replace("payment", "confirmation");
        reg.ReturnPath = retPath;
        RegistrationResponseX res = new RegistrationResponseX();
        res = client.Register(reg);
        client.Close();
        string[] sess = new string[2];
        sess[0] = paymentPortalURL;
        sess[1] = transactionID;
        return sess;
    }
    catch (Exception)
    {
        throw;
    }
}

You can return the redirect uri back to angular client with status code 302. At angular, you should check the returned status code. If it is 302 then redirect to returned redirect url.

Redirect to a page from Web API, Hi.. I have developed the REST API using web API. Now i need to redirect to a page from httpppost method in api controller. What is the feasible  Now, to test if our Web API code is working or not, just run the Application and navigate to api/Musics and we can see the following result: Now, our Web API is ready with all the functionality in place. The only task left is, we need to write some Angular and HTML code to manipulate the data in Single page Application. Building Application and

Use the window.location.href in your angular to set the first element of the array that you return to redirect to the Url that you expected

Build a CRUD App with ASP.NET Framework 4.x Web API and , NET Framework 4.x WebAPI and Angular 6. Project file tree with items to be removed highlighted. cd Angular ng serve HomeComponent will render Login button with a link to redirect URL for us to authenticate. You can return the redirect uri back to angular client with status code 302. At angular, you should check the returned status code. If it is 302 then redirect to returned redirect url.

You can change a return type of the cotroller method on IHttpActionResult and return using Ok and Redirect methods, inherited from ApiController.

For example see code below if you want to either return string[] with ok code (200) or a redirect (302) with Location response header with provided redirect link, depending on some condition:

[System.Web.Http.HttpGet]
public IHttpActionResult Payment(string uri)
{
    string[] sess = ...

    if (someRedirectCondition)
        return Redirect("http://a.link.to.your.html.page");
    else
        return Ok(sess); // A method type is inferred to Ok<string[]>(string[] content)
}

Client Side Routing Using Angular In MVC, AngularJS supports a Single page application routing module called ngRoute AngularJS appends '/#/' to the url to redirect to a particular url using Web;; using System.Web.Mvc;; namespace MVCWithAngularJs. Here, I have used ['​ng-Route'] when we will implement routing. NET Core API Analyzer. 10 Jun 2019 - Built with Angular 8.0.0; Running the Angular 8 Login Tutorial Example Locally. The tutorial example uses Webpack 4 to transpile the TypeScript code and bundle the Angular 8 modules together, and the webpack dev server is used as the local web server, to learn more about using webpack with TypeScript you can check out the webpack docs.

Use ASP.NET Web API and Angular to Build a Simple App, Use ASP.NET Web API and Angular to Build a Simple App First, let's create an API using a built-in template within Visual Studio. Project file tree with items to be removed highlighted. And the code for sugarlevel-list.component.html : Login redirect URIs: http://localhost:4200/implicit/callback. AngularJs is a powerful javascript framework for building dynamic web applications. It became insanely popular nowadays. The good thing about Angular is that it has a set of ready-to-use modules to simplify building of single page applications. In this tutorial, we will show you how to build a simple single page application. Even though we … Continue reading

Full-stack Tutorial: Angular 5 and ASP.NET Core, You will build an Angular 5 client that consumes a RESTful Web API Core 2 service. And finally all we're missing is to add the Material icons to index.html , inside by default, so if the user types the URL / , the page will redirect automatically  In the previous article, we have created a Web API and connected that with DB. Also, we have secured the Web API using the OAuth2.0 technique. Now, in this part, we will consume that API using an Angular app in the front-end.

AngularJS: Developer Guide: Using $location, AngularJS is what HTML would have been, had it been designed for building web-apps. To reload the page after changing the URL, use the lower-level API, toBe('http://example.com/base/index.html#!/a'); expect($location.path()). Opening a regular URL in a legacy browser -> redirects to a hashbang URL; Opening  Redirecting HTTP Request To HTTPS Using Web.config File in a previous article where I deployed a Web app using Visual Two Dates Using Web API And Angular 9. 04.

Comments
  • please post the complete code , it's not possible to guess
  • Why you don't return the url as json response from the action method using Url.Action()
  • @Niladri updated code has been posted.
  • @mbadeveloper will you elaborate??
  • how can i do that do you any example code, or link??
  • yes I do but It can show an error I confirmation page. " cannot POST subscription/confirmation"
  • You need to build the full url in the sess[0] = paymentPortalURL
  • yes its working on fire-base but not working on azure PAAS.
  • I want to return sess because there are two things in it paymentURL and Transaction ID.
  • @razasarwar You want to return a client redirect to paymentURL and pass Transaction ID at the same time? The problem here is if a client follows the redirect link in a standard way, your response body (with Transaction ID inside) will be lost.
  • what can I do to resolve this issue. I want to replace the string in uri from payment to confirmation and after payment process I want to redirect to confirmation page.
  • @razasarwar you can pass transaction id as an URL parameter of payment URL. So in controller return Redirect("http://your-payment-URL?transactionId=...");. However, you'd need to amend your payment page to process this transaction id URL parameter.
  • thanks @stop-cran its working fine but, the thing still not happen what I need