Unable to bind field of type int in asp.net core - asp.net

I'm trying to save data in database but the problem i'm facing is that Every data of fields is binding with model except integer type fields it bind 0 to them.
I gives value in the fields but instead of those value it bind 0 to them.
Can anyone help me with this that how do i solve this problem.
This is the View about which i'm facing the problem.
The Fields which are not binding is Adult,Children,Senior and Travelers
#model Airline.Models.BookingModel
#{
ViewData["Title"] = "Buy";
}
<h2>Buy</h2>
<h4>BookingModel</h4>
<hr />
<div class="row">
<div class="col-md-4">
<form asp-action="Buy">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input asp-for="FlightSkyMiles" type="hidden" value="#ViewBag.Flight.SkyMiles" />
<div class="form-group">
<label asp-for="FlightName" class="control-label"></label>
<input asp-for="FlightName" value="#ViewBag.Flight.FlightName" class="form-control" readonly />
<span asp-validation-for="FlightName" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="FlightNo" class="control-label"></label>
<input asp-for="FlightNo" value="#ViewBag.Flight.FlightNo" class="form-control" readonly />
<span asp-validation-for="FlightNo" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="OriginCity" class="control-label"></label>
<input asp-for="OriginCity" value="#ViewBag.Flight.OriginCity" class="form-control" readonly />
<span asp-validation-for="OriginCity" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="DestinationCity" class="control-label"></label>
<input asp-for="DestinationCity" value="#ViewBag.Flight.DestinationCity" class="form-control" readonly />
<span asp-validation-for="DestinationCity" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Departure" class="control-label"></label>
<input asp-for="Departure" type="datetime" value="#ViewBag.Flight.Departure" class="form-control" readonly />
<span asp-validation-for="Departure" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Adult" class="control-label"></label>
<input asp-for="Adult" type="number" name="seats" value="0" class="form-control" id="adult" />
<span asp-validation-for="Adult" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Children" class="control-label"></label>
<input asp-for="Children" type="number" name="seats" value="0" class="form-control" id="childern" />
<span asp-validation-for="Children" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Senior" class="control-label"></label>
<input asp-for="Senior" type="number" name="seats" value="0" class="form-control" id="senior" />
<span asp-validation-for="Senior" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Travelers" class="control-label"></label>
<input asp-for="Travelers" type="number" name="TotalSeats" class="form-control" id="total" readonly required />
<span asp-validation-for="Travelers" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="FlightClass" class="control-label"></label>
<select class="form-control" onchange="getPrice(#ViewBag.Flight.Id)" asp-for="FlightClass" id="fclass" asp-items="Html.GetEnumSelectList<Classtype>()" itemid="" required>
<option selected="selected" value="">Please select</option>
</select>
<span asp-validation-for="FlightClass" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Price" class="control-label"></label>
<input asp-for="Price" onchange="multPrice()" id="price" class="form-control" readonly />
<span asp-validation-for="Price" class="text-danger"></span>
</div>
<div class="form-group">
<input type="radio" name="Reservation" value="Buy" required /> Buy
<input type="radio" name="Reservation" value="Block" /> Block
<span asp-validation-for="ReservationType" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Submit" class="btn btn-default" />
</div>
</form>
</div>
</div>
<div>
<a asp-action="Index">Back to List</a>
</div>
#section scripts
{
<script type="text/javascript" src="~/lib/jquery/dist/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function (e) {
function calculate() {
var adult = parseInt($("#adult").val());
var chi = parseInt($("#childern").val());
var sen = parseInt($("#senior").val());
$("#total").val(adult + chi + sen);
};
$("#adult").keyup(calculate);
$("#childern").keyup(calculate);
$("#senior").keyup(calculate);
});
</script>
}
<script>
function getPrice(id) {
function multPrice()
{
var mult = $("#total").val() * $("#price").val();
$("#price").val(mult);
}
$.ajax
({
url: '/Home/getPrice',
type: 'post',
data: { id:id,classId: $("#fclass").val()},
success: function (result) {
$("#price").val(result.price);
multPrice();
},
error: function () {
alert("Error")
}
});
}
</script>

