I've a boolean field in the model just similar to the below one. And I want to create a view using embedded javascript.
**settings.js**
module.exports = {
attributes: {
myField:{
type:'boolean',
defaultsTo:'false'
}
}
};
This is the code that I'm using
<form action="/settings/create" method="POST" id="sign-up-form" class="form-inline">
<div class="form-group">
<label for="field1">my field label</label>
<input type="checkbox" class="form-control" id="field1" name="myField">
</div>
<input type="submit" class="btn btn-primary" value="Create"/>
<input type="hidden" name="_csrf" value="<%= _csrf %>" />
</form>
So the problems I'm facing are
When I create the record, I can see the boolean is set to ON and OFF in the json and why this is not true or false?
Also how to render the true or false in the view using embedded javascript
<div class="form-group">
<label for="confirmationBox">Field Label</label>
<% if(object.fieldName==true || object.fieldName=="true"){ %>
<input type="checkbox" id="confirmationBox" name="confirmationBox" checked>
<% } else { %>
<input type="checkbox" id="confirmationBox" name="confirmationBox">
<% } %>
</div>
Related
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();
}
I have a contact Razor page backed by a ViewModel called ContactViewModel. The html generated is below.
<form method="post">
<div class="form-group">
<input placeholder="First Name" class="form-control" type="text" id="ContactViewModel_FirstName" name="ContactViewModel.FirstName" value="" />
</div>
<div class="form-group">
<input placeholder="Last Name" class="form-control" type="text" id="ContactViewModel_LastName" name="ContactViewModel.LastName" value="" />
</div>
<input type="submit" value="SUBMIT" class="btn btn-default" />
</form>
I have another Razor Page with a form backed by ShippingAddressViewModel.
<form method="post">
<div class="form-group">
<input placeholder="First Name" class="form-control" type="text" id="ShippingAddressViewModel_FirstName" name="ShippingAddressViewModel.FirstName" value="" />
</div>
<div class="form-group">
<input placeholder="Last Name" class="form-control" type="text" id="ShippingAddressViewModel_LastName" name="ShippingAddressViewModel.LastName" value="" />
</div>
<div class="form-group">
<input placeholder="Zip Code" class="form-control" type="text" id="ShippingAddressViewModel_ZipCode" name="ShippingAddressViewModel.ZipCode" value="" />
</div>
<input type="submit" value="SUBMIT" class="btn btn-default" />
</form>
I want to apply JS client validation to the FirstName and LastName. Since the name and id of the controls are different, I have to create two JavaScript methods to target the controls.
Is there a way in Razor Pages to back the page with different view models but the id and name are the same?
This problem is caused because you have an object. You can create two different variables in your PageModel.
[BindProperty]
public string FirstName { get; set; }
[BindProperty]
public string LastName { get; set; }
Now you your view can have the following code:
<input asp-for="FirstName" />
<input asp-for="LastName" />
This will have as a result to have the following html:
<input type="text" id="FirstName" name="FirstName" value="" />
<input type="text" id="LastName" name="LastName" value="" />
I hope it helps.
The task is :
I have done the form and the design bit for the web page but never came across this push: function() in javascript
I am confused on how to approach or do this task any help will be appreciated! Thank you :)
var _itq = {
push: function() {
console.log.apply(console, arguments);
}
};
_itq.push("_itq", "initialised", "ok");
<form id="commentForm" method="get" action="">
<div class="form-group">
<input class="form-control" type="email" placeholder="Enter Your Email" required>
</div>
<div class="form-group">
<div>
<input type="text" class="form-control" placeholder=" Enter Your Name" pattern=".{2,}" required title="2 characters minimum">
</div>
<div>
<input type="password" class="form-control" placeholder="Your Password" pattern=".{5,10}" required title="5 to 10 characters">
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-block btn-info">Sign Up</button>
</div>
</form>
Here is the second question, this should set you on the right path for question 1.
document.getElementById('commentForm').onsubmit = function() { // attach to form submit
var email = document.getElementById("email").value; // get the email value (add id="email" to the email input in the html)
var name = document.getElementById("name").value; // get the name (add id="name" to the name input in the html)
var initials = name.split(' ').map(function(v, i) { // get the initials by splitting
return v[0] // on space and taking the 1st char
}).join('');
_itq.push(email, initials); // pass into your push
return false; // return false to stop the submit (optional depending on requirements)
};
working snippet below
var _itq = {
push: function() {
console.log.apply(console, arguments);
}
};
_itq.push("_itq", "initialised", "ok");
document.getElementById('commentForm').onsubmit = function() {
var email = document.getElementById("email").value;
var name = document.getElementById("name").value;
var initials = name.split(' ').map(function(v, i) {
return v[0]
}).join('');
_itq.push(email, initials);
return false;
};
<form id="commentForm" method="get" action="">
<div class="form-group">
<input id="email" class="form-control" type="email" placeholder="Enter Your Email" required>
</div>
<div class="form-group">
<div>
<input id="name" type="text" class="form-control" placeholder=" Enter Your Name" pattern=".{2,}" required title="2 characters minimum">
</div>
<div>
<input type="password" class="form-control" placeholder="Your Password" pattern=".{5,10}" required title="5 to 10 characters">
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-block btn-info">Sign Up</button>
</div>
</form>
Try Something like this
Your HTML:
<button type="submit" class="btn btn-block btn-info" onclick="fillarr()">Sign Up</button>
JS:
function fillarr(){
_itq.push(document.getElementById("emailId").value, document.getElementById("nameId").value);
}
You still need to add an ID for your Email and Name field though
I have a list of radio buttons with id, name and value attributes each.
in If(IsPost) to retrieve the selected radio button I have Request.Form[radio button name] which gives the value of the radio button. What if I want beside the value, the id of the button? What should? PS: I am using webmatrix to build the application
In my opinion your best option is to use a value that gives you more informations, something like:
#{
if (IsPost)
{
for (var i = 0; i < Request.Form.Count; i++)
{
string[] result = Request.Form[i].Split(',');
<p>Group: #result[0] - Selection: #result[1]</p>
}
}
}
<html lang="en">
<body>
<form method="post">
<h2>Group A</h2>
<input type="radio" name="groupA" id="groupA" value="A,1">1<br>
<input type="radio" name="groupA" id="groupA" value="A,2">2<br>
<input type="radio" name="groupA" id="groupA" value="A,3">3<br>
<input type="radio" name="groupA" id="groupA" value="A,4">4<br>
<h2>Group B</h2>
<input type="radio" name="groupB" id="groupB" value="B,1">1<br>
<input type="radio" name="groupB" id="groupB" value="B,2">2<br>
<input type="radio" name="groupB" id="groupB" value="B,3">3<br>
<input type="radio" name="groupB" id="groupB" value="B,4">4<br>
<input type="submit" />
</form>
</body>
</html>
I'm trying to submit a form with zombie.js, and pressButton() is failing with "Error: No BUTTON 'xxx'", where xxx is the selector. Here is the app:
var Browser = require('zombie');
b = new Browser();
b.visit('https://www.example.com/login/', function() {
b.
fill('name', 'My Name').
fill('code', 'My Code').
pressButton('submit', function() {
console.log(b.html());
});
});
And here is the form:
<form method="post" class="login">
<p> <label for="name"> <span id="nameprompt">Your Name:</span> </label> </p>
<input name="name" id="name" value="" size="40" maxlength="40" />
<p> <label for="code"> <span id="codeprompt">Bar Code</span> </label> </p>
<input name="code" id="code" type="PASSWORD" value="" size="40" maxlength="40" />
<div class="formButtonArea">
<input type="image" src="/screens/pat_submit.gif" border="0" name="submit" value="submit" />
</div>
</form>
I've tried a bunch of selectors including things like ".formButtonArea input" in addition to the obvious "submit" with no success.
What am I doing wrong?
It seems like you need the input to be of type="submit" (or type="button" perhaps). According to https://groups.google.com/forum/?fromgroups=#!topic/zombie-js/8L0_Cpn8vVU, where the author comments on clickLink, it's likely that clickButton will do the same: find buttons and then fire click.
Hope it helps.