Currently, I have a form that calls a method in my controller. It sends a string as a parameter to my IActionResult (the string is always a numer since I am getting it from an input of type range between 1 and 12). The method looks like this: public IActionResult ChangeForecastMonths(string forecastMonths) The code in my view is the following:
<form asp-action="ChangeForecastMonths">
<input asp-for="FutureForecastMonths" name="forecastMonths" type="range" class="custom-range" min="1" max="12" step="1" />
<input type="submit" value="Save" class="btn btn-primary" />
</form>
What I'm trying to do is -- instead of the ChangeForecastMonths method being called whenever the submit button is clicked -- to actually have it called whenever the input field changes its value.
You could hook to the change() event of the input, then fire a submit() on the parent form, like this:
<form asp-action="ChangeForecastMonths">
<input asp-for="FutureForecastMonths" name="forecastMonths" type="range" class="custom-range" min="1" max="12" step="1" />
<input type="submit" value="Save" class="btn btn-primary" />
</form>
#section Scripts
{
<script>
$('form input').change(function() {
$(this).closest('form').submit();
});
</script>
}
Result:
Related
I have a button on a GET Form on asp.net core razor pages
<form method="get" asp-page="Index">
<button type="submit" asp-page="Index" asp-page-handler="Something" class="btn btn-primary"></button>
</form>
and the code behind
public IActionResult OnGetSomething(){
//... some code
return Page();
}
My problem is the onget handler code is never executed
If the form is POST the onpost handler will work fine but if it is GET it doesn’t work
So what am I missing here? and how to make the onget handler work?
When you submit a form using GET, the browser trashes query string values in the form action and replaces them with a new query string built from the form fields. You can hit your handler by adding an appropriate hidden field to the form:
<form method="get" asp-page="Index">
<input type="hidden" name="handler" value="Something" />
<button type="submit" class="btn btn-primary">Get</button>
</form>
you can't go to get method because of parameters miss matching.
Suppose:
In controller
[HttpGet]
public IActionResult Create()
{
return View();
}
//Post Method
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create(string Name)
{
}
In View:
<form asp-action="Create">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Name" class="control-label"></label>
<input asp-for="Name" class="form-control" />
<span asp-validation-for="Name" class="text-danger"></span>
</div>]
<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary" />
</div>
</form>
Then it go post method cause it has 1 parameters (Name). if we not net any input or parameters are not same then it hit different method.
It the concept of method overloading
In details of method overloading https://www.geeksforgeeks.org/c-sharp-method-overloading/
How to create object and send it to OnPost in Razor Pages?
<form method="post">
<div>
<label>Add Text</label>
<input asp-for=SentimentData.SentimentText class="form-control" />
<button type="submit" class="btn btn-primary">Save</button>
</div>
</form>
public void OnPost(SentimentData SentimentData)
{
Text = SentimentData.SentimentText;
Analysis.Evaluate(mlContext, Model, SplitDataView.TestSet);
Analysis.UseModelWithSingleItem(mlContext, SentimentData, Model, Text);
}
But after my input field SentimentText is null. i dont know why.
One of the most popular books on ASP.NET Core is "Pro ASP.NET Core 3" by Adam Freeman.
In chapters 7-11, he builds an example application, SportsStore.
As you can see, each product in the listing gets its own 'Add To Cart' button:
If we do 'view source' on this page, we'll see the following HTML for that item in the product list:
<div class="card card-outline-primary m-1 p-1">
<div class="bg-faded p-1">
<h4>
Kayak
<span class="badge badge-pill badge-primary" style="float:right">
<small>$275.00</small>
</span>
</h4>
</div>
<form id="1" method="post" action="/Cart">
<input type="hidden" data-val="true" data-val-required="The ID field is required." id="ID" name="ID" value="1" />
<input type="hidden" name="returnUrl" value="/" />
<span class="card-text p-1">
A boat for one person
<button type="submit" class="btn btn-success btn-sm pull-right" style="float:right">
Add To Cart
</button>
</span>
<input name="__RequestVerificationToken" type="hidden" value="CfDJ8KKqNOS0gwdMvC0-bdjTwWlvCcBJldeidwIX5b2f24gYblS9X1sqCwJWIEsKKOSf8kut0SQsQRLF3R1XBSYZkPGnta9YzRK4tcQl8dq_0uWmjeUhm8yMe90fWDt_x0smmAD1lmb9-BxQF8y_7-IQSz4" /></form>
</div>
Note the input tag towards the bottom:
<input name="__RequestVerificationToken" type="hidden" value="CfDJ8KKqNOS0gwdMvC0-bdjTwWlvCcBJldeidwIX5b2f24gYblS9X1sqCwJWIEsKKOSf8kut0SQsQRLF3R1XBSYZkPGnta9YzRK4tcQl8dq_0uWmjeUhm8yMe90fWDt_x0smmAD1lmb9-BxQF8y_7-IQSz4" />
If we look at the Views\Shared\ProductSummary.cshtml file in the SportsStore project, we'll see the code that is involved with generating these listing items:
#model Product
<div class="card card-outline-primary m-1 p-1">
<div class="bg-faded p-1">
<h4>
#Model.Name
<span class="badge badge-pill badge-primary" style="float:right">
<small>#Model.Price.ToString("c")</small>
</span>
</h4>
</div>
<form id="#Model.ID" asp-page="/Cart" method="post">
<input type="hidden" asp-for="ID" />
<input type="hidden" name="returnUrl" value="#ViewContext.HttpContext.Request.PathAndQuery()" />
<span class="card-text p-1">
#Model.Description
<button type="submit" class="btn btn-success btn-sm pull-right" style="float:right">
Add To Cart
</button>
</span>
</form>
</div>
As you can see, the form element in this case doesn't have an explicit inclusion of the input tag with the __RequestVerificationToken value. This form thus appears to be a tag helper which takes care of generting the input tag with the __RequestVerificationToken token.
As an experiment, let's suppose I have added the following method to Controllers\HomeController:
[HttpGet]
public ContentResult ButtonExample()
{
var token = "...";
return new ContentResult()
{
ContentType = "text/html",
StatusCode = (int)HttpStatusCode.OK,
Content =
String.Format(
#"<!DOCTYPE html>
<html>
<body>
<form id=""1"" method=""post"" action=""/Cart"">
<input type=""hidden"" data-val=""true"" id=""ID"" name=""ID"" value=""1"" />
<button type=""submit"">Add to Cart</button>
</form>
<input name=""__RequestVerificationToken"" type=""hidden"" value=""{0}"" />
</body>
</html>",
token)
};
}
As you can see, this generates a very simple page with a single button which is intended to add the product with ID value 1 (i.e. the Kayak) to the cart.
I of course need to pass an appropriate value for the __RequestVerificationToken.
My question is, is there a way to get this value from C# so that I can include it in the method above?
The idea as shown above would be to set the token value here:
var token = "...";
This is then interpolated into the string that generates the HTML using String.Format.
UPDATE
This page mentions the following:
To generate the anti-XSRF tokens, call the #Html.AntiForgeryToken method from an MVC view or #AntiForgery.GetHtml() from a Razor page.
So I guess the question is, how do we do the equivalent from C# directly instead of from an MVC view or Razor page?
You can add the below code to your form which will generate the __RequestVerificationToken. It is used to prevent CSRF attacks Prevent XSRF/CSRF attacks.
<form action="/" method="post">
#Html.AntiForgeryToken()
</form>
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()
I have a problem invoking a submit method in web page
This is my code
Webbrowser.document.forms(0).invokemember("submit")
It does nothing.
Here is the html
<form name="myWebForm" action="myServerSideScript.php" method="post">
<input type="checkbox" /> Checkbox 1<br />
<input type="text" /> Text Field 1<br />
<input type="submit" value="SUBMIT" />
</form>
You must set .AllowNavigation property to "TRUE"
Webbrowser.AllowNavigation = True
And call submit method like this
Webbrowser.Document.Forms(0).InvokeMember("submit")
Or
Webbrowser.Document.Forms.GetElementsByName("myWebForm").Item(0).InvokeMember("submit")