Related

The model item passed into the ViewDataDictionary is of type but this ViewDataDictionary instance requires a model item of type 'System.Collections

When I Want to post my Form in Asp.net.Mvc I get this Problem How can i fix that
InvalidOperationException: The model item passed into the ViewDataDictionary is of type 'FormValidation.Models.Entity.Personel', but this ViewDataDictionary instance requires a model item of type 'System.Collections.Generic.IEnumerable`1[FormValidation.Models.Entity.Personel]'.
Controller
[HttpGet]
public IActionResult Index()
{
return View();
}
[HttpPost]
public IActionResult Post(Personel personel)
{
return View(personel);
}
form index
#model FormValidation.Models.Entity.Personel
<form method="post" asp-action="Post" asp-controller="Home">
<div class="container">
<div class="row">
<div class="form-group">
<label for="Name" class="form-control" placeholder="Enter Your Name">Name</label>
<input type="text" class="form-control" asp-for="Name" />
</div>
<br />
<div class="form-group">
<label for="Surname" class="form-control" placeholder="Enter Your Surname">Surname</label>
<input type="text" class="form-control" placeholder="Enter Your surname" asp-for="Surname" />
</div>
<br />
<br />
<div class="form-group">
<label for="City">City select</label>
<select class="form-control" asp-for="City">
<option></option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<br />
<br />
<br />
<div class="form-group">
<label for="Age" class="form-control" placeholder="Enter Your Age">Age</label>
<input type="number" class="form-control" placeholder="Enter Your Age" asp-for="Age" />
</div>
<br />
<div class="form-group">
<label for="Adress">Adres</label>
<textarea class="form-control" rows="3" asp-for="Adress">Adres</textarea>
</div>
</div>
</div>
<br />
<input type="submit" name="submit" value="submit" class="btn btn-primary" />
</form>
Post index
#model IEnumerable<FormValidation.Models.Entity.Personel>
#foreach (var item in Model)
{
<p>#item.Name</p>
<p>#item.Surname</p>
<p>#item.Age</p>
<p>#item.City</p>
}
just as the error indicates,you passed the single personel model to render the view with return View(personel);
However,the View requires IEnumerable<Personel>
If you just want to show the details of the model you just created ,modify your view :
#model FormValidation.Models.Entity.Personel
.......
<p>#Model.Name</p>
<p>#Model.Surname</p>
<p>#Model.Age</p>
<p>#Model.City</p>

Using input tag helper "name" and getting input value empty. ASP.NET MVC (.NET 5)

