I have the following inside my asp.net mvc web application :-
<div><span class="f">Data Center Name</span> #Html.EditorFor(model => model.Switch.TMSRack.DataCenter.Name, new { disabled = "disabled" })</div>
but the field will not be disabled ,, can anyone adivce please?
THanks
#Html.EditorFor() does not have an overload to support htmlAttributes. You could try #Html.TextBoxFor()
#Html.TextBoxFor(model => model.propertyName, new {disabled= "disabled" })
If you are using system key words such as class in htmlAttributes please add # before the attribute name.
Ex:
#Html.TextBoxFor(model => model.propertyName, new {#class = "disabledClass" })
Using MVC 5, #Html.EditorFor() supports htmlAttributes
#Html.EditorFor(model => model.x, new { htmlAttributes = new { #class = "form-control", #disabled = "disabled" } })
The above example shows how you can add a class and also the disabled attribute
Another alternative: surround the EditorFor with a div or a span with a certain id, and then use a bit of jquery/js:
<span id="editors">
#Html.EditorFor(x => x.ViewModelProperty)
</span>
<!-- Disable above editors. EditorFor doesn't allow html attributes unfortunately. -->
<script type="text/javascript">
$(function () { $('#editors :input').attr("disabled", true); });
</script>
For those that lose your text value : Disabled fields does not pass its value to the controller. Instead, use #readonly = "readonly"
#Html.EditorFor(model => model.EmployeeCode, new { htmlAttributes = new { #readonly = "readonly", #class = "form-control"} })
If you lose information when you accept the Edit-changes ...
You could try
<h3>#Model.x</h3>
#Html.HiddenFor(model => model.x, new { htmlAttributes = new { #class = "form-control" } })
You can also use EditorFor()
eg:
#Html.EditorFor(model => model.Nama, new { htmlAttributes = new { #disabled ="true", #class = "form-control" } })
Related
I'm am dealing with a problem in Razor View. DropDown is working fine but the selected value is not setting properly. The value is set from the controller but in the view #Html.DropDownListFor value is not setting. Any help will be highly Appreciated. Thanks in Advance! Here is my Code.
View:
#Html.LabelFor(x => x.BranchID, htmlAttributes: new { #class = "col-2 col-form-label" })
<div class="col-md-3">
#Html.DropDownListFor(x => x.BranchID, new SelectList(Model.listofBranch, "BranchID", "BranchName"), new { #class = "form-control m-input", #id = "BranchID" })
#Html.ValidationMessageFor(model => model.BranchID, "", new { #class = "text-danger" })
</div>
Controller
mdlGRN.BranchID = obj.BranchID;
return View(mdlGRN);
In the view code the selected value is not specified, when you are calling:
#Html.DropDownListFor(x => x.BranchID,
new SelectList(Model.listofBranch, "BranchID", "BranchName"),
new { #class = "form-control m-input", #id = "BranchID" })
There is no value passed to the SelectList Constructor to indicate the SelectedValue
It should be something like this asuming that the value you want selected is the one saved into the model:
#Html.DropDownListFor(x => x.BranchID,
new SelectList(Model.listofBranch, "BranchID", "BranchName", Model.BranchID),
new { #class = "form-control m-input", #id = "BranchID" })
I render a PartialView inside my main View
View:
#model FullProductViewModel
...
<div class="send-container">
#Html.Partial("_CommentForm", new CommentViewModel { ProductId = Model.Id, Title = "" , Context="" })
</div>
...
I have a filed with name "Title" in Both my classes "FullProductViewModel" and "CommentViewModel".
_CommentForm PartialView:
#model CommentViewModel
<p class="page-title">#Resources.SendComment</p>
#using (Html.BeginForm("Comment", "Home", FormMethod.Post, new { #class = "form-comment form-submit" }))
{
#Html.AntiForgeryToken()
<div class="input-group">
#Html.LabelFor(model => model.Title)
#Html.ValidationMessageFor(model => model.Title, "", new { #class = "text-danger" })
#Html.EditorFor(model => model.Title, new { htmlAttributes = new { #class = "form-control" } })
</div>
<div class="input-group">
#Html.LabelFor(model => model.Context)
#Html.ValidationMessageFor(model => model.Context, "", new { #class = "text-danger" })
#Html.TextAreaFor(model => model.Context, htmlAttributes: new { #class = "form-control", rows = "8" })
</div>
<div class="input-group">
#Html.LabelFor(model => model.CaptchaCode)
#Html.ValidationMessageFor(model => model.CaptchaCode, "", new { #class = "text-danger" })
#Html.EditorFor(model => model.CaptchaCode, new { htmlAttributes = new { #class = "form-control" } })
</div>
<div class="captcha-wrapper">
<img alt="Captcha" id="imgcaptcha" src="#Url.Action("Captcha", "Captcha")" />
</div>
<button class="btn btn-submit" type="submit">#Resources.SendMessage</button>
}
The problem is "Title" inside PartialView take its value form "FullProductViewModel" model but not "CommentViewModel ". i can easily change the field name "Title" inside one of models to solve problem... but why this happened and how i can fix it without change field name?
Your Title property is conflicting with the #{ ViewBag.Title = ".. line of code in your view (the ViewBag code is used by the _Layout.cshtml file to set the global <title> attribute for the page).
All the HtmlHelper methods that generate form controls set the value by checking (in order)
ModelState
The ViewDataDictionary (ViewData or ViewBag)
The value of the models property
In your case, nothing has been added to ModelState. But because a value for Title has been added to the ViewDataDictionary, its that value which is used for the value of your textbox. The method never gets to read the actual value you have set in your model.
The only realistic option (unless you want to modify the code in the _Layout and all views that use it) is to change the name of the property.
This the html page that not work the problem with NewspostedDate
<div class="form-group">
#Html.LabelFor(model => model.NewsPostedDate, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.NewsPostedDate, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.NewsPostedDate, "", new { #class = "text-danger" })
</div>
</div>
instead of Editorfor you can use TextBoxfor.
try this
#Html.TextBoxFor(m => m.NewsPostedDate, new { #class = "form-control date-picker" })
$('.date-picker').datepicker({ format: "yyyy/mm/dd", autoclose: true })
Note:
Good approach first load you css file , then load javascript/jquery . because user first see you UI , then interact with your UI
Looks like your Editorfor is missing the class "NewsPostedDate" or perhaps you mean to refer directly to the element so it should be:
jQuery('#NewsPostedDate').datetimepicker({ format: 'DD/MM/YYYY' });
Note the # instead of the .
How can I give my TextBox, ng-click attribute when using Html.TextBoxFor?
#Html.TextBoxFor(model => model.User.Firstname,
new {
#class = "form-control required",
placeholder = "نام"
})
Add ng_click to htmlAttributes object.
#Html.TextBoxFor(model => model.User.Firstname, new
{
#class = "form-control required",
placeholder = "نام" ,
ng_click = "yourFunc()"
})
*Note : The _ instead of - in ng_click is because C# does not accept -
I have an MVC view that is using Bootstrap styles. I want to use "#Html.EditorFor" rather than "#HtmlTextBoxFor". Why doesn't EditorFor work out that it needs to be a textbox and then end up with the same result and TextBoxFor??
My reason for asking is that my next field will be a date and want to use EditorFor and with the DataType data annotation it will display a date picker.
Below is screenshot and view code and the Forename is EditorFor whilst the Surname is (the preferred format) TextBoxFor.
<div class="form-group">
#Html.LabelFor(m => m.Title, new { #class = "control-label" })
#Html.DropDownListFor(m => m.Title, new SelectList((IEnumerable)#ViewData["Titles"]), new { #class = "form-control" })
</div>
<div class="form-group">
#Html.LabelFor(m => m.Forenames, new { #class = "control-label" })
#Html.ValidationMessageFor(m => m.Forenames)
#Html.EditorFor(m => m.Forenames, new { #class = "form-control" })
</div>
<div class="form-group">
#Html.LabelFor(m => m.Surname, new { #class = "control-label" })
#Html.ValidationMessageFor(m => m.Surname)
#Html.TextBoxFor(m => m.Surname, new { #class = "form-control" })
</div>
<div class="form-group">
#Html.LabelFor(m => m.DateOfBirth, new { #class = "control-label" })
#Html.ValidationMessageFor(m => m.DateOfBirth)
#Html.EditorFor(m => m.DateOfBirth, new { #class = "form-control" })
</div>
I am posting this answer as it worked perfectly for me - all thanks to #StephenMuecke. Although tagged as MVC4 (I will remove the tag) I was actually using MVC5 and therefore could pass html attributes:
<div class="form-group">
#Html.LabelFor(m => m.Forenames, new { #class = "control-label" })
#Html.ValidationMessageFor(m => m.Forenames)
#Html.EditorFor(m => m.Forenames, new { #class = "form-control" })
</div>
becomes:
<div class="form-group">
#Html.LabelFor(m => m.Forenames, new { #class = "control-label" })
#Html.ValidationMessageFor(m => m.Forenames)
#Html.EditorFor(m => m.Forenames, new { htmlAttributes = new { #class = "form-control" } })
</div>
TextBoxFor accepts an attributes parameter because it always creates <input> tags, and thus, it can add attributes to them.
However, EditorFor can render anything from a single <input> tag, to a fully fledged editor (created by declaring a custom editor, or by passing a complex type to the editor). So, it makes no sense to accept an attributes parameter for this case. If you look at the overloads list for this method in MSDN you'll see that, if you pass an object, that object is treated as "additional ViewData", but never as "attributes". If you look at TextBoxFor docs, you'll see that there are several overloads that accept an attributes parameter.
However, the latest versions of MVC (5.1+) do accept attributes in EditorFor helper. Please, see this SO Q&A: Does Html.EditorFor support more than class in MVC5.1?.
Html.EditorFor(Function(m) m.Forenames, New With {
Key .htmlAttributes = New With { Key .[class] = "form-control" }
})
FYI - according to the Telerik code converter, this is what the VB.NET razor version of the answer looks like (yuck). But, maybe useful for someone else out there.
(tested and works)
I use the following workaround to solve the problem for the moment (until I upgrade to mvc5).
Add this to the end of your _layout.cshtml file:
<script type="text/javascript">
var inputs = $('input, textarea, select')
.not(':input[type=button], :input[type=submit], :input[type=reset]');
inputs.addClass('form-control');
</script>