converting existing webform page to use angularjs - javascript

I have the requirement to try out with converting an existing page in the project to use angularjs/bootstrap. Please correct me if I am wrong in my approach.
My project uses asp webforms, where I am planning to change one aspx page(which has grids, radiotbuttons and other asp controls as well ) to use angularjs controls .
What I have understood so far is that we need to have webmethods in the serverside which provide the data for the controls. So what all controls now declared in the serverside is not needed and I need to have the respective html controls in the client side and clientside angularjs calls the webmethod and returns the serialized data to controls in client side.I won't be able to access the server side controls in the webmethod as webmethods are static .
So in short we need to move all the logics that are in the existing aspx.vb for the controls to the client side angularjs code and only thing we can make use of with the aspx.vb is to provide the webmethods to provide data for the controls in client side.
Can someone correct me please ?

All your controls will need to be built using HTML and not ASP.Net controls.
You are correct in saying you will need to bind your HTML controls to the data you have sent back from the server. With regards to the logic of your form, that can sit in an angular service that your angular controller calls.
This will allow your logic to be encapsulated and be called from any angular controller.
You may use WCF, ASP.Net Web API or any server side technology that will allow http requests to provide/modify your data.
Moving a page at a time from ASP(X) to angular is probably a lot of effort. You would first want to start exposing your business logic via WCF/Web Api first and then move your application to use Angular.

Related

Webservice and website in the same project

I am reading a website project created on VS 2010 vb.net, where they have implemented a webservice.asmx in the same project to be called in javascript methods. In other words: the webservice is not implemented as API, it is a webservice.asmx where I can add methods to call database, and those methods are used in javascript functions.My questions are:
What is the importance of calling a webservice from javascript instead of making a postback to the server and retrieve data form there?
What about sessions? Does the webservice can view sessions of the user? I am asking this question because I can view some sessions filled as: HttpContext.Current.Session("UserID") = userId.
If it is possible to catch and fill sessions of the user pages, is it possible to have access to controls in asp pages of the same user? And Why?
I am a little bit confused with this webservice, what I know is that webservice runs on a server and is used as API in applications... this is the first time that I work with a webservice and website written in the same project, thank you.
1
Calling a WebService is a lot quicker than doing a PostBack, so if you want to only do partial updates of your website, a WebService is a good option to use (if you'd create the project from scratch, you'd use a Web API instead of an ASMX WebService). Of course, you have to integrate the result into the Web page on the client side. If you want to have asynchronous requests that lead to changes in the UI, you could also use an UpdatePanel on the ASPX-page.
It is also common to host the WebService in the same application as the Web frontend to avoid CORS issues.
2
The WebService can also access the session of the user if you set EnableSession on the WebMethod attribute to true. See this question for some pitfalls.
3
As the request to the WebService is a separate request it does not have direct access to a page's controls on the server (read in C#/VB.NET code), but you can change the HTML document tree on the client by using JavaScript.
If you need to share code on the server between the pages and the WebService, you should create separate methods in a helper/business logic class that are called by both the pages and the WebService.
To give an example, if both a page and the WebService need to get data from the database, you'd move the code for the database access from the ASPX page into a separate class (which is a good idea for many other reasons) and use the class both in the ASPX page and the WebService.

Getting ASP.NET Identity to Angular.js

I've set up ASP.NET Identity 2 in my MVC app to authorize users for both standard pages and Web API calls. Simply adding the [Authorize] attribute (with a few fixes) works just fine for preventing unauthorized access, but I also need the ability to get the current IPrinicple in the same way that I would use User.Identity in my MVC views and controllers. There are some things I can accomplish by using it in my views and controllers before they are handed off to Angular, but I also need to be able to read this value for things like creating menus based on the current user's role.
I've considered reading the ASP.NET Idenity cookies, but this requires decryption of the cookie, which I obviously won't be able to accomplish on the client side without revealing the decryption key.
Is there a way to pass off the User.Identity to Angular.js in a way that's consumable by the client side code?

Posting data as multipart/form-data the MVVC/AngularJS way

I am developing a webapp using AngularJS for the frontend (still very new to JS) and Go for the backend and I am stumped trying to POST multipart/form-data encoded data instead of URL encoded. I have tried to google it, but I cannot seem to find an example that doesn't assume that I'm only trying to upload a file. I am simply trying to POST a simple form with some text fields and no files.
I can get it work by bypassing Angular with a simple html form using method="POST", but it is surprisingly difficult to do in javascript.
On the server side, I am decoding the POST request with http.Request.FormValue("key").
Could someone point me in the right direction? Cheers!
There is always the posibility to invoke the submit() of the form element (using jQuery here):
$('#yourForm').submit();
This will (of course) require that the endpoint targeted by the form handle the "full browser rollby" - and redirect properly.
It might be a better solution (since you control both frontend and backend) to have the Angular application submit JSON (as it defaults) and just handle that on the backend.

How do I implement ReCaptcha in a Single Page Application (SPA)

I have a Single Page Application (SPA) I would like to add ReCaptcha to.
This application is hosted using IIS as flat Html, Css & Javascript, this SPA in turn talks to a separate REST server (using CORS) for all dynamic content.
The REST server is written using ASP.net WebAPI. The problem is; all examples I have seen of ReCaptcha all use ASP.net MVC (or other languages) to inject html into the webpage, I cannot modify the webpage using ASP.net in this manor. Hopefully someone else has had the same problem.
I am really looking for some 2 parts, first the HTML that belongs on the client, and secondly the Controller that would be on the REST Server to verify with google. Even if this is in another language that I can convert, this will be useful!
Looks like what I wanted was simply to use reCaptcha without plugins (https://developers.google.com/recaptcha/docs/display)
I have used ngx-captcha with my angular project.
Here's how I kept my submit button disabled until recaptcha checkbox is checked.
//code
<ngx-recaptcha2 (success)="handleSuccess($event)" #captchaElem [siteKey]="siteKey" formControlName="recaptcha">
</ngx-recaptcha2>
once captcha is filled , it emits a success event , so use it in a method to make a variable true/false based on which you can enable/disable submit button

Persist javascript changes on the server side

Does any body know how to persist javascript changes on the server side.
For example if I added items to a drop down list client side, how can i persist them in order to read them on the server side.
By the way, Telerik control have this feature.
Your questions doesn't contains any details, so I can only give you a generic answer:
You have to post the new data back to the server, either by using AJAX (I'd suggest using jQuery) or by sumbitting the new data in some field (preferably hidden) with a regular html-form (can be done in JavaScript or by having the user click "submit").
You need to tell the server what the Javascript did using AJAX or a hidden field.

Categories