I have simple form for creating items
<form asp-action="CreateItem" enctype="multipart/form-data">
<div class="form-group">
<label asp-for="#Model.ItemPhoto" class="control-label"></label>
<input type="file" asp-for="#Model.ItemPhoto" name="Photo" class="form-control-file" />
<span asp-validation-for="#Model.ItemPhoto" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="#Model.Name" class="control-label"></label>
<input asp-for="#Model.Name" class="form-control" />
<span asp-validation-for="#Model.Name" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="#Model.ItemType" class="control-label"></label>
<select asp-for="#Model.ItemType" class="form-control">
#foreach (var itemType in Enum.GetValues(typeof(RandApp.Enums.ItemType)))
{
<option value="#itemType.ToString()">#itemType</option>
}
</select>
<span asp-validation-for="#Model.ItemType" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="#Model.MaterialType" class="control-label"></label>
<select asp-for="#Model.MaterialType" class="form-control">
#foreach (var materialType in Enum.GetValues(typeof(RandApp.Enums.MaterialType)))
{
<option value="#materialType.ToString()">#materialType</option>
}
</select>
<span asp-validation-for="#Model.MaterialType" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="#Model.Color" class="control-label"></label>
<select asp-for="#Model.Color" class="form-control">
#foreach (var color in Enum.GetValues(typeof(RandApp.Enums.ItemColor)))
{
<option value="#color.ToString()">#color</option>
}
</select>
<span asp-validation-for="#Model.Color" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="#Model.Size" class="control-label"></label>
<select asp-for="#Model.Size" class="form-control">
#foreach (var size in Enum.GetValues(typeof(RandApp.Enums.ItemSize)))
{
<option value="#size.ToString()">#size</option>
}
</select>
<span asp-validation-for="#Model.Size" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="#Model.DesignedFor" class="control-label"></label>
<select asp-for="#Model.DesignedFor" class="form-control">
#foreach (var desigendFor in Enum.GetValues(typeof(RandApp.Enums.DesignedFor)))
{
<option value="#desigendFor.ToString()">#desigendFor</option>
}
</select>
<span asp-validation-for="#Model.DesignedFor" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="#Model.Price" class="control-label"></label>
<input asp-for="#Model.Price" class="form-control" />
<span asp-validation-for="#Model.Price" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="#Model.Description" class="control-label"></label>
<textarea asp-for="#Model.Description" class="form-control"></textarea>
<span asp-validation-for="#Model.Description" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary" />
</div>
</form>
there is its controller
public async Task<IActionResult> CreateItem(Item item, IFormFile Photo)
{
if (ModelState.IsValid)
{
var path = Path.Combine(_webHostEnvironment.WebRootPath, "assets", Photo.FileName);
var stream = new FileStream(path, FileMode.Create);
await Photo.CopyToAsync(stream);
item.ItemPhoto = Photo.FileName;
await _itemRepo.CreateAsync(item);
ViewBag.Item = item;
return RedirectToAction("ReadItems");
}
return View();
}
my goal is to get the path of chosen photo and save it in folder called "assets"(located in "wwwroot" folder).
The problem is that when i fill the fields and submitting the values, i get item.ItemPhoto value null and i can't enter in if statement. (see the photo down below).
[1]: https://i.stack.imgur.com/H2aLt.png
one solution i have found is to remove "enctype="multipart/form-data" from form and "name="Photo" tag helper from input
<form asp-action="CreateItem" enctype="multipart/form-data">
<div class="form-group">
<label asp-for="#Model.ItemPhoto" class="control-label"></label>
<input type="file" asp-for="#Model.ItemPhoto" name="Photo" class="form-control-file" />
<span asp-validation-for="#Model.ItemPhoto" class="text-danger"></span>
</div>
but in this case i can't get the path properly.
what can i do to solve this problem, why am i getting empty value from input?
File and string type cannot be passed together with the same name automatically and cannot achieve this requirement by using just one input. You can set a hidden input for ItemPhoto and use js to set the value when the file changed:
#model Item
<form asp-action="CreateItem" enctype="multipart/form-data">
<div class="form-group">
<label asp-for="#Model.ItemPhoto" class="control-label"></label>
//change here...
<input type="file" name="ItemPhoto" class="form-control-file" onchange="SetValue(this)" />
//add hidden input......
<input asp-for="#Model.ItemPhoto" hidden/>
<span asp-validation-for="#Model.ItemPhoto" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="#Model.Name" class="control-label"></label>
<input asp-for="#Model.Name" class="form-control" />
<span asp-validation-for="#Model.Name" class="text-danger"></span>
</div>
<input type="submit" value="Create"/>
</form>
#section Scripts
{
<script>
function SetValue(input) {
var fileName = input.files[0].name;
//asp-for will generate the id and name
//so you can get the selector by using $("#ItemPhoto")
$("#ItemPhoto").val(fileName);
}
</script>
}
Backend (The name attribute should always match with the parameter/property name):
public async Task<IActionResult> CreateItem(Item item, IFormFile ItemPhoto)
{
//....
return View();
}

Bootstrap Column CSS

