I have defined connection alternatives for email and SMS. I want to have email checked by default.
I wondered if I can add attribute checked in Razor without changing model or controller.
Because if I use plain HTML, then it works but with Razor and when I inspection the page, there is no checked attribute.
#checked = "checked"
#checked = checked
#checked = "true"
#checked = true
new{#checked = "checked"}
<div class="checkbox-wrapper">
<label>
#Html.CheckBoxFor(m => m.Email, new { #class = "form-check-input", id = "E-post", #checked = "checked" })
<label for="E-post">E-post</label>
</label>
</div>
email checkbox checked when the page is loaded
I found that CheckBoxFor does not have an attribute checked. The solution is to use CheckBox and then the second attribute is the boolean true or false which is the answer to the attribute isChecked.
#Html.CheckBox("name",true,new {#class="className",id="idName"})
In your controller action,set Model.Email=true;.
this link might help you, set a CheckBox by default Checked
Related
I know this question has a lot of answers. I have looked through all the solutions to disable google autocomplete(the drop down of suggestions), like using autocomplete=0ff or autocomplete=false, but nothing has solved the issue.
I have created an MVC app that has views with dropdown lists and HTML EditorFor.
One solution to add a name to the HTML editor for, helped to remove autocomplete, however since I changed the name of the HTML EditorFor, I had an issue posting back the value.
<div class="col-md-10">
#Html.EditorFor(model => model.Address, new {htmlAttributes = new { #class = "form-control", #id = "show_address", Name = Guid.NewGuid().ToString(), autocomplete = "noped" } })
</div>
Does anybody have a solution for 2019 to disable the google autocomplete?
Update:
I tried using html.textboxfor(as given in the first solution below), however I have realised that autocomplete=off only works if there is one other textboxfor in the view. If there is multiple textboxfor in the same view, using autocomplete=off on any of the Html Textboxfor will not work for any of them to disable autocomplete! Can anyone please help?
EditorFor is having its own some disadvantages, it did not work in some scenarios, a better way to use TextBoxFor instead of EditorFor.Also, It did not affect Postback value.(For more details check here)
#Html.TextBoxFor(model => model.Address, new { #class = "form-control", #id = "show_address", autocomplete = "off" })
UPDATE: Check my updated demo DEMO
After adding autocomplete=off, still some browser ignores them and they try to show you some hint or autofill. More info check this
Add some random_value in autocomplete, so browsers consider as an off.
#Html.TextBoxFor(model => model.Address1, new { #class = "form-control", #id = "show_address", autocomplete = "some_random_value" })
I think I have found the answer. I give credit for #Mangesh Ati for this solution. I just wanted to summarise the solution for anyone else interested.
autocomplete=off works to disable google autosuggestions on all #htmlTextBoxFor, besides for the part of model called address, instead use autocomplete=randomn_string
Important:
If you are using a jquery autocomplete on the textboxfor..its important to add the attribute of autocomplete=randomn_string on .focus like below:
$('#show_address').autocomplete({
}).focus(function () {
$(this).attr('autocomplete', 'some_random_value');
});
Did you try?
<%= Html.TextBoxFor(
model => model.date,
new { #class = "aDatePicker", autocomplete = "off" }
)%>
It will generate markup that is close to the following:
<input type="text" id="date" name="date" class="aDatePicker" autocomplete="off" />
Also you can try:
//Disable autocomplete throughout the site
$(document).ready(function() {
$("input:text,form").attr("autocomplete","off");
})
In VB this worked for me (use C# converter):
#Html.EditorFor(Function(m) m.Password, New With {.class = "form-control text-center", .autocomplete = "new-password"})
<input type="any" readonly onfocus="this.removeAttribute('readonly');">
How can I render the checkbox unchecked by default?.
I try this.
<?=$form->field($model, 'rememberMe', ['template' => "<div>{input}</div>\n<div>{error}</div>"])->checkbox(['checked'=>false])?>
But no way. It allways appends checked="checked" to the html. I need the checkbox to be unchecked for the first time.
Try using value = false
<?=$form->field($model, 'rememberMe',
['template' => "<div>{input}</div>\n<div>{error}</div>"])->
checkbox(['value' => false])?>
or (simply) assign $model->rememberMe = false;
This is very useful. only need to set true or false.
For example :-
$model->"CHECKBOX NAME" as true or false
Simply
I've an Hotel model and there is a HotelPrice list in the model.
What i'm trying to do is when user display hotel detail page let hotel prices' info be shown, also they can be editable. I've a breakfastIncluded property on HotelPrice instances which i have to display as radio button.
Here is my code:
<div>
#{
foreach(var hotelPrice in Model.HotelPrices)
{
<label class="mt-radio-inline>
#Html.RadioButtonFor(hotelModel => hotelPrice.breakfastIncluded, "1", new { #checked = (hotelPrice.Breakfast.ToString() == "1") })Yes
<span></span>
</label>
<label class="mt-radio-inline>
#Html.RadioButtonFor(hotelModel => hotelPrice.breakfastIncluded, "0", new { #checked = (hotelPrice.Breakfast.ToString() == "0") })No
<span></span>
</label>
}
}
When i display my page(i could not come editing part, yet), all breakfastIncluded properties' radio buttons are displayed as unassigned and the last one's radio button is displayed wrongly(i.e it has to be "Yes" but it seems like "No").
However, when i checked by Inspect tool of browser, all of the radio buttons' checked property appears correct(i.e if it should be "Yes" that radio button's checked is true and "No"'s checked is false).
I'm new to html and i could not figure out why that happens. Can you help me? Thanks in advance.
By applying solutions in comments. I used for instead of foreach and it appears that i shouldn't set checked value since the radio buttons have values.
I am trying to generate a unique label and and input text box for a partial view that is being used to render a list of user input rows.
By unique I mean that each input text box should have its unique html "id" and "name" so that when is submitted each input can be identified
In the View I have
#model UserDataModel
#{
var inpName = "benefName" + #Model.Row;
var inpAge = "benefAge" + #Model.Row;
}
#Html.LabelFor(x => x.Name, new { #class="labelhalf"})
#Html.EditorFor(x => x.Name, new { id = #inpName, htmlAttributes = new { #class = "form-control animated" } })
When the view is being render this is what I am seeing
<label class="labelhalf" for="Name">Nombre (Opcional)</label>
<input class="text-box single-line" id="Name" name="Name" type="text" value="">
As you can see the "name" and "id" attributes of the text input is "Name" and "Name" and is not using the value of the #inpName variable ("benefName1" for example)
Also I am trying to assign some CSS classes to that same input using "htmlAttributes"
I had previously tried this with this approach
<label form="FormStep_01" for=#inpName class="labelhalf">Nombre (Opcional)</label>
<input form="FormStep_01" id=#inpName class="form-control animated" pattern="^[_A-z0-9]{1,}$" type="text" placeholder="" required="">
...but the content of the input fields with this approach are not being submited and that is the reason I am trying to use the #Html.EditorFor
UPDATE
I am now using the TextBoxFor which takes the "id" and the "class" fine but not the "name" which is used in the submit
#Html.LabelFor(x => x.Name, new { #class = "labelhalf" })
#Html.TextBoxFor(x => x.Name, new { #id = #inpName, name = #inpName, #class = "form-control animated" })
Please let me know how to achieve this in MVC4
Issue 1 (Using EditorFor())
You cannot add html attributes using EditorFor() in MVC-4. This feature was not introduced until MVC-5.1, and then the correct usage is
#Html.EditorFor(m => m.SomeProperty, new { htmlAttributes = new { someAttribute = "someValue" }, })
Issue 2 (Using TextBoxFor())
You cannot change the value of the name attribute using new { name = "someValue" }. The MVC team built in a safe guard to prevent this because the whole purpose of using the HtmlHelper methods to generate form controls is to bind to your model properties, and doing this would cause binding to fail. While there is a workaround, if you do discover it, don't do it! As a side note - the following line of the private static MvcHtmlString InputHelper() method in the source code
tagBuilder.MergeAttribute("name", fullName, true);
is what prevents you overriding it.
Issue 3 (Manual html)
You not giving the inputs a name attribute. A form posts back a name/value pair based on the name and value attributes of successful controls, so if there is no name attribute, nothing will be sent to the controller.
Side note: If your manually generating html, there is no real need to add an id attribute unless your referring to that element in javascript or css.
Its unclear why your trying to create a input for something that does not appear to relate to your model, but if your trying to dynamically generate items for adding items to a collection property in your model, refer the answers here and here for some options which will allow you to bind to your model.
I have a project written in C# MVC using Razor templates. On one of my pages I have several input fields that contain numeric values. The Razor code that sets the values of these input fields looks like this:
#Html.Editor(Model.DesignParams[i].ParamId,
new {
htmlAttributes = new
{
#Value = Model.DesignParams[i].DefaultValue,
#class = "form-control text-right",
#type = "text",
id = "_" + Model.DesignParams[i].ParamId,
uomid = Model.DesignParams[i].UOMId,
measureid = Model.DesignParams[i].MeasureId
}
})
The above code works fine using FireFox and Chrome and generates an input field that looks like this:
<input type="text" uomid="MBH" name="HeatOfRejection" measureid="HeatLoad"
id="_HeatOfRejection" class="form-control text-right text-box single-line"
value="5000.0">
But the same Razor code, identical #Model values viewed with IE generates this:
<input Value="5000" class="form-control text-right text-box single-line"
id="_HeatOfRejection" measureid="HeatLoad" name="HeatOfRejection"
type="text" uomid="MBH" value="" />
As you can see, there is a difference between the value= attribute generated for IE in that the value attribute that gets my actual value begins with an uppercase 'V' and the lowercase value is an empty string. I'm stumped on this...
Can anyone tell me why this is happening and possibly how to handle it?
This difference effects jQuery's ability to return the input's value with:
var value = $(inputfield).attr("value");
Maybe .val() will retrieve the input field value, but this is going to require a rewrite of core jQuery code that supports this page and others, so I wanted to ask if anyone can tell me why this 'Value=' gets created for IE only and if there is a way of overcoming the problem.
Update:
Changing #Value to #value (or just value) results in an empty value attribute in Firefox and IE:
<input type="text" value="" uomid="MBH" name="HeatOfRejection" measureid="HeatLoad"
id="_HeatOfRejection" class="form-control text-right text-box single-line">
As StuartLC points out, you are trying to get Html.Editor to do something it wasn't designed to do.
What happens when you pass a #value or #Value key to the htmlAttributes is that the rendering engine produces an attribute with that name in addition to the value attribute it's already generating:
<input type="text" name="n" value="something" value="somethingElse" />
or
<input type="text" name="n" value="something" Value="somethingElse" />
In both cases, you're giving the browser something bogus, so it can't be expected to exhibit predictable behavior.
As alluded above, Html.Editor has functionality to generate the value attribute based on the expression argument you pass to it. The problem is that you are using that incorrectly as well. The first argument to Html.Editor() needs to be an expression indicating the model property that the editor should be bound to. (e.g. the string value "DesignParams[0].ParamId") Nowadays, the preferred practice is to use the more modern EditorFor that takes a lambda function, as StuartLC showed in his post:
#Html.EditorFor(model => model.DesignParams[i].ParamId, ...)
You are "capitalising" the value html attribute. Change this to lower case...
#Value = Model.DesignParams[i].DefaultValue
as below ...
#value = Model.DesignParams[i].DefaultValue
IE is not the smartest of web browsers and there's definitely something wrong in the way Trident (they're parsing engine) validates elements' attributes as seen in these threads...
https://github.com/highslide-software/highcharts.com/issues/1978
Highcharts adds duplicate xmlns attribute to SVG element in IE
Also, as already noted somewhere else. What's the need for the Editor extension method? Isn't it simpler to just use TextBoxFor instead?
#Html.TextBoxFor(model => model.DesignParams[i].ParamId
, new
{
#class = "form-control text-right"
, uomid = Model.DesignParams[i].UOMId
, measureid = Model.DesignParams[i].MeasureId
})
Editor works with metadata. then you need to more about this,
http://aspadvice.com/blogs/kiran/archive/2009/11/29/Adding-html-attributes-support-for-Templates-2D00-ASP.Net-MVC-2.0-Beta_2D00_1.aspx
But the easiest way is go with
#model Namespace.ABCModel
#using (Html.BeginForm("Action", "Controller", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
#Html.TextBoxFor(model => model.DesignParams[i].ParamId, new { #class = "form-control text-right", uomid = Model.DesignParams[i].UOMId, measureid = Model.DesignParams[i].MeasureId })
}
You shouldn't be using invalid Html attributes in this way. Use the data- attributes in Html 5.
Also, your use of #Html.Editor(Model.DesignParams[i].ParamId (assuming ParamId is a string) deviates from the helper's purpose, which is to reflect the property with the given name off the Model, and use the value of this property as the Html value attribute on the input. (MVC will be looking for a property on the root model with whatever the value of ParamId is, which seems to silently fail FWR)
I would do the defaulting of Model.DesignParams[i].ParamId = Model.DesignParams[i].DefaultValue in the Controller beforehand, or in the DesignParams constructor.
#Html.EditorFor(m => m.DesignParams[0].ParamID,
new {
htmlAttributes = new
{
// Don't set value at all here - the value IS m.DesignParams[0].ParamID
#class = "form-control text-right",
#type = "text",
id = "_" + Model.DesignParams[i].ParamId,
data_uomid = Model.DesignParams[i].UOMId,
data_measureid = Model.DesignParams[i].MeasureId
}
Note that this will give the input name as DesignParams[0].ParamID, which would be needed to post the field back, if necessary.
Here's a Gist of some example code
(The underscore will be converted to a dash)
Use data() in jQuery to obtain these values:
var value = $(inputfield).data("uomid");