I have a razorpage containing two button for submits(Post). One is submitting new entries entered on the page, and the other is deleting already added entries. The new entries and existing entries are all in the same form and both use the same model.
I use page handlers to control which method is executed.
My problem is that when I click the delete button on existing entries I get client side validation for the inputfields from the model used when creating new entries.
Is there a way to disable client side validation for the field used when creating new entries in my delete button? or is it possible to send only the button in the POST request to avoid validation?
<button asp-route-id="#line.Id" asp-page-handler="DeleteRow" accesskey="" type="submit" class="btn btn-default pull-left">
<span class="glyphicon glyphicon-trash"></span>
</button>
Here is a photo of the scenario. the first line is used to create new entries is SQL., second line is fetched from SQL. clicking the delete button(POST) on second row causes client side validation on first row and prevents submit/POST).
The validation is correct when submitting the form for a new entry, but need to prevent the validation when deleting an existing entry.
I found the answer, In the jquery.validate.js there was exceptions added to avoid validation.
// allow suppressing validation by adding the html5 formnovalidate attribute to the submit button
if ( $( this ).attr( "formnovalidate" ) !== undefined ) {
validator.cancelSubmit = true;
}
<button asp-route-id="#line.Id" formnovalidate asp-page-handler="DeleteRow" accesskey="" type="submit" class="btn btn-default pull-left">
<span class="glyphicon glyphicon-trash"></span>
</button>
Related
I am bulding a WinForms application (VS2019, .NET 4.7.2) that wants to use CefSharp as its main UI (Cef 79.1.36+g90301bd+chromium-79.0.3945.130).
I have a simple form loaded from a local html file called form.html, where the relevant section (omitting most of the HTML boilerplate) looks like this:
<form method="POST">
<input type="text" name="Name" placeholder="Name" /><br>
<input type="text" name="Place" placeholder="Place" /><br>
<input type="submit" />
</form>
The form file is loaded via a custom scheme:
settings.RegisterScheme(new CefCustomScheme
{
SchemeName = "folder",
DomainName = "local",
SchemeHandlerFactory = new FolderSchemeHandlerFactory(
rootFolder: $#"{Application.StartupPath}\wwwroot",
hostName: "local",
defaultPage: "index.html")
});
The code that actually loads it is in Form1.cs and looks like this:
browser.Load("folder://local/form.html");
The form loads fine and is displayed as expected.
Now, when the user presses the Submit button, I want to intercept the submission and handle the submitted data (the values entered for Name and Place in this case) in my C# code. I don't want the form to actually submit to any web server - I just need to be able to get to the form data and deal with it in my C#/WinForms code.
I am not sure how to do that. Right now, after the Submit button is clicked, the form gets cleared (presumably reloaded from the same url), but I don't know where the submitted data went. Would appreciate any clues.
I had these two buttons:
<button id="submit" name="button" value="register" class="btn btn-primary">Submit</button>
<button id="cancel" name="button" value="cancel" class="btn btn-secondary">Cancel</button>
In a page that has some text fields with some validation on them for example
#Html.TextBoxFor(m => m.EmailRequest, new { #class = "form-control", type = "email" })
#Html.ValidationMessageFor(m => m.EmailRequest)
And then to know if cancel button was cliked to redirect them to some other page, in controller I had it like this:
[HttpPost]
public ActionResult ForgotPassword(string button, ForgotPasswordViewModel fpModel)
{
// cancel button, go back to LoginPage
if (!string.IsNullOrEmpty(button) && button == "cancel")
{
return RedirectToAction("Login");
}
else
{
// blah
}
}
It works if they fill out good valid values in the text boxes and then they click on cancel BUT it does not even get called when there are validation errors on the text boxes and then click cancel. So it won't redirect them either.
So what should i do ?
It sounds as if you are trying to POST the form back to the server in both scenarios (cancel or submit).
It doesn't make much sense to POST a form back to a server if there are validation issues. If you do this, you then rely on server side validation checking and make sure you re route to Login. You should always have server side, but it is obviously best to not just rely on it and to have both server side and client side validation.
An alternative solution would be to replace the cancel button with a link.
E.g.
#Html.ActionLink("Cancel", "Login")
This is also quicker in terms of performance, because it will simply redirect the user to the login page. Instead of posting back to the server and then re routing.
Trying to get my head around unobtrusive validation. I created a simple page like this:
#using (Html.BeginForm())
{
<text>Validation for name should fail unless this box contains the word christmas</text>
#Html.TextBoxFor(c => c.IsChristmas, new { id = "IsChristmas" }) <br />
#Html.TextBoxFor(c => c.Name)
#Html.ValidationMessageFor(c => c.Name)
<br />
<input type="submit" value="Submit" />
}
The model just has two strings, [Required] Name and IsChristmas.
This works fine, if you press submit when the text box is empty, you get the Name is required validation error appearing.
What I want to do now is make a validation error appear when they try to submit, if the first textbox doesn't contain the word 'Christmas'. This is just to learn how I can create my own custom validation types. I don't want to use data attributes, I want to do it entirely in javascript. I'd like to hook into the existing unobtrusive stuff if possible.
Any ideas?
I figured I could write a function first:
function isChristmas()
{
return $('#isChristmas').val() == 'christmas';
}
Then perhaps I can register it somehow so it is called on submit? Either directly into the validation code, by registering some kind of handler, or write my own handler (a submit button click event) that calls isChristmas() and if it's false, calls a method to display the validation error.
I am not sure how flexible the unobtrusive stuff is. I guess another desirable thing would be that if the page is submitted with the validation being bypassed, I can check server-side as well and have it go back to the view and somehow display the error that way too.
The client should be able to send everything with a button, so I can do the following:
Send everything as form fields named like invoiceId_detail_text where invoiceId would be the id of the invoice, detail the part, and text the kind of field.
Example:
<form id="invoices" name="invoice">
#foreach(var Invoce in Model.Invoices) {
<div>
<input type="number" id="#String.Format("{0}_amount", Invoice.InvoiceId)"/>
</div>
/*More Input Fields for the Invoice*/
<div>
<button type="submit"></button>
</div>
}
</form>
Or I can put every invoice separated in its own form, and send them by ajax, every form success I send the next one and so on.
Example:
#foreach(var Invoice in Model.Invoices) {
string formName = String.Format("{0}_form", Invoce.InvoceId);
<form id="#formName" class="invoiceForm" id="#formName" action="#Url.Action("EditIndividualInvoice","InvoicingEdit")">
<input type="hidden" name="InvoiceId" value="#Invoice.InvoiceId"/>
<div>
<input type="number"/>
</div>
/*More Input Fields for the Invoice*/
</form>
}
<button type="button" onclick="SendAllForms();">Send</button>
I did some research between some of my co-workers and many of them told me to just go with a post with all the invoices at the same time and then access every field by item id because I don't have knowledge of how many invoices are going to be sent, but i can get all of them by class on JQuery so it shouldn't be a problem.
I also read this article from a UX point of view and it keeps me thinking about it.
By doing it with AJAX the cliend could be able to see a loading bar and it would be great, but if he closes the page the request would be incomplete and it could be complicated.
Which option could be better and why and what are the security implications of using one over another?
I think the solution depends principally of the behavior that you wish.
By doing it with AJAX the cliend could be able to see a loading bar and it would be great, but if he closes the page the request would be incomplete and it could be complicated.
In the 2 solutions, if the user closes the page after clicking the button, this will not cancel the save. Once the request sent, it cannot be cancelled. So you shouldn't have "security" problems whatever the choosen solution.
The only thing you need to be careful, is to disable all AJAX buttons during an AJAX request, to avoid the user sending several request in the same time (that can provoke saving inconsistency data).
The classic solution is generally most simple to implement.
The AJAX solution can be most complicated to implement (more code), but provides a friendliest behavior.
Following the code on Angular UI, I was able to integrate the Radio & Uncheckable Radio buttons into my solution. I have 2 radio buttons, both of which can be toggled and then I have an asp:Label to display the output.
I would prefer setting the label's visibility to false in the long run but for now it is visible.
By setting the asp:Label Text property to {{radioModel || 'null'}} I can see the value of the selected radio button on the client side page and viewing the page's source. Problem is, when I post back to the server, specifically attempting to store the value in a database, I only see the {{radioModel || 'null'}} declaration, rather than the value of my selection.
I'm new to Angular but the idea seemed pretty straight forward. I just need to figure out how to retain the label control value when storing to a database.
Here is my asp.net code with the angular declaration within the label.
<div ng-controller="EmployeeTypeChoiceRadios">
<div class="btn-group">
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Employee'">Employee</label>
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Contractor'">Contractor</label>
<!-- Pull Results from this label on form submit -->
<asp:Label ID="EmployeeTypeChoiceLabel" runat="server" Visible="false" Text="{{radioModel || 'null'}}" />
</div>
</div>
Here is how I have my JavaScript set up. I think this has more to do with the default radio selection however
// New Form - Employee Type Employee/Contractor - Radio Button
var EmployeeTypeChoiceRadios = function ($scope) {
$scope.radioModel = 'Employee';
$scope.checkModel = {
employee: true,
contractor: false
};
};
Finally, here is how I am collecting the label's data - Really just adding to a stored procedure parameter.
newformsqlCmd.Parameters.AddWithValue("#empEmpType", EmployeeTypeChoiceLabel.Text); // Employee Type choice
For the record, I've also tried basic HTML inputs (Labels) and to get their values like this..
BasicHtmlInputLabel.Value
I appreciate it in advance.
ngModel is only supported on the following elements:
input
text
checkbox
radio
number
email
url
date
dateTimeLocal
time
month
week
select
textarea
Using one of them instead of a label should solve the problem.