asp.net core editor template: Property name null - asp.net

I have several editor templates in which appears the same code for rendering an Enum like in this example:
#model OriginDto
#* This div is what I want to move to a specific editor template *#
<div class="form-group">
<label asp-for="Kind" class="control-label"></label>
<select asp-for="Kind" asp-items="Html.GetEnumSelectList<Origin.KindOfOrigin>()" class="form-control"> </select>
<span asp-validation-for="Kind" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Source" class="control-label"></label>
<input asp-for="Source" class="form-control" />
<span asp-validation-for="Source" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="EntryDate"></label>
<input asp-for="EntryDate" class="form-control" type="date" />
<span asp-validation-for="EntryDate" class="text-danger"></span>
</div>
So I decided to create the following template editor for Enum:
#model Enum
<div class="form-group">
<label asp-for="#Model" class="control-label"></label>
<select asp-for="#Model" asp-items="Html.GetEnumSelectList(Model.GetType())" class="form-control"></select>
<span asp-validation-for="#Model" class="text-danger"></span>
</div>
And replace the previous div with:
#Html.EditorFor(x => x.Kind)
But when it renders the HTML there are some differences. For example, the label is empty:
<label class="control-label" for="Cpu_Origin_Kind"></label>
But in the original template it had the property name:
<label class="control-label" for="Cpu_Origin_Kind">Kind</label>
It seems like the property name its not reaching the template. In fact, when examining "this.ViewData.ModelMetadata.PropertyName" while debugging the template it is null.
My questions are:
Why the property name is not reaching this template?
Is this approach wrong? If so, any hint is welcome.

Related

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();
}

Wordpress form link broken

