We Keep Coding

Good method for storing form data without submission in ASP.NET CORE

If I have a form on a page like so - (note the model property):
<form asp-action="ProcessQuote" id="form-calc-total">
<p id="calc-item">#Model.TheCounter.Value</p>
<button id="btn-add">+</button>
<button id="btnContinue" onclick="document.getElementById('form-calc-total').submit();">CONTINUE</button>
</form>
Let's say I have an event listener on the form so when btn-add is clicked, it triggers the following JS function which adds 1 to the counter.
function calculatorClick() {
let cou = document.querySelector('#calc-item');
cou.innerHTML = Number(cnt) + 1;
}
So now when the form submits, it hits the controller and within that I can store the number (#Model.TheCounter.Value) in a session variable if I want:
HttpContext.Session.SetString(SESSION_GUID, model.TheCounter);
That means if I revisit the page I can pull out the session variable and populate that field again.
But that's only stored on form submission - How can I get a session variable to store after each button click so it'd remember the counter without someone having to submit the form first?
I vaguely remember in PHP that there were SESSION variables that could be added to directly on the page with JS (I think) - but how can I do this within an ASP.NET CORE framework / MVC pattern?
Is this something AJAX would be used for?

But that's only stored on form submission - How can I get a session
variable to store after each button click so it'd remember the counter
without someone having to submit the form first?
The session value was stored on the server side, if you want to update and get the session value, you could create an Action method, then use JQuery Ajax to call this method and then update the session and get the latest value.
More detail information about using JQuery Ajax with Asp.net Core, see the following links:
jQuery AJAX and JSON Example in ASP.Net Core MVC
How to use jQuery AJAX method to call an Action method in ASP.NET Core
Besides, on the client side, you could also use web storage API to store the data, check the following tutorials:
Using the Web Storage API
HTML Web Storage API

Why findcontrol("x") ASP.NET method can not find a HTML control that made via javascript runtime?

my web page has an optional contact panel that user can add input text for any contact, like cellphone or email,when user click create contact button, it make an input text with attributes like unique id(for example txtrelat1) or runat="server"(in client-side but web page has an input text with id="txtrelat0" by default) and when user click submit button ,calls register method in server-side by onserverclick event,
main question is,when i use form1.FindControl("txtrelat0"),it's find and i can convert it to HtmlInputText but when i want form1.FindControl("txtrelat1") it's not find and return null?
thank's all

FindControl finds server controls in the page or control currently executing. It deals only with server controls. The code behind can still read values posted from the inputs you add. You could call Request.Form["x"].
The downside is that if you add additional controls to the page and then do a postback the server page isn't going to "remember" the elements you added. They'll just disappear after the postback.
Mixing those types of client/server behaviors with webforms isn't fun. You might find it easier to do it with all server controls. Just set Visible="false" or "true" in your server code in response to server events. Or you could do it all on the client using API calls.
Even though I don't like webforms that much, when I have to work in a webforms project it's often easier to do things the webforms way with server controls.

Dynamically Implementing Spring Security with Javascript

Is it possible to integrate Spring security into my DOM with dynamically created HTML? For example, display the button below only to users with ROLE_ADMIN:
var adminButton =
'<div sec:authorize="hasRole('ROLE_ADMIN')" style="display:hide">' +
'ADMINS ONLY ' +
'</div>'
$('#showButton').on('click', function(){
adminButton.show();
}
This wouldn't be a permanent solution but it would be good to know if secure content can be handled through say an AJAX request.

You mean displaying the button on click only if the user is admin? When #showButton is clicked you could ask the server, through AJAX, if the current session has such privilege. But why just not render the button only if the user is administrator?
Because the code for generating the button is still there, someone could inspect the JavaScript and easily bypass your check. In general is a bad practice to handle security aspects client side, what you usually do is only a first validation, in order to signal errors without the need to refresh the page, but every parameter of every action should be then validated server side.
In a case like this you do a double check. The first time when you generate (or not) the button, the second time in the code that handles the action the button triggers.

Call JS function before redirect

The situation is as follows:
A user on the client side enters some data and presses a command button that initiates an ajax request. Depending on the input data the JSF Bean on the server side redirects to different pages. But in addition the HTML5 features localstorage respectively sessionstorage should be updated on client side, also depending on the results from the bean. For the storage some data entered from the user is necessary, so that the java script for the storage has to be within the original page.
Now, the problem seems to be that after the response the redirect is always done first, before executing the js function and so it is not possible to access the input data from the user on the client side of curse.
I tried things for calling the js function after pressing the command button like "oncomplete" on the client side using callback parameters (redirect takes place earlier) or RequestContext.execute from the server side (but this internally also uses the oncomplete event i think).
One possible solution I could imagine is to use window.onunload on client side and a hidden input formular to get the result of the bean. But isn't there a better solution?

You need to redirect by JS instead of by JSF. Return null from action method so that it returns to the same page and then execute the following script to perform a redirect in JS.
window.location = newURL;

If you use PrimeFaces with JSF then it's possible to make global override of PrimeFaces.ajax.ResponseProcessor.doRedirect in javascript to put any custom code before actual redirect happens:
PrimeFaces.ajax.ResponseProcessor.doRedirect = function(node) {
// <<<< your code is here >>>>
window.location = node.getAttribute('url');
}
Put this code in some js file and include it in all your pages.

Value of hidden field is lost after loading the page in html

I want a scenario in which I will set some value of a hidden field in a particular page.
Then that page is submitted on server (form submit). Now, i redirect on another page and there I again try to retrieve the value which I set previously. But I am not getting there the value which was set, instead i get the default value which I provided in html page itself. (Hidden field is in header page which is common for all the pages in my web app).
i tried a dummy application in which i am getting the value of hidden field even after loading/refreshing the page once i set it.

When you redirected your user to another page, it became reloaded. Unless you chose to set a value to your form (by javascript for instance), the value of the form is the default one.
The value you "set previously" wasn't definitely associated to the input because everytime you reload the page, your server will generate again the HTML and the default values and your browser will display this HTML.
This behavior is normal.
Besides, if you want to keep the values of the form while submitting it, you can use AJAX submitting.

The other answers here are factually correct (that HTML doesn't normally do what you're asking it to do), but there are a few things you can do to make it work.
First, how things usually work: In order for the second page to get the proper value of the hidden field, you would process it in the server-side component. It sounds like you are redirecting to a new page in the server-side handler. The best way to make this work is to have that server-side handler process the value and attach it to the redirect as a parameter (likely attached to the querystring). Then have some server-side code generate the second page, which would process the querystring parameter.
Here's the work-around for pure-HTML/javascript implementation:
If you can't or won't have a server-side process to generate the second page, you could pull it out of the querystring using Javascript (just search for 'getting querystring variables in javascript').
If you use javascript, it could be feasible (though probably not advisable) to have the first form go directly to the second page by setting it as the form's action with a method of 'GET'. It's definitely better to include a server-side handler though.

What your trying to do is impossible through regular HTML since HTML is stateless. What you want is to put your values in a session or in a cookie and this way you can plant it on every page that is loaded.This cannot be done by default.

You're mis-understanding how HTTP works - it is stateless.
This means that every single page you request is completely separate to previous pages. Which is the reason your hidden textbox is being set back to default.
You have to explicitly set the value server side prior to it being sent to the client.