In Razor pages ASP.NET Core, how do I do a basic onclick event for a button which is of type button?
Do I need to wire up an AJAX GET request to get the below "Resend Code" button to work? There is plenty of chatter about OnPost this and that.. but I don't want to post.
Can't be this hard?
<form method="post">
<div asp-validation-summary="All"></div>
<div class="form-group-item">
<label asp-for="Input.TwoFactorCode"></label>
<input asp-for="Input.TwoFactorCode" class="input" />
<span asp-validation-for="Input.TwoFactorCode"></span>
</div>
<div class="form-group-item">
<label class="margin-0" asp-for="Input.RememberMachine">
<input asp-for="Input.RememberMachine" />
#Html.DisplayNameFor(m => m.Input.RememberMachine)
</label>
</div>
<div>
<button type="button" asp-page-handler="ResendCode" class="btn btn-light">Resend Code</button>
<button type="submit" class="btn btn-secondary">Confirm</button>
</div>
</form>
As it stands, the button won't do anything. You can use JavaScript to intercept the button click and then fire a get request using AJAX (jQuery example below):
$('.btn.btn-light').on('click', function(){
$.get('?handler=ResendCode', data, function(){
...
});
});
You can try changing the button to use formmethod="get":
<button type="submit" formmethod="get" asp-page-handler="ResendCode" class="btn btn-light">Resend Code</button>
Note, this will only work for buttons that have type="submit" or type="image" (other type-values don't cause the form to submit). Also it's an HTML5 attribute.
Reference:
https://html.com/attributes/input-formmethod/
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formmethod
maybe try making your own custom handler methods other than OnPost() and OnGet()
Related
I am trying to learn .net core and what I want to do is: I have a search bar and a GetDetail function in controller. I want to trigger that function when clicking search button according to text in form. But when I click button, nothing happens. I did not complete the trigger part but even if I simply redirect to another page with href, also nothing happens. Here is my search bar view code which taken from sbadmin2:
<div class="row justify-content-center">
<div class="col-6 p-3">
<div class="input-group">
<input type="text" class="form-control bg-light border-0 small" placeholder="Input" aria-label="Search" aria-describedby="basic-addon2" id="code">
<button class="btn btn-primary" type="button" action="/Books/GetDetail?">
<i class="fas fa-search fa-sm"></i>
</button>
</div>
</div>
</div>
and the function I want to trigger is a get request:
public IActionResult GetDetail(string codes)
{
var request = $"?codes={codes}";
var products = _httpTool.HttpGetAsync<List<Products>>($"{AppSettings.ApiUrl}/GetProducts{request}");
var productList = products.Result.ToList();
return Json(productList);
}
Why nothing is happening and how can I achieve this?
Thanks in advance!
try something like this:-
<form method="post" asp-action="GetDetail">
//clarify code
<input type="submit" value="Search" class="btn btn-outline-primary mt-1"/>
//clarify code
</form>
[HttpPost]
public IActionResult GetDetail(string codes)
{
var request = $"?codes={codes}";
var products = _httpTool.HttpGetAsync<List<Products>>($"{AppSettings.ApiUrl}/GetProducts{request}");
var productList = products.Result.ToList();
return Json(productList);
}
After clicking Searchyou see something will happen.
I have an button on my razor page where I submit a value to my post method.
All worked as I want to
<input type="submit" value="Resend Link" asp-for="#resendLink" class="btn btn-primary" />
in my c# I catch the value on post
public async Task<IActionResult> OnPostAsync(string resendLink)
Now I simply wanted to localize the language of the button
<input type="submit" value=#Localizer["Resend Link"] asp-for="#resendLink" class="btn btn-primary" />
Localizer does not work
It works if I use it without asp-for tag or if I declare it with button tag
<button type="submit" asp-for="#resendLink" value="ResendLink" class="btn btn-primary">#Localizer["Resend Link"]</button>
However like that it does not anymore transfer the value to my post method.
How can I localize it? and still have the transfer?
Tks for helping!
Asp.net core bind data with name attribute.As you said It works if I use it without asp-for tag or if I declare it with button tag.You can remove asp-for tag and add name attribute like this:
<input type="submit" value=#Localizer["Resend Link"] name="resendLink" class="btn btn-primary" />
Until now I gave been using Avoriaz, but I would like to use Jest now ...
found some tuts... but could not get any hint on testing my contact view component sending POST to an external urk...
<form id="contactForm" action="https://formspree.io/mysite.com" method="POST">
<div class="form-group">
<input type="hidden" name="_next" v-model="next" />
<input type="hidden" name="_language" v-model="language" />
<input type="hidden" name="_subject" value="Contact from my site" />
<input v-model="sendername" ...>
<input v-model="email" ...>
</div>
<div class="form-group">
<div class="uk-margin">
<textarea v-model="message" ...></textarea>
</div>
</div>
<button type="submit" class="btn btn-primary btn-gradient submit">Send</button>
</form>
As the external post URL is only valid for production... I would like mock it and use the _next property as a callback page url...
any useful links to put me on first tracks ?? thanks a lot for feedback
You should prevent submit and post data using axios for example and then mock axios.
<!-- the submit event will no longer reload the page -->
<form v-on:submit.prevent="onSubmit"></form>
It's an easier way to unit-test that.
i am learning angular can someone please help me on following :
I have one form which save user (i call api on this submit click). i need to use same form for update user , for that i took two buttons i show "submit" button if user is new (i managethis new and old user from ge api call in OnInit()) and another button is "update" button, i show and hide this buttons depending on Get api call for user in onInit().
form demo code :
<form class="form-area" (ngSubmit)="ngSubmit(applicant)" name="applicantForm" #applicantForm="ngForm" ngNativeValidate>
<div> some fileds</div>
<div class="row" style="content:center">
<div class="col-md-12">
<div class="form-row">
<div class="form-group">
<button *ngIf="submitStatus" type="submit" class="btn btn-info" [disabled]="!applicantForm.form.valid">
<i class="fa fa-send-o"></i> Submit</button>
<button *ngIf="updateStatus" type="submit" class="btn btn-info" [disabled]="!applicantForm.form.valid">
<i class="fa fa-send-o"></i> Update</button>
</div>
</div>
</div>
</div>
</form>
question :
i call (ngSubmit)="ngSubmit(applicant)" method on submit button call to save user, but i confused in how i differentiate this both operation to call ngSubmit(applicant).
i need to perform both operation in single function call from controller.
thanks
I am building a website with a google+ login.
The site is responsive, so i have a different google+ button for web and mobile as follows:
signin button for mobile view -> hidden in web view
<div id="mobile" class="container visible-xs hidden-sm hidden-md hidden-lg">
<div class="row">
<div class="col-xs-12 mobile-signup-form">
<form class="form-signin">
<h2 class="form-heading visible-xs hidden-lg hidden-sm hidden-md">Find great tour guides.</h2>
<input type="text" class="form-control" placeholder="Pick a Username" autofocus>
<input type="text" class="form-control" placeholder="Your email">
<input type="password" class="form-control" placeholder="Create a Password">
<button id="submit-btn" class="btn btn-lg btn-primary btn-block" type="submit">Sign up for Tourbly</button>
<div class="hr-with-words">
<span class="smallor">or</span>
</div>
<div id="gSignInWrapper">
<div id="customBtn_M" class="customGPlusSignIn">
<span class="icon"></span>
<span class="buttonText">Google</span>
</div>
</div>
</form>
</div>
</div>
</div>
signin button for web view -> hidden in mobile view
<div id="gSignInWrapper" ng-show="immediateFailed">
<div id="customBtn" class="customGPlusSignIn">
<span class="icon"></span>
<span class="buttonText">Sign up with Google</span>
</div>
</div>
I use the following JS code to render the button for web view
gapi.signin.render('customBtn', {
'callback': 's_up_c_bks_loc',
'clientid': '1066634592899.apps.googleusercontent.com',
'cookiepolicy': 'single_host_origin',
'requestvisibleactions': 'http://schemas.google.com/AddActivity',
'scope': 'https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email'
});
I can only pass one id to the render function, how can i get the right button rendered for the right view (mobile or web).
I have tried rendering both but the last one overrides the first.
I'm using angular js, so any suggestions/solutions which makes use of that will be appreciated.
Thanks
You can call the render function more than once, which might be the easiest way. You can move the second parameter to a var which you pass to both calls, or you might want to take advantage of thew new page level config: https://developers.google.com/+/web/signin/reference#page-config
This might be the easiest way, as it will trigger an immediate mode check (see whether the user has previously consented, and fire the callback) as soon as the page loads. This means you could choose which to render at that time, as part of the immediate failed (I notice you have a reference to an immediateFailed var in ng-show which is presumably only displaying if the immediate check failed, so you're doing the right sort of thing already).
If using page level config, you wouldn't even need to pass the parameters, just call:
gapi.signin.render('customBtn');
gapi.signin.render('customBtn_M');