I have a pre-form on a Wordpress site (localhost) where users submit their name, email, etc., before continuing to the first part of a multi-page quiz.
The problem is, if I enter any details, Wordpress directs to a 404 page. But if I leave them blank (obviously I want to make these required fields) then it directs to the next page all ok.
I have checked my .htaccess file, Apache settings and followed all the other possible solutions I have found on SO and elsewhere, but nothing I have found fixes the issue.
Here's my code:
<div class="pre-quiz">
<form action="<?php bloginfo('url'); ?>/part-1" method="post">
<div class="form-group row">
<div class="col-xs-6">
<input type="text" class="form-control" name="name" id="name" placeholder="First name">
</div>
<div class="col-xs-6">
<input type="text" class="form-control" name="surname" id="surname" placeholder="Last name">
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="business" id="business" placeholder="Business name">
</div>
<div class="form-group">
<input type="email" class="form-control" name="email" id="email" placeholder="Email address">
</div>
<div class="custom-control custom-checkbox custom-control px-4 pb-4 pt-2">
<input type="checkbox" class="custom-control-input" name="terms" id="terms" value="terms">
<label class="custom-control-label" for="terms">
I accept the Terms of Use & Privacy Policy
</label>
</div>
<div class="form-group">
<button type="submit" class="btn btn-block">Next step</button>
</div>
</form>
</div>
Any help would be appreciated.
Thanks
I don`t see any error. Try to name your checkbox not "terms", maybe there is a conflict.
Regards Tom
Tom, I took your idea and tried it with all the other fields to see if Wordpress was using 'name' or 'email' and changed them to something unique - It worked! Thanks again for your input.

Generated form asp-action tag helper includes id

I have the following form
<form asp-action="Edit">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input type="hidden" asp-for="Id" />
<div class="form-group">
<label asp-for="Title" class="control-label"></label>
<input asp-for="Title" class="form-control" />
<span asp-validation-for="Title" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="ReleaseDate" class="control-label"></label>
<input asp-for="ReleaseDate" class="form-control" />
<span asp-validation-for="ReleaseDate" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Genre" class="control-label"></label>
<input asp-for="Genre" class="form-control" />
<span asp-validation-for="Genre" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Price" class="control-label"></label>
<input asp-for="Price" class="form-control" />
<span asp-validation-for="Price" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Save" class="btn btn-primary" />
</div>
</form>
After running the project and going to Edit action view, i see in the source code in browser that <form asp-action="Edit">is translated into <form action="/Movies/Edit/2" method="post">
My question is, how does ASP know about the id (2) in "/Movies/Edit/2".
In this markup the ASP defines what is its ID to be passed in POST when its form is sent to the controller.
<input type="hidden" asp-for="Id" />
A hidden field allows your entity Id to be kept in the form without being seen or modified by users when a form is submitted.
See this documentation below as a supplement to your question.
https://learn.microsoft.com/en-us/aspnet/core/tutorials/first-mvc-app/controller-methods-views?view=aspnetcore-2.2
Thanks!
The edit form should always be delivered from an URL that has an ID in the URL according to our routing rules, something like /Movies/edit/1.
The form is always going to post back to that same URL, /Movies/edit/1.
The MVC framework will be able to pull that ID out of the URL and pass it as a parameter.
Refer to https://www.tutorialspoint.com/asp.net_core/asp.net_core_razor_edit_form.htm

how to get data by finding all and finding one at the same time

In my project on the user edit page I would like to show the current role,wich i get by findOne byId,but I would also like to get all available roles so that I can choose, roles are in a separate collection, and I dont have a problem when displaying eather one...or all..
<div class="form-group col-lg-12">
<label>Email</label>
<input type="email" class="form-control" id="email" value="{{emails.[0].address}}">
</div>
<div class="form-group col-lg-12">
<label>Password</label>
<input type="password" name="" class="form-control" id="password" value="{{password}}">
</div>
<div class="form-group col-lg-6">
<label>Name</label>
<input type="text" name="" class="form-control" id="firstname" value="{{profile.name}}">
</div>
<div class="col-xs-12"><strong>Current role:</strong>
<label class="radio-inline">
<input type="radio" name="optradio" id="accountRole" value="{{roleName profile.role}}" checked>{{roleName profile.role}}
</label>
</div>
{{/with}}
<div class="col-xs-12">
<form>
<div class="col-xs-12"><strong>Roles:</strong>
{{#each rolesInformation}}
<label class="radio-inline">
<input type="radio" name="optradio" id="accountRole" value="{{_id}}">{{roleName}}
</label>
{{/each}}</div>`
helpers look like this:
Template.editUser2.helpers({
user: () => {
return Meteor.users.findOne({_id:Session.get('id')});
},
playerInformation: () => {
return Players.find().fetch();
},
roleName: (id)=>{
return Roles.findOne({_id:id}).roleName;
},
rolesInformation: () =>{
return Roles.find().fetch();
},
when i run roleName or rolesInformation separateli it works fine...
whet both included i get "roleName not defined"

Issue aligning fields in a form using Bootstrap 3

I'm new to Bootstrap, I'm creating a registration form with two input fields:
<div class="input-group">
<div class="form-group">
<label class="control-label" for="user_password">Password</label>
<div class="controls">
<input type="{{passwordType}}" data-ng-change="passwordChanged();" data-ng-model="user.password"
class="form-control" id="user_password" name="user_password"
placeholder="Password" required>
</div>
</div>
<div class="form-group">
<label class="control-label">Show Password</label>
<div class="controls">
<input type="checkbox" data-ng-model="showPassword" data-ng-checked="showPassword"
data-ng-click="switchPasswordType()">
</div>
</div>
However I don't know what css style I'm missing but the label and the input field appeas one below the other at the left of the grid-container, so no like usual form. I have tried to put both inside a "" with the style="display:inline-block" and still same problem.
Any ideas how to sove that?
Thank you for your time.
Found the solution, I just created a row with two columns inside one for the label and other for the input and it made the job.
<div class="row">
<div class="col-sm-6">
<label class="control-label" class="" for="user_email">Email</label>
</div>
<div class="col-sm-6">
<div class="controls">
<input type="email" auto-focus autofocus="true" data-ng-model="user.email"
id="user_email" name="user_email"
placeholder="Insert your email" required>
</div>
</div>
</div>

Resources