This is my code:
#Html.TextBox("Email", new { placeholder = "Email", Title = "Email" })
It does not work - when I run it, the browser displays the text inside the TextBox, and the HTML content that is: ("placeholder = "Phone", Title = "Phone" ").
You are using the wrong overload of the TextBox helper. The second argument is the value and the third argument are the html properties.
So, here's how to fix it:
#Html.TextBox("Email", null, new { placeholder = "Email", title = "Email" })
I think your confusion stems from the fact that the strongly typed TextBoxFor helper takes 2 arguments:
#Html.TextBoxFor(x => x.Email, new { placeholder = "Email", title = "Email" })
Related
I have a textbox and want to display the field is required when the form gets submitted. The error message do appear in case i click on the textbox and tab to go to next textbox. I have the 'Required' data annotation on my model like this:
[DisplayName("Shipment Number")]
[Required]
public string ShipmentNumber { get; set; }
My View looks like this:
<div class="col-sm-8">
#Html.TextBoxFor(model => model.ShipmentNumber, new {#class = "form-control", #maxlength = "8", #title = "Maximum length is 8"})
#Html.ValidationMessageFor(model => model.ShipmentNumber)
</div>
Oh, i also added these in $function:
$("form").kendoValidator();
$.validator.setDefaults({
ignore: ""
});
When i leave the textbox blank and submit the form, the form gets submitted without showing the error message i.e. 'The Shipment Number is required!'.
P.S: I also tried DataAnnotation:
[Required(ErrorMessage = "ShipmentNumber Is Required")]
Does anyone know how i can achieve this?
Update:
This fixed it:
Changes in Razor code to make textbox required and added required error message.
#Html.TextBoxFor(model => model.ShipmentNumber, new {#class = "form-control", #maxlength = "8", #title = "Maximum length is 8", data_required_msg = "Shipment Number is required!", required = "required" })
In button submit code in javascript, did this:
var validator = $(".form-horizontal").kendoValidator().data("kendoValidator");
if (validator.validate()) {
//code that needs to be executed if it is valid
}
Note: I also got rid of data annotation from modal class, #Html.ValidationMessageFor and $("form").kendoValidator code.
Try forcing the validation when you click your button:
// Validate the input when the Save button is clicked
$("#save").on("click", function() {
if (validator.validate()) {
// If the form is valid, the Validator will return true
save();
}
});
or
$("form").submit(function(event) {
event.preventDefault();
if (validator.validate()) {
status.text("Hooray! Your tickets has been booked!")
.removeClass("invalid")
.addClass("valid");
} else {
status.text("Oops! There is invalid data in the form.")
.removeClass("valid")
.addClass("invalid");
}
});
See http://docs.telerik.com/kendo-ui/framework/validator/overview
I am want to have a text area with multiple lines and a value in MVC3. I can't seem to define a textareafor or an editorfor that has a #Value attribute which I can set. I want to have something like
#Html.TextAreaFor(x => x.model, 10, 15, new{#Value="try"})
Also, I want to be able to do this in the view because the default value will depend on an attribute of another model used within the same view.
Any thoughts please.
The textarea html element does not support the value attribute. So you can't set its value using #Html.TextAreaFor.
So what you have to do is this:
#model MvcApplication.Models.Model
#{
if (1 > 2) // your logic here
{
Model.Description = "value1";
}
else
{
Model.Description = "value2";
}
}
#Html.TextAreaFor(model => model.Description, new { #rows = "10", #cols = "15" })
Let the html helper handle the rendering.
Use Telerik control
Html.Telerik().EditorFor(model => model.Description)
.Name("Editor")
.HtmlAttributes(new { style = "height:400px" })
.Encode(false)
.Value((String)ViewBag.Contents)
.Render();
I need to change the size of textbox :
#Html.SimpleTextBoxFor(m => ((ModifiableProperty<string>)m).Value.TheCurrentValue, new { id = fieldId})
I tried this
#Html.SimpleTextBoxFor(m => ((ModifiableProperty<string>)m).Value.TheCurrentValue, new { id = fieldId, #maxlength = "100" })
but doesn't work.
You can try this too :
#Html.SimpleTextBoxFor(m => ((ModifiableProperty<string>)m).Value.TheCurrentValue, new { id = fieldId, style ="width:200px"})
Just change the 200px value for the size you want.
For maxlength I use the same syntax as you and it is working for me.
#Html.TextBoxFor(model => model.EL_Taille_Initiale, new { style = "width:50px", #maxlength = "5" })
Take out the "#" character for your maxlength attribute. You only need that for reserved keywords (i.e. class). Also, you don't need the quotes around the number for maxlength.
#Html.SimpleTextBoxFor(m => ((ModifiableProperty<string>)m).Value.TheCurrentValue, new { id = fieldId, maxlength = 100 })
If that doesn't solve the problem, then please post what the HTML markup is being generated on the response page.
I am using a constructor for my TextBox that does not allow passing HTML attributes, so I had to add this to my $(document).ready function: $('#textBoxID').attr('maxlength', 30);
Doesn't directly answer the OP question, but offers an alternate starting point.
I have an html.TextArea helper that I'd like to set a default.
#Html.TextAreaFor(model => model.CompletionCriteria,
new { rows = 5, cols = 70, #class = "celltext2",
#Value = ViewBag.CompletionCriteria,
#Text = ViewBag.CompletionCriteria })
The controller is setting the ViewBag.CompletionCriteria variable by querying the DBContext to get the default vaule for this given TextArea. The TextArea Value and Text properties are being set correctly, so the ViewBag is good, however the data doesn't display in the TextArea. I'm sure I'm just missing a property setting. Any ideas?
Remove the #Value and #Text attributes. It will automatically populate it, assuming it's set correctly and you're not using a strongly typed model. make sure it's spelled correctly in both your View and Controller.
In controller
Phone = model.UserPhoneNumber
In HTML
#Html.TextBoxFor(m => m.MobilePhone, new { #class = "form-control", #Value =Viewbag.UserPhoneNumber, data_mask = "phone" })
For Custom Attributes you can use like data_mask sample
it will render like data-mask ="phone"
Just starting out using MVC3 and hit a problem trying to build a drop-down in a view.
The ViewModel is populated with a SelectList of items:
mdm.CaptionSetList=new SelectList(CaptionSet.Fetch(), "CaptionSetId", "Description")
which then is used in the view:
#Html.DropDownListFor(model => model.Entity.CaptionSetId, model.CaptionSetList)
but when the page is hit, the line is highlighted with the compiler message:
Compiler Error Message: CS0103: The name 'model' does not exist in the current context
What's the beginner's mistake I'm making?
The first argument for DropDownListFor is a function so that part is right, but the second part is just expecting a SelectList so all you need to do is
#Html.DropDownListFor(model => model.Entity.CaptionSetId, Model.CaptionSetList)
Note the capitalization.
Further clarification
In a strongly typed view Model is a property that refers to the model bound to the view. Since the second argument is just expecting a list and you've specified that the Model has a property called CaptionSetList, You specify the list as Model.CaptionSetList. If you had put the list in the ViewBag, you would put ViewBag.CaptionSetList.
Contrast this to the first argument which is a function that takes one argument of the same type as the model.
Got the same error.
In my case, I had done some search and replace and forgot to change the lambda expression:
#Html.DropDownListFor(m => model.StagingDelegate.ManagerId, new[]{
new SelectListItem() {Text = "ManagerId 1", Value = "1"},
new SelectListItem() {Text= "ManagerId 2", Value= "2"},
}, "Choose a Manager", new { #class = "form-control form-control-sm " })
Replace m => with model =>:
#Html.DropDownListFor(model => model.StagingDelegate.ManagerId, new[]{
new SelectListItem() {Text = "ManagerId 1", Value = "1"},
new SelectListItem() {Text= "ManagerId 2", Value= "2"},
}, "Choose a Manager", new { #class = "form-control form-control-sm " })