Develop Reference

Disable DropDownList with the ability to pass the value to the update model

I want my DropDownList to show only preselected value, user shouldn't be able to change it. I was able to do it using the disable attribute:
Controller:
ViewBag.ViewBagList= new SelectList(db.Table, "Id", "Name", table.id);
View (Part of my POST form):
#Html.DropDownList("ViewBagList", null, htmlAttributes: new { #class = "form-control", disabled = "disabled" })
And it works fine, I see the selected value in list. The problem is when I try to update row in database through this model:
db.Entry(table).State = EntityState.Modified;
db.SaveChanges();;
The problem is that when my DropDownList is disabled the value passed to the instance table is null, whereas when it isn't disabled it passes correct value.
How can I restrict user from changing value in DropDownList and still have the value passed to my instance?

Ok, after more digging I've found the answer on stack by user #BGStack :
https://stackoverflow.com/a/27890803/11646848
I will quote him in case it's deleted:
Regarding the catch 22:
If we use #disabled, the field is not sent to the action (Mamoud) And if we use >#readonly, the drop down bug still lets you change the value
Workaround: use #disabled, and add the field hidden after the drop down:
#Html.HiddenFor(model => model.xxxxxxxx)
Then it is truly disabled, and sent to the to the action too.

Html.EditorFor adding .textbox to element name

I have a project which contains a simple form for collecting signup info. Recently I have been working to add localization to the project, as all of the text shown to the user was hardcoded. I'm not sure what changed, but for some reason, now when Razor renders an HTML element using the Html.EditorFor method that ends up being a textbox, the Name property of the element has ".textbox" appended to it.
This breaks the bindings, so that when I receive my model all of the text values are null. Here is an example of what I'm seeing, Razor code:
<div class="form-group" ng-class="{ 'has-error': validate && accountForm.FirstName.$invalid }">
#Html.LabelFor(m => m.FirstName, new { #class = #ViewBag.LabelCssRequired })
<div class="#ViewBag.TextboxCss">
#Html.EditorFor(m => m.FirstName, new { htmlAttributes = new { ng_model = "firstName" } })
</div>
</div>
and here is the rendered output:
<input class="text-box single-line form-control ng-valid-maxlength ng-not-empty ng-dirty ng-valid-parse ng-valid ng-valid-required ng-touched" id="FirstName_textbox" maxlength="100" name="FirstName.textbox" ng-model="firstName" required="required" type="text" value="">
It is also adding a "_textbox" to the id, but I'm not as concerned about that at the moment. For some reason, this only seems to be happening to input elements where the type is "text". I have another input generated with.EditorFor which has the type of email and it doesn't have any modifications to the name.
This behavior also seems to be restricted to Html.EditorFor, if I use.TextboxFor, it works fine.
I have been able to make the bindings work by explicitly setting the #Name property in Razor, but this only masks the symptom, and I would like to avoid having to do this for every text input on the site.
Has anyone seen this behavior before, or know of a fix?

By default, the TextBoxFor helper generates HTML using a built-in template. You can override the defaults by creating files in the project root\views\shared\editortemplates folder.
Therefore the problem can be caused by some custom template being present there. Normally, you need to check for files whose name Match either the datatype (such as string) or the control type (such as TextArea). If the corresponding model property has a UIHint attribute on it, a custom file specified in it can also come into play.

Get data-id value of textbox on form submit

I have a textbox set-up, like so:
#Html.TextBoxFor(m => m.NewVehCode, new {data_id = "" })
When a user selects a vehicle, the description of the vehicle becomes the value of the textbox and the vehicle code (which is what I want to send to DB) becomes the data-id (not full code but I set the values like this):
$("#NewVehCode").val(vehDescription);
$("#NewVehCode").attr("data-id", vehCode);
This all works fine, except for the fact that when I submit, MVC grabs the value of the textbox.
Is there a way I can on submit, get the data-id of that textbox instead of the value?
Note that I'm not using .js to gather the data. Form calls a controller action that sends the model directly to the controller.

There is no way to submit values of "data" properties. I am not sure why you wanted to use data property (is that a requirement or not, not sure). But you can have a hidden property in the form so, when user selects a vehicle, along with data property of text box , update this hidden value. This hidden value will be submitted back to form.

Stephen Muecke's comment helped me trigger this solution:
I've added a hidden textbox to use for the vehicle code, and made the textbox that shows the description a standard textbox with no data binding.
<input id="newVehInput" readonly="readonly" class="longInput" type="text">
#Html.TextBoxFor(m => m.NewVehCode, new { style = "display: none"})
This way I can use the value with no issues:
$("#newVehInput").val(vehDescription);
$("#NewVehCode").val(vehCode);
(Will mark as answer in 2 days)

Add a hidden textbox to your html which you post back on submit
In your model:
public string Id {get;set;}
Render it in the view with a hidden class
And with js.
$("#vehicleList").on("change",function(){
$("#Id").val($vehCode)
})
When you submit the value of id should be set in your model

You can have a hidden field hold the Updated value.
HTML:
<input type="hidden" id="HiddenVehCode" name="HiddenVehCode" Value="0"/>
JS
$("#HiddenVehCode").val(vehDescription);
Note: you should have the model set up so that HiddenVehCode will reach the actionMethod on Form Submit.Something Like,
public int HiddenVehCode {get;set;}

How to render html code in #Html.TextBox asp .Net MVC?

Hi I'm creating MVC application and I'm using tinyMCE. Sometimes i need to change tinyMCE with simple TextBox field. I'm trying this with hide and show. At the begging I'm showing TextArea and hidding TextBox, but when user click convert tinyMCE to simple textBox field, I'm hidding textArea and showing TextBox.
This is my tinyMCE field
#Html.TextAreaFor(model => model.supTitle, new { htmlAttributes = new { #class = "form-control" } })
and this is simple TextBox
#Html.TextBoxFor(model => model.supTitle, new { htmlAttributes = new { #class = "form-control" } })
but when I'm using TextBoxFor I have something like this
<p> some text</p>
but I want only some text to be displayed without <p> tags.
Also when I save the changes only the changes from TextArea are saves into database.

If the value stored in the model.supTitle property contains Html as a string you would have to parse out the html before rendering the value to a standard input[type=text].
Only the first value is persisted to the database because both form elements have the same name, when the form is posted both values will be sent in the Http Post but the MVC model binding will only map the first form value to the model (which in this case is the text area).
Hiding & showing a html element does not prevent the value of the element from being posted in a form post, you would need to either remove the element from the DOM altogether or change the element name so that it is not bound by the model binder.

Try using this in your view
#Html.Raw(Model.YourTinyMCEContent);

MVC Editor with data- attribute from model attribute

I'm trying to build in form hinting for a web application.
The form hints are stored in the "Description" attribute of my ViewModel.
public class ViewModel{
[Description("Field description for input hints")]
public string Name {get;set;}
}
I need to be able to pass these through to my form controls "data-content" field.
<input data-content="Field description for input hints" name="Name" class="guidance"/>
I'm unable to just use a simple EditorFor as I can't add additional HTML fields to it.
If I create an editor template, I'd obviously need to access the model metadata. I'm unsure how to do this if I'm passing a null model?

Is this what you are looking for? Sorry for the conformation in the form of answer due to shortage of rep.
In JQuery can you add Attributes like below
$('Some ID').attr('your attr', 'Some Val')

you can use like this:
#Html.EditorFor(m => m.ColName, new { #class = "abc" })