Kapein Kapein - 1 month ago 11
ASP.NET (C#) Question

How to stop a page refresh in angular 2 within aspx

The pagemethod works, however when I use the webmethod it refreshes the page destroying the reason to use angular 2 in the first place.

How do I prevent the form from refreshing the page?

index.aspx

<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManagerMain"
runat="server"
EnablePageMethods="true" >
</asp:ScriptManager>
<my-app>Loading...</my-app>
</form>
</body>


index.aspx.cs

[WebMethod]
public static string getString()
{
return "Test";
}


app.component.html

<div>
<Button (click)="btnSubmit_Click">test</Button>
</div>


app.component.ts

btnSubmit_Click()
{
var test = window['PageMethods'].getString(this.onSucces, this.onError);
}


note:

At this moment I'm trying to use angular 2 with aspx for the company if it works it might become a standaard for small frontend api's and since its quite limited on information I appreciate any help.

Answer

You should make button type as button, because by default button type is submit. button with type submit may lead to post back a page.

<div>
    <Button type="button" (click)="btnSubmit_Click()">test</Button>
</div>