Generated form asp-action tag helper includes id - asp.net

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

Related

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.

asp.net core editor template: Property name null

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.

Thymeleaf checkbox not passing value to controller

<form class="form-horizontal" action="#" data-th-action="#{/admin/role/permission/save}" data-th-object="${permission}" method="post">
<div class="form-group">
<label class="col-sm-5 control-label" data-th-text="#{permission.list.permission.label}">Permission</label>
<div class="col-sm-7">
<input type="text" hidden="hidden" data-th-value="*{id}" data-th-field="*{id}" ></input>
<input type="text" class="form-control" data-th-value="*{permissionname}" data-th-field="*{permissionname}" ></input>
</div>
</div>
<div class="form-group" th:each="role : ${allRoles} ">
<label class="col-sm-5 control-label" data-th-text="${role.rolename}">Role 1</label>
<div class="col-sm-7">
<input type="checkbox" th:field="*{permRoles}" th:value="${role}"></input>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-5 col-sm-7" >
<button type="submit" class="btn btn-primary" name="action"
data-th-value="#{button.action.save}" data-th-text="#{button.label.save}" >Save</button>
<button type="submit" class="btn btn-default active" name="action"
data-th-value="#{button.action.cancel}" data-th-text="#{button.label.cancel}">Cancel</button>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-5 col-sm-7" >
<p class="text-danger" data-th-if="${#fields.hasErrors('permissionname')}"
data-th-errors="*{permissionname}">type error</p>
</div>
</div>
</form>enter code here
above is the html code , I have a permission object, and wants to assign list of roles to it by using the checkbox, the pass the object back to controller. But the value is not assigned to permission.permroles.
#RequestMapping(value = "/save", method = RequestMethod.POST)
#PreAuthorize("hasRole('PERMISSION_SAVEORADD')")
public ModelAndView savePermission(#ModelAttribute Permission permission, BindingResult result)
throws PermissionNotFoundException {
System.out.println(permission.getPermRoles().size());
permissionDao.updatePermission(permission);
return new ModelAndView("redirect:/admin/role/permission/list");
}
The above is my controller
please help, i am stuck for days.
thank you in advance
I think you could try to solve your problem using hidden input with underscore prefix.
<form th:action="#{${flowExecutionUrl}(_eventId='change')}" th:method="post">
<input type="hidden" name="_fooBar" th:value="${fooBar}"/>
<input type="checkbox" id="fooBar" name="fooBar" th:checked="${fooBar}" />
<!-- rest of code ommited -->
</form>
I had simmilar issue, see my blog post http://lukasgrygar.com/thymeleaf/thymeleaf-tips-and-tricks/#fix-of-problem-with-unchecked-checbox-when-using-thymeleaf-and-spring-web-flow

Twitter Bootstrap - changing height of checkboxes in form

I have a simple HTML form that uses the Twitter Bootstrap framework (v3.1.1). On the smartphone/iPhone these checkboxes are quite small and hard to select with your finger. I would like to make them larger/more spaced out so they are easier to hit but haven't found a way so far - is this even possible.
Here's my form html:
<div class="container">
<div>
<p>Tick all that apply:</p>
<form role="form" action="continue.php" method="post">
<input type="hidden" name="selectionID" value="4567">
<div class="checkbox">
<label>
<input type="checkbox" name="selection[]" value="Fever/Temperature">Apples<br>
<input type="checkbox" name="selection[]" value="Swelling or redness at injection site">Oranges<br>
<input type="checkbox" name="selection[]" value="Pain at injection site">Bananas<br>
<input type="checkbox" name="selection[]" value="Tired/Fatigued">Pears<br>
<input type="checkbox" name="selection[]" value="Irritable">Mangoes<br>
<input type="checkbox" name="selection[]" value="Sleep pattern change">Watermelon<br>
<input type="checkbox" name="selection[]" value="Other">Other<br>
</label>
</div>
<button type="submit" class="btn btn-primary">Next</button>
</form>
</div>
</div>
I've also setup a jsfiddle here
This isn't easy to do cross-broswer .. check out the study made here: http://www.456bereastreet.com/lab/form_controls/checkboxes/
Also, make sure you're using correct HTML code. You should wrap each of your checkboxes with label, like this:
<div class="checkbox">
<label>
<input type="checkbox" name="selection[]" value="Fever/Temperature" />Apples<br/>
</label>
<label>
<input type="checkbox" name="selection[]" value="Swelling or redness at injection site" />Oranges<br/>
</label>
<label>
<input type="checkbox" name="selection[]" value="Pain at injection site" />Bananas<br/>
</label>
<!-- etc. -->
</div>

Bootstrap Inline-Horizontal Form Design

I am trying to combine horizontal-inline features of bootstrap 3 form designs !
This is what I have currently,you can see that i have created an inline form
I want the checkbox element and an anchor tag for forgot password option like this .
I found the example of what I want # FB login form design
I have put my code # Bootply Example
Any Help would be nice guys !
This is what I could do with pure bootstrap:
<form class="form-inline" role="form">
<div class="form-group">
<label label-default="" class="sr-only" for="exampleInputEmail2">Email address</label>
<input class="form-control" id="exampleInputEmail2"
placeholder="Enter email" type="email">
<div class="clearfix"></div>
<div class="checkbox">
<label>
<input type="checkbox">Remember me</label>
</div>
</div>
<div class="form-group">
<label label-default="" class="sr-only" for="exampleInputPassword2">Password</label>
<input class="form-control" id="exampleInputPassword2"
placeholder="Password" type="password">
<div class="clearfix"></div>
<div>
forgot password?
</div>
</div>
<button type="submit" class="btn btn-primary btn-lg">Sign in</button>
</form>
http://www.bootply.com/127634

Resources