Here is my Angular2 Form
<form [formGroup]="myForm" autocomplete="off" novalidate> <div
class="row"> <div class="form-group col-md-4" [ngClass]="{ 'error' :
myForm.controls.firstname.invalid &&
myForm.controls.firstname.touched}">
<label for="firstname">Please tell us your name</label>
<control-messages [control]="myForm.controls.firstname"></control-messages>
<input name="firstname" formControlName="firstname" type="text"
class="form-control" placeholder="First Name *" /> </div> <div
class="form-group col-md-4" >
<label for="middlename"> </label>
<control-messages [control]="myForm.controls.middlename"></control-messages>
<input name="middlename" id="middlename" type="text" class="form-control"
placeholder="Middle Name" formControlName="middlename"/> </div>
<div class="form-group col-md-4" [ngClass]="{ 'error' :
myForm.controls.lastname.invalid && myForm.controls.lastname.touched
}">
<label for="lastname"> </label>
<control-messages [control]="myForm.controls.lastname"></control-messages>
<input name="lastname" formControlName="lastname" type="text" class="form-
control" placeholder="Last Name *"/> </div> </div>
</form>
enter image description here
How do I line up all the columns correctly? Please help.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form [formGroup]="myForm" autocomplete="off" novalidate>
<div class="row">
<div class="form-group col-md-4" [ngClass]="{ 'error' :
myForm.controls.firstname.invalid &&
myForm.controls.firstname.touched}">
<label for="firstname">Please tell us your name</label>
<control-messages [control]="myForm.controls.firstname"></control-messages>
<input name="firstname" formControlName="firstname" type="text" class="form-control" placeholder="First Name *" />
</div>
<div class="form-group col-md-4">
<label for="middlename"> </label>
<control-messages [control]="myForm.controls.middlename"></control-messages>
<input name="middlename" id="middlename" type="text" class="form-control" placeholder="Middle Name" formControlName="middlename" />
</div>
<div class="form-group col-md-4" [ngClass]="{ 'error' :
myForm.controls.lastname.invalid && myForm.controls.lastname.touched
}">
<label for="lastname"> </label>
<control-messages [control]="myForm.controls.lastname"></control-messages>
<input name="lastname" formControlName="lastname" type="text" class="form-control" placeholder="Last Name *" />
</div>
</div>
</form>
You had some line breaks in between form-control for the last name input field, try like this:
<form [formGroup]="myForm" autocomplete="off" novalidate>
<div class="row">
<div class="form-group col-md-4" [ngClass]="{ 'error' :
myForm.controls.firstname.invalid &&
myForm.controls.firstname.touched}">
<label for="firstname">Please tell us your name</label>
<control-messages [control]="myForm.controls.firstname"></control-messages>
<input name="firstname" formControlName="firstname" type="text"
class="form-control" placeholder="First Name *" />
</div>
<div class="form-group col-md-4" >
<label for="middlename"> </label>
<control-messages [control]="myForm.controls.middlename"></control-messages>
<input name="middlename" id="middlename" type="text" class="form-control"
placeholder="Middle Name" formControlName="middlename"/>
</div>
<div class="form-group col-md-4" [ngClass]="{ 'error' :
myForm.controls.lastname.invalid && myForm.controls.lastname.touched
}">
<label for="lastname"> </label>
<control-messages [control]="myForm.controls.lastname"></control-messages>
<input name="lastname" formControlName="lastname" type="text" class="form-control" placeholder="Last Name *"/>
</div>
</div>
</form>

vertically align textbox using bootstrap classes

