I have implemented ngx-chips in an email address field. It works well. But, when I output the value in component.ts, I get only the first chip's value. How to get the value of all the chips?
If I have a#xyz.com and b#xyz.com in the html, only a#xyz.com comes in the ngModel.
component.html
<div class="form-row">
<div class="required form-group col-md-12 col-sm-12 col-xs-12" >
<label class="control-label" for="email.emailCc">CC:</label>
<tag-input [ngModel]="[email.emailCc]" theme='bootstrap'>
<tag-input-dropdown [autocompleteObservable]="items" [showDropdownIfEmpty]="true" [dynamicUpdate]="false"></tag-input-dropdown>
</tag-input>
</div>
</div>
<div class="form-group col-md-12 col-sm-12 col-xs-12">
<button (click)="sendEmail()" class="btn btn-lg btn-primary btn-block">Send</button>
</div>
component.ts
public items = (text: string): Observable<Response> => {
return this.sendEmailService.getEmailList(text);
};
sendEmail(){
console.log("email cc:"+this.email.emailCc);
}
Output
email cc:a#xyz.com
Related
I tray use ViewComponent in Razor Page with condition,
and each Viewcomponents are separate,
My razorpage is "/Subfolder/Index.cshtml"
<div class="row">
<div class="col-md-4">
#await Component.InvokeAsync("RightMenu")
</div>
<div class="col-md-8">
#if (Model.SIndex != 0)
{
#await Component.InvokeAsync("SubContent", new { id = Model.SIndex })
}
#if (Model.SIndex == 15)
{
<div class="row">
<div class="col-md-12">
<form method="post">
#await Component.InvokeAsync("QuestionUs", new { askLibrarian = new Lib.Model.AskLibrarian() })
<div class="form-group">
<input type="submit" value="ask Question" class="btn btn-default" asp-page-handler="question" />
</div>
</form>
</div>
</div>
}
</div>
and code behind of this is "/subfolder/index.cshtml.cs"
public class IndexModel : PageModel
{
private readonly Lib.Model.LibContext _context;
[BindProperty]
public int SIndex { get; set; }
public async Task OnGet(int Id)
{
SIndex = Id;
}
[BindProperty]
public AskLibrarian AskLibrarian { get; set; }
public async Task<IActionResult> OnPostquestionAsync()
{
if (!ModelState.IsValid)
{
return Page();
}
_context.AskLibrarians.Add(AskLibrarian);
await _context.SaveChangesAsync();
return RedirectToPage("./Index");
}
}
Now "questionViewcomponent" is a simple form that show many input elements
in "/subfolder/component/questionus/default.cshtml"
#model Lib.Model.AskLibrarian
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-row">
<div class="form-group col-md-6">
<label asp-for="FullName" class="control-label"></label>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-user"></i></div>
</div>
<input asp-for="FullName" class="form-control" />
<span asp-validation-for="FullName" class="text-danger"></span>
</div>
</div>
<div class="form-group col-md-6">
<label asp-for="Email" class="control-label"></label>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-envelope"></i></div>
</div>
<input asp-for="Email" class="form-control" />
<span asp-validation-for="Email" class="text-danger"></span>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label asp-for="LibraryNameId" class="control-label"></label>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-book"></i></div>
</div>
<select asp-for="LibraryNameId" class="form-control" asp-items="ViewBag.LibraryNameId"></select>
</div>
</div>
<div class="form-group col-md-8">
<label asp-for="Subject" class="control-label"></label>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-book-reader"></i></div>
</div>
<input asp-for="Subject" class="form-control" />
<span asp-validation-for="Subject" class="text-danger"></span>
</div>
</div>
</div>
<div class="form-group">
<label asp-for="Text" class="control-label"></label>
<textarea asp-for="Text" class="form-control" style="min-height:250px;"></textarea>
<span asp-validation-for="Text" class="text-danger"></span>
</div>
set breakpoint on "OnpostQuestionAsync", When I click on submit button with "question" handler do nothing and show me a blank page instead question form.
how can I resolve That
After a long Time my problem resolved by remove
<input type="submit" value="ask Question" class="btn btn-default" asp-page-handler="question" />
and add in form tag
<form method="post" sp-page-handler="question">
I am trying to get values of form inputs on action method.
MVC View
#using (Html.BeginForm("Report", "Home"))
{
<div class="common_input Volunteer_input">
<div class="row">
<div class="col-sm-12">
<label for="firstName">Reporter:</label>
<div class="select_option_one">
<input type="text" id="ReporterCountries" class="ct-select2 ReporterCountriesList" />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<label for="firstName">Partner:</label>
<div class="select_option_one">
<input type="text" name="PartnersCountries" id="PartnersCountries" class="ct-select2 CountryList" />
</div>
</div>
</div>
<h3>Comparators</h3>
<div class="row">
<div class="col-sm-12">
<label for="firstName">Partner:</label>
<div class="select_option_one">
<input type="text" name="CompareCountryList" id="CompareCountryList" class="ct-select2 CountryList" />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<label for="firstName">Rank Growth:</label>
<div class="select_option_one">
<input type="text" name="RankGrowth" id="RankGrowth" class="ct-select2 RankGrowth" />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="sub_submit">
<button type="submit" class="common_btn hvr-sweep-to-bottom">View<i class="fa fa-long-arrow-right"></i></button>
</div>
</div>
</div>
</div>
}
Action Method for Home Controller
public ActionResult Report(FormCollection form)
{
ViewData["ReporterCountries"] = Request.Form["ReporterCountries"];;
return RedirectToAction("Index","data");
}
When I try to retrieve the values of input on action controller I am receving all the control on the view but values are coming as null.
I have a multistep form wizard that go through seven(7) steps.
image
Controllers:
private RegistrationEntities db = new RegistrationEntities();
public ActionResult Index()
{
return View();
}
View:
<div class="title_right">
<div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>Contractors <small>Pre-Registration</small></h2>
<ul class="nav navbar-right panel_toolbox">
<li>
<a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<i class="fa fa-wrench"></i>
<ul class="dropdown-menu" role="menu">
<li>
Settings 1
</li>
<li>
Settings 2
</li>
</ul>
</li>
<li>
<a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<p>Kindly Follow the Procedures for the Pre-Registration Process.</p>
<div id="wizard" class="form_wizard wizard_horizontal">
<ul class="wizard_steps">
<li>
<a href="#step-1">
<span class="step_no">1</span>
<span class="step_descr">
Step 1<br />
<small>Step 1: Ownership Confirmation</small>
</span>
</a>
</li>
<li>
<a href="#step-2">
<span class="step_no">2</span>
<span class="step_descr">
Step 2<br />
<small>Step 2: RC Number</small>
</span>
</a>
</li>
<li>
<a href="#step-3">
<span class="step_no">3</span>
<span class="step_descr">
Step 3<br />
<small>Step 3: Company Name</small>
</span>
</a>
</li>
<li>
<a href="#step-4">
<span class="step_no">4</span>
<span class="step_descr">
Step 4<br />
<small>Step 4: TIN Number/Company Details</small>
</span>
</a>
</li>
<li>
<a href="#step-5">
<span class="step_no">5</span>
<span class="step_descr">
Step 5<br />
<small>Step 5: Company's Email</small>
</span>
</a>
</li>
<li>
<a href="#step-6">
<span class="step_no">6</span>
<span class="step_descr">
Step 6<br />
<small>Step 6: Other Company Details</small>
</span>
</a>
</li>
<li>
<a href="#step-7">
<span class="step_no">7</span>
<span class="step_descr">
Step 7<br />
<small>Step 7: Captcha</small>
</span>
</a>
</li>
</ul>
<div id="step-1">
<form class="form-horizontal form-label-left">
<div class="form-group">
<div class="col-lg-12">
<div class="col-lg-3">
<div class="form-group">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<div class="radio">
#Html.RadioButtonFor(m => m.OWNERSHIP_STRUCTURE, 1, new { #class = "DoPopup", id = "Foreign Company", value = "" }) Foreign Company
</div>
<div class="radio">
#Html.RadioButtonFor(m => m.OWNERSHIP_STRUCTURE, 2, new { #class = "DoPopup", id = "Foreign Owned Nigerian Company", value = "" }) Foreign Owned Nigerian Company
</div>
<div class="radio">
#Html.RadioButtonFor(m => m.OWNERSHIP_STRUCTURE, 3, new { #class = "DoPopup", id = "Nigerian Company", value = "" }) Nigerian Company
</div>
</div>
</div>
<div class="col-lg-3">
<div class="form-group">
</div>
</div>
</div>
</div>
</form>
</div>
<div id="step-2">
#*<h2 class="StepTitle">Step 2 Content</h2>*#
<form class="form-horizontal form-label-left">
<div class="col-lg-12">
<div class="form-group">
#Html.LabelFor(model => model.RC_NUMBER, new { #class = "col-lg-2 control-label" })
<div class="col-lg-9">
#Html.TextBoxFor(model => model.RC_NUMBER, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.RC_NUMBER)
</div>
</div>
</div>
</form>
</div>
<div id="step-3">
#*<h2 class="StepTitle">Step 3 Content</h2>*#
<form class="form-horizontal form-label-left">
<div class="form-group">
<div class="col-lg-12">
<div class="form-group">
#Html.LabelFor(model => model.COMPANY_NAME, new { #class = "col-lg-2 control-label" })
<div class="col-lg-9">
#Html.TextBoxFor(model => model.COMPANY_NAME, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.COMPANY_NAME)
</div>
</div>
</div>
</div>
</form>
</div>
<div id="step-5">
<form class="form-horizontal form-label-left">
<div class="col-lg-12">
<div class="form-group">
#Html.LabelFor(model => model.COMPANY_CONTACT_EMAIL, new { #class = "col-lg-2 control-label" })
<div class="col-lg-9">
#Html.TextBoxFor(model => model.COMPANY_CONTACT_EMAIL, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.COMPANY_CONTACT_EMAIL)
</div>
</div>
</div>
</form>
</div>
<div id="step-6">
<form class="form-horizontal form-label-left">
<div class="col-lg-12">
<div class="form-group">
<div class="col-lg-2">
Alternative E-mail
</div>
<div class="col-lg-9">
#Html.TextBoxFor(model => model.COMPANY_CONTACT_ALTERNATIVE_EMAIL, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.COMPANY_CONTACT_ALTERNATIVE_EMAIL)
</div>
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<div class="col-lg-2">
Website
</div>
<div class="col-lg-9">
#Html.TextBoxFor(model => model.WEBSITE, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.WEBSITE)
</div>
</div>
</div>
<h3>Login Details</h3>
<hr />
<div class="col-lg-12">
<div class="col-lg-1">
</div>
<div class="form-group">
<div class="col-lg-2">
Username
</div>
<div class="col-lg-8">
#*<i class="glyphicon glyphicon-user"></i>*#
<input class="form-control input-lg" name="MERGE0" id="email" type="email" placeholder="Email address" required>
</div>
</div>
<div class="col-lg-1">
</div>
</div>
<div class="col-lg-12">
<div class="col-lg-1">
</div>
<div class="form-group">
<div class="col-lg-2">
Password
</div>
<div class="col-lg-8">
#*<i class="glyphicon glyphicon-user"></i>*#
<input class="form-control input-lg" name="MERGE1" id="password" type="password" placeholder="Password" required>
</div>
</div>
<div class="col-lg-1">
</div>
</div>
</form>
</div>
<div id="step-7">
<form class="form-horizontal form-label-left">
<div class="col-lg-12">
<div class="col-lg-1">
</div>
<div class="form-group">
<div class="col-lg-10">
#Html.MathCaptcha()
#* #Html.Captcha(3)*#
<br />
<p class="Error"> #ViewBag.ErrMessage </p>
</div>
</div>
<div class="col-lg-1">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
}
<!-- jQuery Smart Wizard -->
<script>
$(document).ready(function () {
$('#wizard').smartWizard();
$('#wizard_verticle').smartWizard({
transitionEffect: 'slide'
});
$('.buttonNext').addClass('btn btn-success');
$('.buttonPrevious').addClass('btn btn-primary');
$('.buttonFinish').addClass('btn btn-default');
});
</script>
<!-- /jQuery Smart Wizard -->
The questions are:
How I I validate each step to make sure values are entered befor going to the next step
After completing the 7 steps, how do I valid that the values are entered properly before it saves.
After completing the 7th step, I clicked on the Finish button, no record was saved into the CONTRACTORS table
In step2, when RC_NUMBER is entered, it should check if it already exists. It should use it to populate COMPANY_NAME in step3, but if it doesnt exist, it should allow the user to enter COMPANY_NAME in step3
After completing the whole steps and Finish button is clicked, it should redirect to welcome model using ActionResult Welcome
Please check the answers to your questions below:
1.) jQuery SmartWizard allows us to add onLeaveStep:leaveAStepCallback field while declaring. leaveAStepCallback is the function that will be called when you click on the next button. You can implement your validation logic in this function. Please go through this URL to get the complete idea.
2.) jQuery SmartWizard also allows us to add onFinish:onFinishCallback field while declaring. In this case onFinishCallback function will be called after all the steps are completed. You can check here if all the inputs are valid and then submit the form. You must have got the idea if you had gone through the link in answer 1.
3.) You need to further elaborate why the details were not saved in DB? Is your controller action getting called? If yes, check your DB save logic to further find the issue as this is not the issue of SmartWizard.
4.) As I mentioned in the step 1 that bind a callback function to be called when next button is clicked. In this function, you can get the step number by using context.fromStep. After that you can make an ajax call to server to check if the value already exist. Implement your custom logic as required.
5.) If you are submitting form using $('form').submit(), you can redirect custom view from the controller after succesful operation. If you are making an ajax call, redirect to another controller in sucess function of ajax call.
I am trying to implement bootstrap ui modal in asp.net mvc. I created a basic modal which contains a login form.
Issue I am facing here is, when I start using html helpers, styles of the modal form is going really bad. I have attached screenshots below. one screenshot with when I don't use HTML helpers and that's when UI is more clean to view, when I add html helpers, style is going way off.
I have tried pretty much everything I can. I am unable to spot the issue. can someone please have a look at it and throw a light on where I am going wrong.
<div>
#using(Html.BeginForm()){
<div class="modal-header modal-hd-bg">
<button type="button" class="close" ng-click="cancel()">×</button>
<h3 class="modal-title">Login</h3>
</div>
<div class="modal-body">
<form novalidate class="form-horizontal" role="form">
<div class="form-group">
#*<label class="control-label col-sm-3" for="email">Email:</label>*#
#Html.Label("Email:", new { #class="control-label col-sm-3"})
<div class="col-sm-9">
#* <input type="email" class="form-control" id="email" placeholder="Enter email" ng-model="luser.email">*#
#Html.TextBoxFor(m => m.email, new { #class="form-control", #placeholder="Enter Email", #id="email" })
</div>
</div>
<div class="form-group">
#*<label class="control-label col-sm-3" for="pwd">Password:</label>*#
#Html.Label("Password:", new { #class="control-label col-sm-3"})
<div class="col-sm-9">
#*<input type="password" class="form-control" id="pwd" placeholder="Enter password" ng-model="luser.pwd">*#
#Html.TextBoxFor(m => m.pwd, new { #class="form-control", #placeholder="Enter password", #id="pwd" })
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-primary" ng-click="login()">Login</button>
</div>
</div>
</form>
</div>
<div class="modal-footer modal-ft-bg">
<label><u>Don't have an account</u>?</label>
<button class="btn btn-success" ng-click="goToRegister()">Register</button>
</div>
}
</div>
This is when I use #using(Html.BeginForm()) and html helpers
This is when I don't use HTML helpers)
No need for a form outside another form, because the outside form does not take any input. Nothing wrong with the html helpers.
HTML:
<div id="thisModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header modal-hd-bg">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3 class="modal-title" id="gridSystemModalLabel">Login</h3>
</div>
<div class="modal-body">
<form novalidate class="form-horizontal" role="form">
<div class="form-group">
#Html.Label("Email:", new { #class="control-label col-sm-3"})
<div class="col-sm-9">
#Html.TextBoxFor(m => m.email, new { #class="form-control", placeholder="Enter Email", id="email" }
</div>
</div>
<div class="form-group">
#Html.Label("Password:", new { #class="control-label col-sm-3"})
<div class="col-sm-9">
#Html.PasswordFor(m => m.pwd, new { #class="form-control", placeholder="Enter password", id="pwd" })
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-primary">Login</button>
</div>
</div>
</form>
</div>
<div class="modal-footer modal-ft-bg">
<label><u>Don't have an account</u>?</label>
<button class="btn btn-success">Register</button>
</div>
</div>
</div>
</div>
this is my actionResult
[HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
public ActionResult Payment(PaymentViewModel payment, string returnUrl)
{
PaymentModel paymentModel = new PaymentModel();
if (ModelState.IsValid)
{
CreditCardDetailsModel creditCardDetailsModel = new CreditCardDetailsModel();
creditCardDetailsModel.SecurityId = payment.SecurityId;
creditCardDetailsModel.ExpiryDate = payment.Month + payment.Year;
creditCardDetailsModel.CardNumber = payment.CardNumber;
paymentModel.CreditCardDetails = creditCardDetailsModel;
TempData["model"] = paymentModel;
return RedirectToAction("Payment");
}
var query = from state in ModelState.Values
from error in state.Errors
select error.ErrorMessage;
var errorList = query.ToList();
TempData["ErrorMessages"] = errorList;
ViewBag.MonthList = new SelectList(new[] { "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12" });
return new EmptyResult();
}
This is my partialView
#model Centra.Web.ViewModels.PaymentViewModel #using (Html.BeginForm("Payment", "Flight", FormMethod.Post,null))
{
#Html.AntiForgeryToken()
<div class="row space-form traveller-form">
<div class="col-lg-12">
<div class="col-lg-3 row">
<div class="fomr-group text-right">
<label>Credit Card No</label>
</div>
</div>
<div class="col-lg-8">
<div class="fomr-group col-lg-5 cardDetails">
#Html.TextBoxFor(p => p.CardNumber, new { #class = "form-control" })
</div>
<div ng-if="creditCardError == true" class="fomr-group col-lg-2 cardDetails">
<label>Please enter valid card number</label>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="col-lg-3 row">
<div class="fomr-group text-right">
<label>Expiry Date</label>
</div>
</div>
<div class="col-lg-8">
<div class="fomr-group col-lg-2 cardDetails ">
#Html.DropDownListFor(m=>m.Month, (SelectList)ViewBag.MonthList)
</div>
<div class="fomr-group col-lg-3 cardDetails row">
#Html.DropDownListFor(p => p.Year, Enumerable.Range(DateTime.Now.Year, 20)
.Select(x => new SelectListItem
{
Text = x.ToString(),
Value = x.ToString()
}
), new { #class = "form-control" })
</div>
</div>
</div>
<div class="col-lg-12">
<div class="col-lg-3 row">
<div class="fomr-group text-right">
<label>Name on card</label>
</div>
</div>
<div class="col-lg-8">
<div class="fomr-group col-lg-5 cardDetails">
#Html.TextBoxFor(p => p.NameOnCard, new { #class = "form-control" })
</div>
</div>
</div>
<div class="col-lg-12">
<div class="col-lg-3 row">
<div class="fomr-group text-right">
<label>CVV</label>
</div>
</div>
<div class="col-lg-8">
<div class="fomr-group col-lg-2 cardDetails">
#Html.TextBoxFor(p => p.SecurityId, new { #maxlength = "4", #class = "form-control", #placeholder = "CVV" })
</div>
<div class="fomr-group col-lg-5 cardDetails TotalPrice">
<label>The 3 digit number printed on the back of card</label>
</div>
</div>
</div>
<div class="col-lg-12 terms-conditions">
<div class="col-sm-11 col-lg-offset-1">
<div class="checkbox">
<label>
#* #Html.CheckBox("paymentCheckbox", new { #onclick = "function-to-open-dialog()" })*#
<input type="checkbox" id="paymentCheckbox" ng-model="paymentCheckbox">
I understand and agree to the rules and notifications of this fare, the booking privacy policy and the terms & conditions Centra Travels.
</label>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="col-lg-2 row">
<div class="fomr-group text-right">
</div>
</div>
<div class="col-lg-9 row">
<div class="fomr-group TotalPrice">
<label>
<h3>$ 36,613</h3>
<span>(Total inclusive all taxes)</span>
</label>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="col-lg-2 row">
<div class="fomr-group text-right">
</div>
</div>
<div class="col-lg-2 row">
<div class="fomr-group text-right col-lg-2">
#*<button type="submit" ng-disabled="!paymentCheckbox" ng-click="Payment(PaymentDetails)" class="btn btn-info makePaymentbtn">Make a Payment</button>*#
<button type="submit" ng-disabled="!paymentCheckbox" class="btn btn-info makePaymentbtn">Make a Payment</button>
</div>
#Html.Hidden("returnUrl", this.Request.RawUrl)
</div>
</div>
</div>
}
And other partialPages are not in mvcRazor formate their are in angular, so when i redirect to specific view(FlighBooking) //FlightBooking is my mainView in that multiple partial views are their, it is rending the FlightBooking View with but angular partialview are losing its states, so i tried by returning as return new EmptyResult(); but the page state is loosing, what should i do?
I want to bee on that same page without loosing its state if validations fails
If you don't want to refresh your page after go to action, you should use #Ajax.BeginForm instead #Html.BeginForm. There are a lot of tutorials on the internet.