I have make a custom module and inherit the template i wanted and try to override the website_sale/view/template.xml inputs company_name and vat to be invincible but it don't override it it just add 2 fields more.
<template id="address_b2b" inherit_id="website_sale.address_b2b">
<xpath expr="//div[#id='div_phone']" position="replace">
<div class="w-100"/>
<t t-set='vat_warning' t-value="'vat' in checkout and checkout['vat'] and not can_edit_vat" />
<t t-if="mode == ('new', 'billing') or (mode == ('edit', 'billing') and (can_edit_vat or 'vat' in checkout and checkout['vat']))">
<div t-attf-class="form-group #{error.get('company_name') and 'o_has_error' or ''} col-lg-6 mb-0">
<label class="col-form-label font-weight-normal label-optional" for="company_name">Company Name</label>
<input type="text" name="company_name" t-attf-class="form-control #{error.get('company_name') and 'is-invalid' or ''}" t-att-value="'commercial_company_name' in checkout and checkout['commercial_company_name'] or 'company_name' in checkout and checkout['company_name']" t-att-readonly="'1' if vat_warning else None"/>
<small t-if="vat_warning" class="form-text text-muted d-block d-lg-none">Changing company name is not allowed once document(s) have been issued for your account. Please contact us directly for this operation.</small>
</div>
<div t-attf-class="form-group #{error.get('vat') and 'o_has_error' or ''} col-lg-6 div_vat mb-0">
<label class="col-form-label font-weight-normal label-optional" for="vat">TIN / VAT </label>
<input type="text" name="vat" t-attf-class="form-control #{error.get('vat') and 'is-invalid' or ''}" t-att-value="'vat' in checkout and checkout['vat']" t-att-readonly="'1' if vat_warning else None" />
<small t-if="vat_warning" class="form-text text-muted d-block d-lg-none">Changing VAT number is not allowed once document(s) have been issued for your account. Please contact us directly for this operation.</small>
</div>
<div t-if="vat_warning" class="col-12 d-none d-lg-block mb-1">
<small class="form-text text-muted">Changing company name or VAT number is not allowed once document(s) have been issued for your account. Please contact us directly for this operation.</small>
</div>
</t>
</xpath>
</template>
I try to remove two inputs company_name and vat i expected to override the 2 fields and make them invincible but he don't do that he just add 2 fields more at the template
Related
I am trying to output the value of individual checkboxes and also add a class to the label when the checkbox is checked. I can do one of the other but not both together. If I add :value="attendance" the output works as individual instances but the adding of the class doesn't work and if I add value="attendance" then it treats the 2 checkboxes as one value.
Can someone help please?
<div class="container">
<div class="row">
<div class="col-sm">
<label
class="btn btn-outline-primary label-in-filter"
:class="{
showattendances:
showattendancesisChecked('attendance'),
}"
v-for="attendance in uniqueattendances"
:key="attendance"
>
<!-- <input
value="attendance"
id="attendance"
name="showattendances"
class="ck-in-filter"
type="checkbox"
v-model="attendances"
/> -->
<input
id="attendance"
name="showattendances"
class="ck-in-filter"
type="checkbox"
:value="attendance"
v-model="attendances"
/>
{{ attendance }}
</label>
</div>
<p v-for="attendance in attendances" :key="attendance">
{{ attendance }}
</p>
</div>
</div>
methods: {
showattendancesisChecked(value) {
return this.attendances.includes(value);
},}
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>
I am using formGroup for form validation in angular2.I am doing a validation for Phone Number.I want the validation message to be displayed only when user leaves the field/tabs out.Right now, the validations are working fine but the validation message appears even when I am focused to the field.
For ex.- If I try to change the phone number and make the digits equal to 10 , it throws error(though I have not tabbed out).I want the error to be displayed only when I tab out. Any idea what am i missing here.
<form [formGroup]="paymentDetailsForm">
<md-input formControlName="officePhone" placeholder="Primary Contact Phone" name="officePhone" [(ngModel)]="paymentform.officePhone" (blur)="registerChaseUser()" (keyup)="numberKeyed($event.target.value)" [restrictKey]="'^[0-9]+$'" noSpace="true" maxlength="14" required></md-input>
<span *ngIf="!paymentDetailsForm.controls['officePhone'].valid && (!paymentDetailsForm.controls['officePhone'].pristine || paymentDetailsForm.controls['officePhone'].touched || showPaymentError) && paymentform.officePhone.length == 0" class="validation validation-fix">This field is required.</span>
<span *ngIf="(paymentform.officePhone.length < 14) && (paymentform.officePhone.length > 0) && (!paymentDetailsForm.controls['officePhone'].pristine || paymentDetailsForm.controls['officePhone'].touched)" class="validation validation-fix">Please enter a full 10-digit phone number.</span>
</form>
Try using blur
<input (blur)="onBlur()" (focus)="onFocus()">
and then activate the message only if onblur was called.
you should try 'ngTouch'
instead of "|| paymentDetailsForm.controls['officePhone'].touched"
should write "&& paymentDetailsForm.controls['officePhone'].touched"
for example :
<form *ngIf="active" id="contactForm" (ngSubmit)="onContactSubmit()" [formGroup]="contactForm">
<div class="row">
<div class="col-sm-6 form-group">
<label for="first-name"> First Name</label>
<input class="form-control" type="text" formControlName="firstName">
<p *ngIf="!contactForm.controls.firstName.valid&&contactForm.controls.firstName.touched" class="alert alert-danger">
firstname is required
</p>
</div>
<div class="col-sm-6 form-group">
<label for="last-name"> Last Name</label>
<input class="form-control" type="text" formControlName="lastName">
<p *ngIf="!contactForm.controls.lastName.valid&&contactForm.controls.lastName.touched" class="alert alert-danger">lastname is required</p>
</div>
</div>
</form>
I have question in regarding with my code,
My primary goal here is to insert data which is from a model which in that model I set multiple models to grab data. Here is my code in my Model:
public class ModelLoan
{
public SelectList employees { get; set; }
public SelectList collectors { get; set; }
public SelectList loanTypes { get; set; }
public SelectList loanStatus { get; set; }
public SelectList loanFrequency { get; set; }
public LoanContract loanContract { get; set; }
}
Controller:
public IActionResult Index()
{
//For Employees List
var lstEmployee = _Context.Employee.OrderBy(e => e.Fname + ' ' + e.Lname).Select(x => new { Id = x.EmployeeId, Value = x.Fname + ' ' + x.Lname });
//For Collectors List
var lstCollector = _Context.Collectors.OrderBy(c => c.CollectorName).Select(x => new { Id = x.CollectorId, Value = x.CollectorName});
//For Loan Type List
var lstLoanType = _Context.LoanType.OrderBy(lt => lt.Description).Select(x => new { Id = x.LoanTypeId, Value = x.Description });
//For Loan Status List
var lstLoanStatus = _Context.LoanStatus.OrderBy(ls => ls.StatusName).Select(x => new { Id = x.LoanStatusId, Value = x.StatusName });
//For Loan Frequency List
var lstLoanFrequency = _Context.LoanFrequency.OrderBy(lf => lf.LoanFrequencyId).Select(x => new { Id = x.LoanFrequencyId, Value = x.Description });
var myList = new ModelLoan();
myList.employees = new SelectList(lstEmployee, "Id", "Value");
myList.collectors = new SelectList(lstCollector, "Id", "Value");
myList.loanTypes = new SelectList(lstLoanType, "Id", "Value");
myList.loanStatus = new SelectList(lstLoanStatus, "Id", "Value", 1003);
myList.loanFrequency = new SelectList(lstLoanFrequency, "Id", "Value", 2);
//Set Default
return View(myList);
}
Now from this I put those data on a SelectList method which it is easy for me to view through using <select> tag. But the problem is I don't know how to extract the value of it.
Now here is my View:
#model prjPEMCOLoan.Models.ModelLoan
<form asp-controller="Loan" asp-action="SaveLoanContract" role="form" method="post" style="padding-top: 2em;">
<h2>Loan Application</h2>
<div class="form-group">
<label>Select Employee</label>
<select class="form-control" name="lc.loanContract.EmployeeId" asp-items="#Model.employees"></select>
<small class="form-text text-muted">Select the specific employee. If employee name is not on the list then you register the employee <a asp-controller="Employee" asp-action="Index">here</a>.</small>
<span asp-validation-summary="All"></span>
</div>
<div class="form-group">
<label>Select Collector</label>
<select class="form-control" name="lc.loanContract.CollectorId" asp-items="#Model.collectors"></select>
<small class="form-text text-muted">Collector will be the one to check your loan status in this system. He/She will be the responsible for accepting/rejecting your loan applied.</small>
<span asp-validation-summary="All"></span>
</div>
<div class="form-group">
<label>Select Loan Type</label>
<select class="form-control" name="lc.loanContract.LoanTypeId" asp-items="#Model.loanTypes"></select>
<small class="form-text text-muted">Choose your desired loan type you want to apply.</small>
<span asp-validation-summary="All"></span>
</div>
<div class="form-group">
<label>Status</label>
<select class="form-control" name="lc.loanContract.LoanStatusId" asp-items="#Model.loanStatus" disabled></select>
<small class="form-text text-muted">Upon registration to this loan you are set to pending status as default to check your loan by the collectors.</small>
<span asp-validation-summary="All"></span>
</div>
<div class="form-group">
<label>Status</label>
<select class="form-control" name="lc.loanContract.LoanFrequencyId" asp-items="#Model.loanFrequency" disabled></select>
<small class="form-text text-muted">Upon registration to this loan you are set to a <b>Biweekly</b> because your payroll mostly computed and deducted every Biweekly day of the month.</small>
<span asp-validation-summary="All"></span>
</div>
<div class="form-inline">
<div class="form-group">
<label> Date Applied: </label><span> </span>
<input disabled type="date" name="lc.loanContract.LoanDateStart" id="dpDateNow" class="form-control" /><br />
<small class="form-text text-muted">This is the date you applied.</small>
<span asp-validation-summary="All"></span>
</div>
<div class="form-group">
<label> Date Approved: </label><span> </span>
<input type="date" id="dpDateApproved" name="lc.loanContract.LoanDateEnd" class="form-control" /><br />
<small class="form-text text-muted">This is the date where your loan will be approved.</small>
<span asp-validation-summary="All"></span>
</div>
<div class="form-group">
<label> Due Date: </label>
<input type="date" id="dpDateDue" name="lc.loanContract.LoanPaymentDue" class="form-control" /><br />
<small class="form-text text-muted">Date where you expected to pay them all.</small>
<span asp-validation-summary="All"></span>
</div>
</div><br />
<div class="form-group">
<label>Loan Amount</label>
<input required placeholder="Enter Amount (must be number)" name="lc.loanContract.LoanAmount" class="form-control" type="number"/>
<small class="form-text text-muted">Input the amount you want to loan.</small>
<span asp-validation-summary="All"></span>
</div>
<div class="form-control" style="height: 100%">
<label>Terms and Condition</label><br />
<input required type="checkbox" name="lc.loanContract.isAcceptTac"/>
<small class="form-text text-muted"><b>I Agree, Read and Accept the terms terms and condition. </b><br />
PEMCO Loan is an online peer to peer loans community that connects people with money to lend to people who need to borrow money. Lending Hub works in a controlled and regulated environment that allows members to interact anonymously (from each other). To make sure that a secure and safe community is maintained we have developed these terms and conditions of use to assist all members. These terms and conditions explain what you can expect from us, what we expect from you, and what members can expect from each other and these terms and conditions will apply to you whenever you browse, transact or interact on the site.
</small>
<span asp-validation-summary="All"></span>
</div><br />
<div class="form-control-static">
<button type="submit" class="btn btn-primary"><b>Apply</b></button>
</div>
</form>
Now everything is on set on the view the only thing I have problem right now is inserting data from the ModelLoan.loanContract which I defined here in my code:
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> SaveLoanContract(ModelLoan lc)
{
if (ModelState.IsValid)
{
await _Context.LoanContract.AddAsync(lc.loanContract);
await _Context.SaveChangesAsync();
return RedirectToAction("Index");
}
return View(lc.loanContract);
}
What suppose to be the problem on my code? I miss a little thing but I don't know where. Can you guys help me with this? Thanks!
Update:
This is exception happens when I the asp-action = "SaveLoanContract" since it is associated with the index itself.
InvalidOperationException: The view 'SaveLoanContract' was not found. The following locations were searched:
/Views/Loan/SaveLoanContract.cshtml
/Views/Shared/SaveLoanContract.cshtml
However when I changed the asp-action = "Index"
InvalidOperationException: The model item passed into the ViewDataDictionary is of type 'PEMCOLoan.DAL.Entities.Models.LoanContract', but this ViewDataDictionary instance requires a model item of type 'prjPEMCOLoan.Models.ModelLoan'.
Let me know if I missed something.
With ASP.NET Core you have the new tag asp-for. Change your view to:
#model prjPEMCOLoan.Models.ModelLoan
<form asp-controller="Loan" asp-action="SaveLoanContract" role="form" method="post" style="padding-top: 2em;">
<h2>Loan Application</h2>
<div class="form-group">
<label>Select Employee</label>
<select class="form-control" asp-for="loanContract.EmployeeId" asp-items="#Model.employees"></select>
<small class="form-text text-muted">Select the specific employee. If employee name is not on the list then you register the employee <a asp-controller="Employee" asp-action="Index">here</a>.</small>
<span asp-validation-summary="All"></span>
</div>
<div class="form-group">
<label>Select Collector</label>
<select class="form-control" asp-for="loanContract.CollectorId" asp-items="#Model.collectors"></select>
<small class="form-text text-muted">Collector will be the one to check your loan status in this system. He/She will be the responsible for accepting/rejecting your loan applied.</small>
<span asp-validation-summary="All"></span>
</div>
<div class="form-group">
<label>Select Loan Type</label>
<select class="form-control" asp-for="loanContract.LoanTypeId" asp-items="#Model.loanTypes"></select>
<small class="form-text text-muted">Choose your desired loan type you want to apply.</small>
<span asp-validation-summary="All"></span>
</div>
<div class="form-group">
<label>Status</label>
<select class="form-control" asp-for="loanContract.LoanStatusId" asp-items="#Model.loanStatus" disabled></select>
<small class="form-text text-muted">Upon registration to this loan you are set to pending status as default to check your loan by the collectors.</small>
<span asp-validation-summary="All"></span>
</div>
<div class="form-group">
<label>Status</label>
<select class="form-control" asp-for="loanContract.LoanFrequencyId" asp-items="#Model.loanFrequency" disabled></select>
<small class="form-text text-muted">Upon registration to this loan you are set to a <b>Biweekly</b> because your payroll mostly computed and deducted every Biweekly day of the month.</small>
<span asp-validation-summary="All"></span>
</div>
<div class="form-inline">
<div class="form-group">
<label> Date Applied: </label><span> </span>
<input disabled type="date" asp-for="loanContract.LoanDateStart" id="dpDateNow" class="form-control" /><br />
<small class="form-text text-muted">This is the date you applied.</small>
<span asp-validation-summary="All"></span>
</div>
<div class="form-group">
<label> Date Approved: </label><span> </span>
<input type="date" id="dpDateApproved" asp-for="loanContract.LoanDateEnd" class="form-control" /><br />
<small class="form-text text-muted">This is the date where your loan will be approved.</small>
<span asp-validation-summary="All"></span>
</div>
<div class="form-group">
<label> Due Date: </label>
<input type="date" id="dpDateDue" asp-for="loanContract.LoanPaymentDue" class="form-control" /><br />
<small class="form-text text-muted">Date where you expected to pay them all.</small>
<span asp-validation-summary="All"></span>
</div>
</div><br />
<div class="form-group">
<label>Loan Amount</label>
<input required placeholder="Enter Amount (must be number)" asp-for="loanContract.LoanAmount" class="form-control" type="number"/>
<small class="form-text text-muted">Input the amount you want to loan.</small>
<span asp-validation-summary="All"></span>
</div>
<div class="form-control" style="height: 100%">
<label>Terms and Condition</label><br />
<input required type="checkbox" asp-for="loanContract.isAcceptTac"/>
<small class="form-text text-muted"><b>I Agree, Read and Accept the terms terms and condition. </b><br />
PEMCO Loan is an online peer to peer loans community that connects people with money to lend to people who need to borrow money. Lending Hub works in a controlled and regulated environment that allows members to interact anonymously (from each other). To make sure that a secure and safe community is maintained we have developed these terms and conditions of use to assist all members. These terms and conditions explain what you can expect from us, what we expect from you, and what members can expect from each other and these terms and conditions will apply to you whenever you browse, transact or interact on the site.
</small>
<span asp-validation-summary="All"></span>
</div><br />
<div class="form-control-static">
<button type="submit" class="btn btn-primary"><b>Apply</b></button>
</div>
Your controller method:
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> SaveLoanContract(ModelLoan lc)
{
if (ModelState.IsValid)
{
await _Context.LoanContract.AddAsync(lc.loanContract);
await _Context.SaveChangesAsync();
return RedirectToAction("Index");
}
// Get the list data again and populate the entire model
lc.employees = new SelectList(lstEmployee, "Id", "Value");
lc.collectors = new SelectList(lstCollector, "Id", "Value");
// and so on
return View("Index", lc); // also it may be required to specify the full path for the view like ~/Views/Home/Index.cshtml
}
PS: This <span asp-validation-summary="All"></span> part of the code does not require to be on each input. You can place once before the inputs.
I am working on an ASP.NET MVC 4 Project. I want to style data validation errors on my login page with Bootstrap 3.0. When I debug the page and it gives data validation errors, this codes are disappeared in source of my login form:
<form action="/Account/Login" class="col-md-4 col-md-offset-4 form-horizontal well" method="post"><input name="__RequestVerificationToken" type="hidden" value="Zbg4kEVwyQf87IWj_L4alhiHBIpoWRCJ9mRWXF6syGH4ehg9idjJCqRrQTMGjONnywMGJhMFmGCQWWvBbMdmGFSUPqXpx6XaS4YfpnbFm8U1" /><div class="validation-summary-errors"><ul><li>The user name or password provided is incorrect.</li>
</ul></div> <div class="form-group control-group">
<div class="col-md-6 col-md-offset-3">
<input class="input-validation-error form-control" data-val="true" data-val-required="User name alanı gereklidir." id="UserName" name="UserName" placeholder="Kullanıcı Adı" type="text" value="" />
<span class="field-validation-error" data-valmsg-for="UserName" data-valmsg-replace="true">User name alanı gereklidir.</span>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-3">
<input class="input-validation-error form-control" data-val="true" data-val-required="Password alanı gereklidir." id="Password" name="Password" placeholder="Şifre" type="password" />
<span class="field-validation-error" data-valmsg-for="Password" data-valmsg-replace="true">Password alanı gereklidir.</span>
</div>
</div>
<div class="form-group">
<div class="col-md-4 col-md-offset-4">
<button class="btn btn-default" type="submit">Giriş Yap</button>
</div>
</div>
</form>
How can I style these errors like "for=inputError" property of label with Bootstrap 3?
As it's shown in Bootstrap's docs, you need to apply class has-error to the div that contains the input and has class form-group:
<div class="form-group has-error">
...
</div>
It's a quite ugly to write a condition for each property you want to check and apply class has-error depending on the results of that condition, though you can do it like so:
<div class="form-group #(Html.ViewData.ModelState.IsValidField(Html.IdFor(x => x.UserName)) ? null : "has-error" )">
This takes care of the server side validation. However, there is also client side validation you need to think about. For that you'd need to write some jQuery that would check for existence of class field-validation-error and apply class has-error depending on the result.
You may do it all your self, though I suggest checking out TwitterBootstrapMVC which does all of that automatically for you. All you'd have to write is:
#Html.Bootstrap().FormGroup().TextBoxFor(m => m.UserName)
Disclaimer: I'm the author of TwitterBootstrapMVC. Using it in Bootstrap 2 is free. For Bootstrap 3 it requires a paid license.