I am working on an Angular 2 dashboard in Visual studio 2015, MVC project. I downloaded a sample dashboard and using it as reference.
login.component.ts
import {Component} from '#angular/core';
import {FormGroup, AbstractControl, FormBuilder, Validators} from '#angular/forms';
#Component({
selector: 'login',
templateUrl: './login.html',
styleUrls: ['./login.scss']
})
export class Login {
public form:FormGroup;
public email:AbstractControl;
public password:AbstractControl;
public submitted:boolean = false;
constructor(fb:FormBuilder) {
this.form = fb.group({
'email': ['', Validators.compose([Validators.required, Validators.minLength(4)])],
'password': ['', Validators.compose([Validators.required, Validators.minLength(4)])]
});
this.email = this.form.controls['email'];
this.password = this.form.controls['password'];
}
public onSubmit(values:Object):void {
this.submitted = true;
if (this.form.valid) {
// your code goes here
// console.log(values);
}
}
}
In that reference dashboard, they have used login.html template, in which the label values are referenced as {{'login.title'}}, {{'login.signup_link'}},{{'login.email'}}, {{'login.password'}} etc. I don't understand from where there are getting this label values.
login.html
<div class="auth-main">
<div class="auth-block">
<h1 translate>{{'login.title'}}</h1>
<a routerLink="/register" class="auth-link" translate>{{'login.signup_link'}}</a>
<form [formGroup]="form" (ngSubmit)="onSubmit(form.value)" class="form-horizontal">
<div class="form-group row" [ngClass]="{'has-error': (!email.valid && email.touched), 'has-success': (email.valid && email.touched)}">
<label for="inputEmail3" class="col-sm-2 control-label" translate>{{'login.email'}}</label>
<div class="col-sm-10">
<input [formControl]="email" type="email" class="form-control" id="inputEmail3" placeholder="{{'login.email' | translate}}">
</div>
</div>
<div class="form-group row" [ngClass]="{'has-error': (!password.valid && password.touched), 'has-success': (password.valid && password.touched)}">
<label for="inputPassword3" class="col-sm-2 control-label" translate>{{'login.password'}}</label>
<div class="col-sm-10">
<input [formControl]="password" type="password" class="form-control" id="inputPassword3" placeholder="{{'login.password' | translate}}">
</div>
</div>
<div class="form-group row">
<div class="offset-sm-2 col-sm-10">
<button [disabled]="!form.valid" type="submit" class="btn btn-default btn-auth" translate>{{'login.sign_in'}}</button>
<a routerLink="/login" class="forgot-pass" translate>{{'login.forgot_password'}}</a>
</div>
</div>
</form>
<div class="auth-sep"><span><span translate>{{'login.sign_from_app_text'}}</span></span></div>
<div class="al-share-auth">
<ul class="al-share clearfix">
<li><i class="socicon socicon-facebook" title="{{'login.share_on_facebook' | translate}}"></i></li>
<li><i class="socicon socicon-twitter" title="{{'login.share_on_twitter' | translate}}"></i></li>
<li><i class="socicon socicon-google" title="{{'login.share_on_google_plus' | translate}}"></i></li>
</ul>
</div>
</div>
</div>
Related
My application using vue3 to build devise sign up page and i'm using axios request to create user.
In registration controller, i found that params has added added an extra field name called registration data.
<ActionController::Parameters {"user"=>{"name"=>"name", "email"=>"mail", "phone"=>"123", "type"=>0}, "controller"=>"users/registrations", "action"=>"create", "registration"=>{"user"=>{"name"=>"name", "email"=>"mail", "phone"=>"123", "type"=>0}}}
It contains params[:user], that looks weird to me. Can someone explain?
"registration"=>{"user"=>{"name"=>"name", "email"=>"mail", "phone"=>"123", "type"=>0}
My form code:
methods: {
signUp: function(e) {
e.preventDefault();
let user_params = {
user: {
name: this.name,
email: this.email,
phone: this.phone,
type: this.type,
}
}
this.$http.post('/users', user_params)
.then(response => {
this.$emit('next');
}).catch(err => {
this.error = err.response.data;
});
},
}
And in view
<form>
<div class="col-md-6 col-sm-8 col-10 mt-5 mx-auto text-center">
<div class="checked-circle mx-auto">
<img :src="checkedStepImg" class="w-100 h-100">
</div>
<div class="title mt-5"> Let sign up for your account </div>
<div class="mt-3 text-red" v-if="error">{{ error }} </div>
<div class="row mt-3">
<div class="col-6">
<input class="form-control shadow-none rounded-0" placeholder="Name" v-model="name">
</div>
<div class="col-6">
<input class="form-control shadow-none rounded-0" placeholder="Email" v-model="email">
</div>
</div>
<div class="row mt-3">
<div class="col-6">
<div class="input-group">
<span class="input-group-text rounded-0">+1</span>
<input type="text" class="form-control shadow-none rounded-0 bg-white" placeholder="Phone" v-model="phone">
</div>
</div>
<div class="col-6">
<select class="form-select shadow-none rounded-0" aria-label="Default select example" v-model="type">
<option value="0" selected> Personal </option>
<option value="1"> Corporation </option>
</select>
</div>
</div>
<div class="col-6 col-sm-5 mx-auto btn-box mt-5">
<button class="btn btn-dark w-100 h-100" #click.prevent="signUp"> Sign up!</button>
</div>
</div>
</form>
That does not happen if i use a normal form devise sign_up
I'm working on a use case in my animal shelter web application where customers are able to register one or more animals at the same time. Ideally I'd like a button on the bottom left that generates another instance of the same form when clicked, so that multiple animal registrations can be saved to the database at once.
NewAnimalRegistration.cshtml:
#model NewAnimalRegistrationViewModel
<html>
<head>
<title>Register an animal</title>
<link rel="stylesheet" href="~/css/style.css"/>
</head>
<body>
<div class="container py-5">
<div class=" row">
<div class="col-md-10" mx-auto>
<div asp-validation-summary="All"></div>
<h1>Animal registration</h1>
<p>
We are happy to hear that you are interested in placing your animal in our shelter. Please fill in the fields below and our system will
check if there is room for your animal.
</p>
<form asp-action="RegistrationForm" method="post">
<div class="form-group row mt-5">
<div class="col-sm-6">
<label asp-for="Name">Name</label>
<input asp-for="Name" class="form-control"/>
</div>
</div>
<div class="form-group row mt-5">
<div class="col-sm-4">
<label asp-for="Gender" class="mr-3">Gender</label>
<select class="form-group" asp-for="Gender" asp-items="#ViewBag.Genders"></select>
</div>
<div class="col-sm-4">
<label asp-for="Type" class="mr-3">Animal type</label>
<select class="form-group" asp-for="Type" asp-items="#ViewBag.AnimalTypes"></select>
</div>
<div class="col-sm-4">
<label>Neutered</label>
<div class="form-check">
<input asp-for="IsNeutered" class="form-check-input" type="radio" value="true">
<label class="form-check-label" asp-for="IsNeutered">
Yes
</label>
</div>
<div class="form-check">
<input asp-for="IsNeutered" class="form-check-input" type="radio" value="false">
<label class="form-check-label" asp-for="IsNeutered">
No
</label>
</div>
</div>
</div>
<div class="form-group mt-5">
<label asp-for="Reason">Why are you deciding to put this animal up for adoption?</label>
<textarea class="form-control" asp-for="Reason" rows="6"></textarea>
</div>
<div class="float-right">
<a asp-controller="Home" asp-action="Index" class="btn btn-primary px-4">Cancel</a>
<button class="btn btn-primary px-4">Save</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Is there a way to do this in .NET Core MVC? If yes, will I simply receive a list of all animal registrations through which I can simply loop and add them all to the database?
I made a demo based on your description, you can refer to it:
Model:
public class NewAnimalRegistrationViewModel
{
public int Id { get; set; }
public string Name { get; set; }
public string Gender { get; set; }
public string Type { get; set; }
public bool IsNeutered { get; set; }
public string Reason { get; set; }
}
Index.cshtml:
#model NewAnimalRegistrationViewModel
<html>
<head>
<title>Register an animal</title>
</head>
<body>
<div class="container py-5">
<div class=" row">
<div class="col-md-10" mx-auto>
<div asp-validation-summary="All"></div>
<h1>Animal registration</h1>
<p>
We are happy to hear that you are interested in placing your animal in our shelter. Please fill in the fields below and our system will
check if there is room for your animal.
</p>
<form asp-action="RegistrationForm" method="post">
<div class="float-right">
<a asp-controller="Home" asp-action="Index" class="btn btn-primary px-4">Cancel</a>
<button class="btn btn-primary px-4">Save</button>
</div>
</form>
<a id="add" href='#' class="text-danger">register another animal</a>
</div>
</div>
</div>
</body>
</html>
#section scripts{
<script>
var count = 0;
$(function () {
var actionUrl = "/Home/AddRegistrationForm?count=" + count;
$.get(actionUrl).done(function (data) {
$('body').find('.float-right').before(data);
});
})
$("#add").on("click", function (e) {
e.preventDefault();
count++;
var actionUrl = "/Home/AddRegistrationForm?count=" + count;
$.get(actionUrl).done(function (data) {
$('body').find('.float-right').before(data);
});
})
</script>
}
_RegisterPartial.cshtml:
#model NewAnimalRegistrationViewModel
#{
int i = ViewBag.Count;
}
<h3>Anaimal #i</h3>
<div class="form-group row mt-5">
<div class="col-sm-6">
<label asp-for="Name">Name</label>
<input asp-for="Name" name="[#i].Name" class="form-control" />
</div>
</div>
<div class="form-group row mt-5">
<div class="col-sm-4">
<label asp-for="Gender" class="mr-3">Gender</label>
<select class="form-group" asp-for="Gender" name="[#i].Gender" asp-items="#ViewBag.Genders"></select>
</div>
<div class="col-sm-4">
<label asp-for="Type" class="mr-3">Animal type</label>
<select class="form-group" asp-for="Type" name="[#i].Type" asp-items="#ViewBag.AnimalTypes"></select>
</div>
<div class="col-sm-4">
<label>Neutered</label>
<div class="form-check">
<input asp-for="IsNeutered" name="[#i].IsNeutered" class="form-check-input" type="radio" value="true">
<label class="form-check-label" asp-for="IsNeutered">
Yes
</label>
</div>
<div class="form-check">
<input asp-for="IsNeutered" name="[#i].IsNeutered" class="form-check-input" type="radio" value="false">
<label class="form-check-label" asp-for="IsNeutered">
No
</label>
</div>
</div>
</div>
<div class="form-group mt-5">
<label asp-for="Reason">Why are you deciding to put this animal up for adoption?</label>
<textarea class="form-control" asp-for="Reason" name="[#i].Reason" rows="6"></textarea>
</div>
Controller:
public IActionResult Index()
{
return View();
}
[HttpGet]
public IActionResult AddRegistrationForm(int count)
{
ViewBag.Count = count;
ViewBag.Genders = new List<SelectListItem>
{
new SelectListItem{ Text = "Female", Value="Female"},
new SelectListItem{ Text = "Male", Value="Male"}
};
ViewBag.AnimalTypes = new List<SelectListItem>
{
new SelectListItem{ Text = "Cat", Value="Cat"},
new SelectListItem{ Text = "Dog", Value="Dog"}
};
return PartialView("_RegisterPartial");
}
[HttpPost]
public IActionResult RegistrationForm(List<NewAnimalRegistrationViewModel> model)
{
return View();
}
Result:
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
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'm running ReactJS.NET with ASP.NET MVC, and everything renders well, except... i cannot get any kind of events to fire...
What i have tried :
1) Eliminating all JQuery references/usages - no success
2) onHover, onClick, with functions both inside and outside of the React-component - no success
Here is my code :
Attaching ProductLine React component in index.cshtml
#Html.React("ProductLine", Model)
React component
function addToCart() {
alert("Hoohohoho!!!");
};
var ProductLine = React.createClass({
render: function () {
return(
<div className="col-md-12 col-sm-12 col-xs-12" key={this.props.productData.name}>
<button onClick={this.addToCart}>Click me!</button>
<div className="row" >
<div onClick={addToCart} className="col-md-12 col-sm-12 col-xs-12 nopadding row-default" >
<div className="col-md-3 col-sm-5 col-xs-5 nopadding">
<span className="table table-col ">
<input type="checkbox" id="cbxCheck2" className="jq_select_product" />
<label htmlFor="cbxCheck2" className="jq_select_product">{ this.props.productData.name }</label>
</span>
</div>
<div className="col-md-4 hidden-sm hidden-xs nopadding">
<span className="table table-col table-text-small">
{ this.props.productData.label }
</span>
</div>
<div className="col-md-3 col-sm-4 col-xs-4 nopadding">
<span className="table table-col">
849,- (12 mnd)
</span>
</div>
<div className="col-md-2 col-sm-3 col-xs-3 nopadding">
<span className="table table-col table-text-small text-right">
<img id="imgShowMore" src="../../Images/arrow_purple_down.png" className="show-more _icon jq_expand_listview" /><label className="show-more _lbl jq_expand_listview">Vis mer</label>
</span>
</div>
</div>
<ProductDetails productData={this.props.productData} />
</div>
</div>
);
},
addToCart: function (e) {
alert("Hooooo!!!");
},
});
After 1/2 a day of trial and error, i suddenly tried to put all the JSX file references at the bottom of the _Layout.cshtml page...
That solved it all actually...