I have the following partial view binded to a view model.
#model Omega.UI.WebMvc.Models.InputWithLabelViewModelBase
#{
string required = null;
}
#if (Model.IsRequired)
{
{
required = "required";
}
}
<td><label id="#Model.LabelId">#Model.LabelText</label></td>
<td>
<input id="#Model.InputId" data-bind= "value: #Model.CurrentValueProperty" required="#required"/>
<span class="k-invalid-msg" data-for="#Model.InputId"></span>
</td>
When IsRequired is true I want the required attribute to be available, otherwise not. When I run that code and IsRequired is false the required attribute is presented with empty value: required="". I am quite new to asp mvc and I do not see what am I doing wrong.
UPDATE per dove`s post:
This does not work:
#{
bool required = Model.IsRequired;
}
<td><label id="#Model.LabelId">#Model.LabelText</label></td>
<td>
<input id="#Model.InputId" data-bind= "value: #Model.CurrentValueProperty" required="#required" />
<span class="k-invalid-msg" data-for="#Model.InputId"></span>
</td>
This renders the following html:
required="False" (if IsRequired is false and vice versa)
which is incorrect:
from the html documentation:
The required attribute is a boolean attribute, and can be set in the following ways:
<input required>
<input required="required">
<input required="">
Note: I am using Razor 2.0
Am I doing something wrong?
Mvc takes works with booleans in these special cases (assuming required works like checked). Try this:
required="#Model.IsRequired"
Can you also check your project references to confirm you are using Razor 2 as your example above should work also. Right click on System.Web.Razor view the properties and see what Version it is. It should be 2.0.0.0
Related
[See updates at bottom]
I have a Razor page with a form on it. I want to have two buttons on that form, that perform a slightly different action - both using the same posted form data.
I tried using the asp-page-handler helper on the second button, but it doesn't seem to add anything to the HTML (I would expect it to add a formaction attribute to the <button> element, but it doesn't add anything at all).
Here's an example page:
#page "{id?}"
#model IndexModel
#tagHelperPrefix x:
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<p>Current value is #Model.Foo</p>
<x:form method="post">
<input type="text" name="foo" />
<button type="submit">Default</button>
<button type="submit" x:asp-page-handler="Alternative">Alternative</button>
</x:form>
... and here's the corresponding page model:
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace MyWebApplication.Pages
{
public class IndexModel : PageModel
{
[BindProperty]
public string Foo { get; set; }
public void OnGet(int? id)
{
}
public void OnPostAsync(string foo)
{
Foo = foo;
}
public void OnPostAlternativeAsync(string foo)
{
Foo = foo.ToUpper();
}
}
}
This is rendered as:
...where the generated HTML for the form is:
<form method="post">
<input type="text" name="foo" />
<button type="submit">Default</button>
<button type="submit" x:asp-page-handler="Alternative">Alternative</button>
</form>
The fact that the x:asp-page-handler attribute is still in the generated HTML makes me think that the Razor engine hasn't recognized it. I've tried taking off the x: prefix, but that didn't help.
What am I doing wrong?
UPDATE
OK, I tried removing the tag prefix and removing the #tagHelperPrefix line, and that made a difference. A formaction is added to the second <button> element as expected.
However:
that's really annoying - the #tagHelperPrefix is not something I want to lose, and
now both buttons are triggering the "Alternative" action, even though only one of them has the formaction!
Here's the new generated HTML:
<form method="post">
<input type="text" name="foo" />
<button type="submit">Default</button>
<button type="submit" formaction="/?handler=Alternative">Alternative</button>
</form>
SECOND UPDATE
OK, so If I put asp-page-handler="" on the "default" button, then each button goes to the correct handler, which is fine.
The last question that remains, then, is: how can I make this work with the tag helper prefix?
[Answering my own question in case this helps others.]
It turns out that:
The tag-helper-prefix only applies to elements, not attributes, so it should be asp-page-handler="..." rather than x:asp-page-handler="..." even if the tag-helper-prefix is x:.
Those asp- attributes are only recognized within a tag that is tag-helper-enabled - which is all elements when no tag-helper-prefix is specified, or only elements with the tag-helper-prefix where one is specified. In my case, I had to change <button ...> to <x:button ...>.
If you specify asp-page-handler for one button, you need to specify it on all the buttons, even if you specify it as "" to get the default action.
Here are the codes:
<EditForm OnValidSubmit="#SubmitText" id="inputText">
<InputText #bind-Value="_InputMsgModel.Msg" />
</EditForm>
After the program ran, it turned out to be this:
<form id="inputText">
<input class="valid">
</form>
Now I wanna add an attribute type="text" to the input element, how can I achieve this?
I tried to modify the code like this:
<EditForm OnValidSubmit="#SubmitText" id="inputText">
<input type="text" #bind-Value="_InputMsgModel.Msg" />
</EditForm>
Meanwhile, now visual studio reports an error:
I can not bind the model anymore.
I need to set the type to text for needing to set the keyboard in mobile correctly.
How can I solve this? Thank you.
What is wrong with this code:
<EditForm Model="#_InputMsgModel" OnValidSubmit="#SubmitText" id="inputText" >
<InputText #bind-Value="#_InputMsgModel.Msg" />
</EditForm>
Run this code with the above:
#code {
InputMsgModel _InputMsgModel = new InputMsgModel();
private void SubmitText()
{
Console.WriteLine(_InputMsgModel.Msg);
}
public class InputMsgModel
{
public string Msg { get; set; } = "My new message";
}
}
Do you see the text "My new message" in the text box ? I believe you do... All is well, and the two-way binding mechanism works well. Go and see now the Html...it's still <input class="valid"> which does not reflect the real state of the text box. Think about it...
Update: Of course you can use the following:
<EditForm Model="#_InputMsgModel" OnValidSubmit="#SubmitText" id="inputText" >
<input type="text" #bind-value="#_InputMsgModel.Msg" />
</EditForm>
Important: The error "The attribute names could not..." is triggered because you use capital "V" in #bind-Value. You should use lower case: #bind-value. This is because your using input 'Html element' here, and it has a value attribute, not a Value attribute. But when you use the InputText Component, the capital Value in #bind-Value refers to a Value property defined in the component.
TLDR;
It is like the string/textbox binding works just fine on input controls, but the checkbox binding backed by Boolean properties does not work. I know the binding for checkbox values needs to used a 'checked' attribute instead of a 'value' attribute, but Blazor is supposed to handle that across different control types.
I'm doing some Blazor work (server-side app) with RC1 and cannot seem to get Boolean values binding to an input checkbox control. I believe that the syntax being used is correct (see below). As a simple test, I created a new project and simply replaced the index.razor page with the sample code below. When you run it, notice:
The "Test Value" for the textbox input control initializes just fine.
The checkbox's initial value is true, but the checkbox is not checked.
Change the textbox input control's text and then change control
focus. Notice a message gets printed in the Debug window in the Output
tab of Visual Studio (Expected behavior)
Change the checkbox input control's value (checking or uncheck) and then change control focus. Notice that there no message appears in the Debug window in the Output tab of Visual Studio (Not expected behavior).
#page "/"
<div class="form-group">
<label for="last-name">Textbox Binding Test</label>
<input #bind="TestString" type="text" class="form-control" id="last-name" placeholder="Enter Last Name" />
</div>
<div class="form-group">
<label for="send-email-updates">Checkbox Binding Test</label>
<input type="checkbox" bind="#TestBool" id="send-email-updates" />
</div>
#code {
private bool _testBool = true;
protected bool TestBool
{
get { return _testBool; }
set
{
_testBool = value;
System.Diagnostics.Debug.WriteLine($"Value of {nameof(TestBool)} = {value}");
}
}
private string _testString = "Test Value";
protected string TestString
{
get { return _testString; }
set
{
_testString = value;
System.Diagnostics.Debug.WriteLine($"Value of {nameof(TestString)} = {value}");
}
}
}
This behavior was observed regardless of making the properties public, used auto-properties (no private variables), or removed the control name/id attribute values. This seems to happen regardless of whether I use the #code directive on the page or separate out a viewmodel that inherits from ComponentBase.
The bottom line is that I'm able to get text-based values when a user submits the form, but all the Boolean properties seem to remain as they were when first initialized.
When you look at both controls:
<input #bind="TestString" type="text" class="form-control" id="last-name" placeholder="Enter Last Name" />
<input bind="#TestBool" type="checkbox" id="send-email-updates" />
It is clear you are mixing bind and #bind notations, probably from older Blazor editions.
This one works in rc1:
<input type="checkbox" #bind="TestBool" id="send-email-updates" />
but in general I would argue for using the <EditForm> and related tags:
<EditForm Model="this">
<InputCheckbox #bind-Value="TestBool" />
</EditForm>
Weird this one.
On my .NET MVC 4 project I've added a file on App_Code who contains this method:
#helper CheckBox(string name, bool isChecked = false, string className = "") {
<div class="checkboxHolder">
<input id="#name" name="#name" type="hidden" value="#isChecked") />
<i class="#className checkboxBts fa #((isChecked) ? "fa-check-square-o" : "fa-square-o")" data-checkbox-associated="#name"></i>
</div>
}
I'm using it to style checkboxes using font-awesome, so my app checkboxes are made of an input type hidden who stores a boolean value and an icon to give feedback to users.
Weird thing is, on executing when isChecked == false, the hidden returned by this method is like:
<input id="myCheckboxId" name="myCheckboxId" type="hidden" />
There is no value at all, when I try to save it to the model an exception is thrown saying that model cannot be saved.
I've fixed it changing the method to use:
<input id="#name" name="#name" type="hidden" #((isChecked) ? "value=true" : "value=false") />
Which is working fine. However, I wonder if anyone know what could be happening on the original output.
Thank you all.
It's not entirely a duplicate, but this is answered in Why is my hidden input writing: value=“value” instead of true/false?:
if you have:
<input name="somefield" type="hidden" someprop="#(SomeBooleanExpression)"/>
[and #SomeBooleanExpression] is false it is omitted completely:
<input name="somefield" type="hidden"/>
To get around this, consider .ToString()
So, use:
<input id="#name" name="#name" type="hidden" value="value="#(isChecked.ToString())" />
Sitecore 7.1v1, most recent Glass Mapper, MVC4. When we submit the form POST, we get no layout with the return View. I'd prefer not to have to redirect to another page since this is supposed to be a wizard-like experience. This is also lightweight enough not to require Ajax, although we could use it as a last resort. I can't find who to make sure that while returning the View that we get the layout as well. I'm new to Sitecore MVC and pretty new at MVC in general. The PageBase that's referenced is a Custom Model using Glass.
We have the following Controller Rendering:
public class RegistrationController : Controller
{
[HttpGet]
public ActionResult VerifyAccount()
{
return View("~/Views/Public/Wizards/Registration/VerifyAccount.cshtml",
new SitecoreContext().GetCurrentItem<PageBase>());
}
[HttpPost]
public ActionResult CreateProfile()
{
ViewBag.Name = Request["VerificationType"];
ViewBag.Step = 2;
return View("~/Views/Public/Wizards/Registration/CreateProfile.cshtml",
new SitecoreContext().GetCurrentItem<PageBase>());
}
}
The default action for this is VerifyAccount(). This renders as expected. The initial view is as follows:
#inherits Glass.Mapper.Sc.Web.Mvc.GlassView<Public.Model.GlassModel.Primary.PageBase>
<div>
<h3>#Editable(a => a.Title)</h3>
<p>
#Editable(a => a.Description)
</p>
<hr />
#using (Html.BeginRouteForm(Sitecore.Mvc.Configuration.MvcSettings.SitecoreRouteName, FormMethod.Post))
{
#Html.Sitecore().FormHandler("Registration", "CreateProfile")
#Html.ValidationSummary(true, "Verification Not Selected.")
<fieldset>
#Sitecore.Globalization.Translate.Text("$Registration.VerificationTitle")
#{ var validations = new SitecoreContext().GetItem<GlassFrameBase>(Guid.Parse("{3694FC43-3DB7-470A-A1E9-2649856AAF10}"));}
<select id="VerType" name="VerificationType">
#foreach (var validation in validations.GetChildren<VerificationMethod>())
{
<option value="#validation.MethodValue">#validation.MethodName</option>
}
</select>
<input type="submit" value="Next" />
</fieldset>
}
This posts back to the CreateProfile() Method. This part works great. The only issue is that when it returns the view this time, it returns just the view without the layout.
The final view is as follows:
#using (Html.BeginRouteForm(Sitecore.Mvc.Configuration.MvcSettings.SitecoreRouteName, FormMethod.Post))
{
#Html.Sitecore().FormHandler()
<p>
<b>Verification Type Was: </b>#ViewBag.Name
</p>
<p>#ViewBag.Step</p>
<input type="hidden" value="ThisIsATest" name="TestHidden" id="TestHidden"/>
<input type="submit" name="back" value="Back" /><br />
<input type="submit" name="next" value="Next" />
}
Everything else is working exactly as expected but I'm missing something important that loads the Layout on the return trip.
I have noticed this before as well and I think it relates to this line:
#Html.Sitecore().FormHandler("Registration", "CreateProfile")
It seems to bypass the standard rendering pipeline and just call the target action. I have written a blog post on how you can control calls to different action on multiple controllers. this might help:
http://www.experimentsincode.com/?p=425
Try changing the return type of CreateProfile from ActionResult to PartialViewResult, and then return View("... to return PartialView("...
Also, here's a post about what you can return for Sitecore Controller Renderings.
http://mhwelander.net/2014/04/09/sitecore-controller-rendering-action-results-what-can-i-return/
I haven't looked deeply into form posting with Controller Renderings, but if the above suggestion doesn't work then maybe consider the execution lifestyle used in Sitecore MVC (mentioned in the post).