I've made 5 rows using bootstrap, they got placed neatly, but there is a small issue. The rows are getting in contact without leaving any gap. I should not use , this will bring a big gap, and the textboxes in each row should be vertically align, if there is no radio button in that row, that corresponding place should be kept empty and textbox should get aligned properly with all rows. The starting textbox in all rows should start at the same place where the first row textbox has started. Here is my code
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="form-inline">
<div class="radio" style="width: 100px;">
<label><input type="radio" name="optradio">Option
1</label>
</div>
<input type="text" class="form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-inline">
<div class="radio" style="width: 100px;">
<label><input type="radio" name="optradio">Option
1</label>
</div>
<input type="text" class="form-control" /> <input type="text"
class="form-control" />
<div class="form-group">
<label for="sel1">Select list:</label> <select
class="form-control" id="sel1">
<option>Apple</option>
<option>Mango</option>
<option>Orange</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-inline">
<input type="text" class="form-control" /> <input type="text"
class="form-control" /> <input type="text" class="form-control" />
<input type="text" class="form-control" /> <input type="text"
class="form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-inline">
<div class="radio" style="width: 100px;">
<label><input type="radio" name="optradio">Option
1</label>
</div>
<input type="text" class="form-control" /> <input type="text"
class="form-control" />
<div class="form-group">
<label for="sel1">Select list:</label> <select
class="form-control" id="sel1">
<option>Apple</option>
<option>Mango</option>
<option>Orange</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-inline">
<input type="text" class="form-control" /> <input type="text"
class="form-control" /> <input type="text" class="form-control" />
<input type="text" class="form-control" /> <input type="text"
class="form-control" />
</div>
</div>
</div>
</div>
Please check in browser not in fiddle because it changes alignments .
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="form-inline form-group">
<div class="radio" style="width:95px;" >
<label><input type="radio" name="optradio" style="vertical-align:middle;"> Option
1</label>
</div>
<input type="text" class="form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-inline form-group">
<div class="radio" style="width:95px;" >
<label><input type="radio" name="optradio">Option
1</label>
</div>
<input type="text" class="form-control" /> <input type="text"
class="form-control" />
<div class="form-group">
<label for="sel1">Select list:</label> <select
class="form-control" id="sel1">
<option>Apple</option>
<option>Mango</option>
<option>Orange</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-offset-1">
<div class="form-inline form-group">
<input type="text" class="form-control" /> <input type="text"
class="form-control" /> <input type="text" class="form-control" />
<input type="text" class="form-control" /> <input type="text"
class="form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-inline form-group">
<div class="radio" style="width:95px;">
<label><input type="radio" name="optradio">Option
1</label>
</div>
<input type="text" class="form-control" /> <input type="text"
class="form-control" />
<div class="form-group">
<label for="sel1">Select list:</label> <select
class="form-control" id="sel1">
<option>Apple</option>
<option>Mango</option>
<option>Orange</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-offset-1">
<div class="form-inline form-group">
<input type="text" class="form-control" /> <input type="text"
class="form-control" /> <input type="text" class="form-control" />
<input type="text" class="form-control" /> <input type="text"
class="form-control" />
</div>
</div>
</div>
</div>
Here is JSFIDDLE

bootstrap - add label to span

I have the following markup
<form role="form">
<div class="input-group">
<label for="accountSpan">Account name</label>
<span class="input-group-addon" id="accountSpan">something</span>
<input type="text" class="form-control" placeholder="account name" aria-describedby="basic-addon1" id="accountInput" >
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" />
</div>
</form>
which results in
How can I have it aligned like the password?
Try like this: Demo
If you use form-group along with input-group like you did for password, you can get your expected output.
<div class="form-group">
<label for="accountSpan">Account name</label>
<div class="input-group">
<span class="input-group-addon" id="accountSpan">something</span>
<input type="text" class="form-control" placeholder="account name" aria-describedby="basic-addon1" id="accountInput">
</div>
</div>
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
<form role="form">
<div class="input-group">
<label for="accountSpan">Account name</label>
<span class="input-group-addon" id="accountSpan">something</span>
<input type="text" class="form-control" placeholder="account name"
aria-describedby="basic-addon1" id="accountInput" >
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" />
</div>
Here your answer jsFiddle:
<form role="form">
<div class="form-group">
<label for="accountSpan">Account name</label>
<div class="input-group">
<span class="input-group-addon" id="accountSpan">something</span>
<input type="text" class="form-control" placeholder="account name" aria-describedby="basic-addon1" id="accountInput" >
</div>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" />
</div>
</form>

Resources