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);
Related
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.
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;}
Inside razor view I used model for rendering label like
#Html.LabelFor(model => model.MyName, htmlAttributes: new { #class = "control-label col-md-6" })
and now I want to use it's value instead of data annotation attr. value so I tried with DisplayFor like
#Html.DisplayFor(model => model.MyName, new { #class = "control-label col-md-6" })
this css class control-label col-md-6 is not apply.
Why?
The difference is that #Html.LabelFor helper function renders a <label></label> tag, and the #Html.DisplayFor helper function does not render any html tag, instead it renders plain text. For example the following code:
#Html.DisplayFor(model => model.MyName, new { #class = "control-label col-md-6" })
returns raw text:
Martin
considering that MyName had the value "Martin". And the code:
#Html.LabelFor(model => model.MyName, htmlAttributes: new { #class = "control-label col-md-6" })
will return:
<label class="control-label col-md-6">Martin</label>
Consider the difference.
Use following (if you want to use #Html.DisplayFor):
<span class"control-label col-md-6">#Html.DisplayFor(model => model.MyName)</span>
DisplayFor doesn't work like the other *For helpers. Like EditorFor, it's what's referred to as a "templated helper". In other words, what it renders is controlled by a template that can be modified. Importantly, for both of these methods, if you look up their documentation in MSDN, you'll see that the parameter that would normal correspond to htmlAttributes with the other helpers, instead refers to additionalViewData with these two. This is because, again, their output is controlled by essentially views, which take ViewData.
Additionally, with DisplayFor in particular, the default templates pretty much just output the value, with no HTML. If you pass a string property, for example, the output will be the value of that string and nothing else. Therefore, there's nothing to tie the HTML attributes to, even if you could pass them in.
If you want to do what you're trying to do, you'd have to create custom display templates. This can be done by adding views named after types (e.g. String, Boolean, Byte etc.) or members of the DataType enum (CreditCard, EmailAddress etc.), to Views\Shared\DisplayTemplates. For example, if you created a view at Views\Shared\DisplayTemplates\String.cshtml, then when you called DisplayFor with a property of type string, that view would be utilized to render it. You could then wrap the value that would otherwise be just output directly in some HTML of your choice and utilize ViewData to apply the appropriate HTML attributes. For example:
<span class="#ViewData["class"]">#ViewData.TemplateInfo.FormattedModelValue</span>
.NET Core 2.2 Razor Pages Resize Checkboxes
Late to the game here but needed to make check-boxes huge compared to how Razor Template displays them. Because I wanted user to see if it was checked or not.
I tried above stuff, didn't work. So I used Chrome Developer Tool to look at what the page was rendering and it showed this for the checkbox:
input[type="radio"], input[type="checkbox"] {
box-sizing: border-box;
padding: 0;
}
And I was going to go find it in the CSS file because I could use all check-boxes to be bigger. However, it said it was located here:
reboot.scss:373
Now, I swear it referenced a different scss file when I first opened in developer. But since it looked like Greek to me, a code slob, I just decided to put this (after trying it in style above) at the top of my Razor Page. Notice I just cloned the hidden style above and just added width and height:
<style>
input[type="radio"],
input[type="checkbox"] {
box-sizing: border-box;
width: 40px;
height:40px;
}
</style>
Now, Here is the Razor control I was displaying. It ends up as a checkbox in html at end, but I believe Razor Page is smart enough to know it was a True/False field and showed it as a text box. But. . . not before it applied the sizing I added!! Hope this helps someone.
<td>
#Html.DisplayFor(modelItem => item.Moderated)
</td>
(The editor is for a DateTime property called "ADate"
I am trying this but it does not work.
#Html.EditorFor(model => model.ADate, new { cssClass = "date" } )
So I tried this:
#Html.TextBoxFor(model => model.ADate, new { #class = "date" })
but it outputs type = text.. ofcourse it does.
So I tried a template... I added a folder in shared:
Shared/EditorTemplates
and then I created a .cshtml partial view called Date.cshtml
Now what on earth do I put inside it :O...
I have tried to understand lots of posts and stack overflow entries but it's not sinking in.
The goal is to attach a datepicker to the class ".date" across the entire app where ".date" class is used... The TextBoxFor works with my adding class part... but as I said, the type changes from date to text :(
Ok so this is what you can do:
In your EditorTemplates folder create a template called DateTime.cshml (the name will resolve automatically if you use it for dates, otherwise you have to specify it when using it).
Then in it:
#model System.DateTime
#Html.TextBox(
string.Empty,
Model.ToString("yyyy-MM-dd"),
new { #class="datepicker", #type = "date"})
Using the last parameter you can specify any html attribute (class, data, type etc.).
Then you use it like this:
#Html.EditorFor(x => x.ADate)
In case you chose to name your template with a different name you can specify it by invoking another overload:
#Html.EditorFor(x => x.ADate, "MyOtherAwesomeTemplate")
The EditorFor html helper does not render a date picker for your DateTime attributes (if that's what you want to do). The default EditorFor for DateTime is a text input. If you want to use a date picker, you'll have to use jQuery DatePicker (or any other third party date picker).
Also, the EditorFor helper does not have a parameter for html attributes. If you want to assign a class, you'll have to use TextBoxFor.
In your main View, use the EditorFor like this:
#Html.EditorFor(model => model.ADate)
Then, in your Editor Template (Date.cshtml), you'll have:
#model System.DateTime
<script type="text/javascript">
$(function () {
$(".date").datepicker();
});
</script>
#Html.TextBox("", Model.ToString("d"), new { #class = "date" })
You can download the jQuery UI from here: Download jQuery UI
And, you can learn more about the jQuery DatePicker here: jQuery DatePicker
You can do this
#Html.EditorFor(model => model.ADate)
<style type="text/css">
#ADate
{
#* your css properties goes here *#
}
</style>
this works fine for MVC3 Razor
I am working on an MVC project where in my text box I will only allow a user to enter uppercase characters.
This works in Razor when doing the following:
#Html.TextBoxFor(m => m.Name, new{#class="upper"}
I then apply the relevant code in my CSS file
However if I have the following code in Razor it doesnt work:
#Html.TextBox("Name", new{#class="upper"}
All I get is the text box showing {#class="upper"}
Does anyone know what I am doing wrong?
The second parameter is the textbox value, so you should leave it empty and put the class in the third parameter:
#Html.TextBox("Name", null,new{#class="upper"})
I believe that the second parameter in the #Html.TextBox helper is for the initial value of the textbox. if you do not want to specify an initial value you will either need to pass null or the empty string and then your attributes:
#Html.TextBox( "name", null, new { #class = "upper" })