mvc3: Multiline Text area with value defined in the view - asp.net-mvc-3

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();

Related

KendoUI TimePicker

I'm using Kendo UI and the time picker is not showing a value also there is a value.
I'm using ASP MVC 4 and loading passing model data to the view. All the data is there in the model.. but for a reason i cannot explain the actual UI is not showing the time.
Code in HTML-View Binding Model to KendoUI:
#Html.LabelFor(model => model.StartTime)
#(Html.Kendo().TimePickerFor(model => model.StartTime)
.Events(e => e.Change("startChange"))
)
#Html.LabelFor(model => model.EndTime)
#Html.Kendo().TimePickerFor(model => model.EndTime)
JS: For startChange
function startChange() {
var startTime = this.value(),
endPicker = $("#EndTime").data("kendoTimePicker");
if (startTime) {
startTime = new Date(startTime);
endPicker.max(startTime);
startTime.setMinutes(startTime.getMinutes() + this.options.interval);
endPicker.min(startTime);
startTime.setMinutes(startTime.getMinutes() + 450);
endPicker.value(startTime);
}
}
First you need to select the time value, then it will bind with your model,
then try for this: use the .text() or .val()
endPicker = $("#EndTime").data("kendoTimePicker").text();

Telerik ASP.NET MVC 3 Grid - setting row background

I'm using Telerik Grid. I need to set background color for the entire row based on some property in view model. I've tried to do it as below by setting a background in IF statement for each column but backgound applies only on element not all cell (td). Also it seems it's a very "dirty" way to accomplish this task.
#(Html.Telerik().Grid(Model.SomeItems).Name("Grid")
.Columns(columns =>
{
columns.Template(
#<text>
#if (Model.IsOfSpecialColor)
{
<div class="gridRowBackground">
#Html.ActionLink(...)
</div>
}
else
{
#Html.ActionLink(...)
}
</text>).Title("Blabla");
});
You can change it using onRowDataBound event
#(Html.Telerik().Grid<Customer>()
.Name("Grid2")
.DataBinding(d => d.Ajax().Select("Select", "Home"))
.ClientEvents(e => e.OnRowDataBound("onRowDataBound"))
)
and the function is
<script>
function onRowDataBound(e) {
if (e.dataItem.ID == 2) {
e.row.style.backgroundColor = "grey";
}
}
</script>
If you are using server data binding, you can use CellAction. However, if you are using ajax data binding, you will need to use a solution like Tassadaque suggests.
#(Html.Telerik().Grid(Model.SomeItems)
.Name("Grid")
.CellAction(cell =>
{
if (cell.DataItem.IsOfSpecialColor.Value)
{
cell.HtmlAttributes["style"] = "background-color: red";
}
})

Specify size and maxlength for Html.TextBoxFor

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.

MVC3 Default value for HTML.TextAreaFor

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"

How do I set a checkbox in razor view?

I need to check a checkbox by default:
I tried all of these, nothing is checking my checkbox -
#Html.CheckBoxFor(m => m.AllowRating, new { #value = "true" })
#Html.CheckBoxFor(m => m.AllowRating, new { #checked = "true" })
#Html.CheckBoxFor(m => m.AllowRating, new { #checked = true })
#Html.CheckBoxFor(m => m.AllowRating, new { #checked = "checked"})
You should set the AllowRating property to true, preferably in the controller or model.
Like other inputs, the checkbox's state reflects the value of the property.
This works for me:
<input id="AllowRating" type="checkbox" #(Model.AllowRating?"checked='checked'":"") style="" onchange="" />
If you really wants to use HTML Helpers:
#Html.CheckBoxFor(m => m.AllowRating, new { #checked = Model.AllowRating})
Also take into account that if m.AllowRating is false, it will fail to set to status checked in your examples.
The syntax in your last line is correct.
#Html.CheckBoxFor(x => x.Test, new { #checked = "checked" })
That should definitely work. It is the correct syntax. If you have an existing model and AllowRating is set to true then MVC will add the checked attribute automatically. If AllowRating is set to false MVC won't add the attribute however if desired you can using the above syntax.
You can do this with #Html.CheckBoxFor():
#Html.CheckBoxFor(m => m.AllowRating, new{#checked=true });
or you can also do this with a simple #Html.CheckBox():
#Html.CheckBox("AllowRating", true) ;
you set AllowRating property to true from your controller or model
#Html.CheckBoxFor(m => m.AllowRating, new { #checked =Model.AllowRating })
<input type="checkbox" #( Model.Checked == true ? "checked" : "" ) />
only option is to set the value in the controller, If your view is Create then in the
controller action add the empty model, and set the value like,
Public ActionResult Create()
{
UserRating ur = new UserRating();
ur.AllowRating = true;
return View(ur);
}
If we set "true" in model, It'll always true. But we want to set option value for my checkbox we can use this. Important in here is The name of checkbox "AllowRating", It's must name of var in model if not when we post the value not pass in Database.
form of it:
#Html.CheckBox("NameOfVarInModel", true) ;
for you!
#Html.CheckBox("AllowRating", true) ;
I had the same issue, luckily I found the below code
#Html.CheckBoxFor(model => model.As, htmlAttributes: new { #checked = true} )
Check Box Checked By Default - Razor Solution
I did it using Razor , works for me
Razor Code
#Html.CheckBox("CashOnDelivery", CashOnDelivery) (This is a bit or bool value) Razor don't support nullable bool
#Html.CheckBox("OnlinePayment", OnlinePayment)
C# Code
var CashOnDelivery = Convert.ToBoolean(Collection["CashOnDelivery"].Contains("true")?true:false);
var OnlinePayment = Convert.ToBoolean(Collection["OnlinePayment"].Contains("true") ? true : false);

Resources