Change TextBox Size on asp.net MVC5 - c#

I have this input on my View :
<div class="form-group">
#Html.LabelFor(model => model.Detail, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Detail)
#Html.ValidationMessageFor(model => model.Detail)
</div>
</div>
I want to increase the text box width. I have changed col-md-x value but nothing changed. How can I change the textbox width for this part of code? Thanks.

You can apply the various col- classes as needed rather than creating a custom class. Using these will ensure the site remains responsive - see http://getbootstrap.com/css/#forms-control-sizes
You can specify the class by adding
new { #class = "col-md-3"}
which results in
<div class="form-group">
#Html.LabelFor(model => model.Detail, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Detail, new { #class = "col-md-3"})
#Html.ValidationMessageFor(model => model.Detail)
</div>
</div>

col-md-x is the space allocated to the container of your textbox. You can't increase the textbox's size by increasing the class col-md-x, but only the container's size.
If you are using ASP.NET MVC 5.1, you can use :
#Html.EditorFor(model => model.Detail, new { htmlAttributes = new { #class = "largeTextBox" } })
And in your .css
.largeTextBox {
50px;
}
If you are using an older version of ASP.NET MVC, you should use #Html.TextBoxFor instead of #Html.EditorFor. This supports HTML attributes.
#Html.EditorFor(model => model.Detail, new { #class = "largeTextBox" }, })
More information, see the What's New section

You could use a textbox and use the style attribute along with the new keyword as the example shows below
#Html.TextBoxFor(model => model.Detail, new { style = "width:600px" })
It can also be used for LabelFor
#Html.LabelFor(model => model.Detail, "Detail", new { #class = "control-label col-md-4", style = "width:160px" })

You can pass an object of HtmlAttributes with the TextBox using new Keyword as
#Html.EditorFor(model => model.Detail, new { #class = "widthNew" });
and Now your css as
.widthNew{
100px;
}

Related

Is it possible to use a textbox succeded validation to modify another textbox's value?

I'm learning to use razor to create web applications.
I want to modify the following code
<div class="form-group">
#Html.LabelFor(model => model.foo, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.foo, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.foo, "", new { #class = "text-danger" })
</div>
</div>
so, instead of just displaying an error, also performs an action if the value is valid, I'm also using the following range validator
[Range(5000000, 50000000)]
I want to be able to change the following model's text, if the range validator succeds.
#Html.EditorFor(model => model.foofoo, new { htmlAttributes = new { disabled = "disabled", #class = "form-control" } })

MVC 5 Hide Text Box

I have a form created in MVC 5. There is a text box below:
<div class="form-group">
#Html.LabelFor(model => model.Client_PID, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Client_PID, new { htmlAttributes = new { #class = "form-control" } } )
#Html.ValidationMessageFor(model => model.Client_PID, "", new { #class = "text-danger" })
</div>
</div>
I want to make this for conditionally invisible with a default value, else to be filled in by the customer.
What is the best way to accomplish this. I have been able to make the text box invisible conditionally, but then my form fails,
if (ModelState.IsValid) is not valid...how do I pass a default value into this?
You can use HiddenFor when you want it to be hidden and in other case you can generate text box, for example:
#if(ShouldBeVisible)
{
#Html.EditorFor(model => model.Client_PID, new { htmlAttributes = new { #class = "form-control" } } )
#Html.ValidationMessageFor(model => model.Client_PID, "", new { #class = "text-danger" })
}
else
{
#Html.HiddenFor(model => model.Client_PID,1)
}
Now on the base of bool we are creating hidden field and setting it's default value otherwise it will generate text box and user would need to fill in value.
Hope it helps!
You can also do it with a input checkbox and a jQuery function to control this display/hide effect and its target default value.
<label for="hidden">
<input type="checkbox" id="hidden" class="display-hidden" data-target=".hidden" />
Show Client ID?
</label>
<div class="form-group hidden">
#Html.LabelFor(model => model.Client_PID, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Client_PID, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Client_PID, "", new { #class = "text-danger" })
</div>
</div>
Then the jQuery function:
$(".display-hidden").click(function() {
var target = $(this).attr("data-target");
if($(this).is(':checked'){
$(target).fadeIn(320);
} else {
$(target).fadeOut(320);
$(target).val(//your default value);
}
});
Here is how I did it...I figured it out before I looked at your awesome answers...thank you for helping!!
#if (true)
{
put in the filed
}
else
{
#Html.EditorFor(model => model.Client_PID, new { htmlAttributes = new { style = "display:none" } })
}
Perhaps this is not best practice?

how to add the label in both right and left in asp.net text box

I try to add label in the right side as well of the text box to include the unit of the value.I would like to have like this
and This code gives like this.
this is my code
<div class="form-group ">
#Html.LabelFor(model => model.files, htmlAttributes: new { #class = "control-label col-md-3" })
<div class="col-md-8">
#{ Html.EnableClientValidation(false); }
#Html.EditorFor(model => model.files, new { htmlAttributes = new { #class = "form-control " } })<span>GB</span>
#{ Html.EnableClientValidation(true); }
#Html.ValidationMessageFor(model => model.files, "", new { #class = "text-danger" })
</div>
</div>
Thanks.
The class = "col-md-8" contains position:relative.
Since this line has class="form control " and your GB doesn't have a class. It goes to its natural position. Adding a class should tell it where to go.
#Html.EditorFor(model => model.files, new { htmlAttributes = new { #class = "form-control col-md-11" } })<span class="col-md-1">GB</span>

bootstrap form-group control-label missplaced

I have a form-group where the label is missplaced, the label is too far down compared to the dropdownlist, see image.
This is my code:
<div class="form-group">
<div class="col-lg-2"></div>
#Html.LabelFor(model => model.deviceModel, "OS:", htmlAttributes:
new { #class = "col-lg-2 control-label" })
<div class="col-lg-4">
#Html.DropDownListFor(model => model.deviceModel, new SelectListItem[]{
new SelectListItem{Value = "1", Text="iOS"},
new SelectListItem{Value = "2", Text="Android"}},
new { htmlAttributes = new { #class = "form-control" } })
</div>
<div class="col-lg-2"></div>
</div>
What have i done wrong, why is it missplaced?
I am not into C# and Razor but based on my comment and looking at the code the newin front of the htmlAttributes for the Dropdownlist looks not right. It seems like the class is not applied to the Dropdownlist, which then could cause the shifting, probably caused by different margin parameters.
<div class="form-group">
<div class="col-lg-2"></div>
#Html.LabelFor(model => model.deviceModel, "OS:",
htmlAttributes: new { #class = "col-lg-2 control-label" })
<div class="col-lg-4">
#Html.DropDownListFor(model => model.deviceModel, new SelectListItem[]{
new SelectListItem{Value = "1", Text="iOS"},
new SelectListItem{Value = "2", Text="Android"}},
htmlAttributes: new { #class = "form-control" } )
</div>
<div class="col-lg-2"></div>

Limit entered text to combobox datasource

I am trying to set up my MVC 5 app so that Users cannot enter a value that doesn't appear in the dropdown list.
I found the following solution,JSFiddle Here ,but I am having great difficulty translating this into Razor Syntax.
Below is what I have so far. What I cannot figure out is how to get the "datasource" to check against.
<div class="form-group">
#Html.LabelFor(model => model.loadType, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#(Html.Kendo().ComboBox()
.Name("loadType")
.Filter(FilterType.Contains)
.DataTextField("Text")
.DataValueField("Value")
.BindTo(Model.LoadTypes)
.Suggest(true)
)
#Html.ValidationMessageFor(model => model.loadType)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.loadDescrip, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#(Html.Kendo().ComboBox()
.Name("loadDescrip")
.Filter(FilterType.Contains)
.DataTextField("DocCode")
.DataValueField("DocCode")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetCascadeDocumentNumbers", "DockDoor")
.Data("filterLoadDescription");
})
.ServerFiltering(true);
})
.Enable(false)
.AutoBind(false)
.CascadeFrom("loadType")
.Events(e =>
{
e.Change("onChange");
})
)
#Html.ValidationMessageFor(model => model.loadDescrip)
</div>
</div>
function onChange() {
var lT = $("#loadType").data("kendoComboBox").input.val();
if (lT != "Generic") {
var lD = $("#loadDescrip").data("kendoComboBox").input.val();
// Here I need to compare 'lD' to what is populated in the comboBox dropdown
var combobox = $("#loadDescrip").data("kendoComboBox");
//this is for Testing purposes only
alert(lD +" " + lT);
}
};
You can get the DataSource for any Kendo widget off the widget's .dataSource property. So for example:
var loadDescripDataSource = $("#loadDescrip").data("kendoComboBox").dataSource;
From there you can call .view() on the DataSource to get the array of items in the datasource, then loop over them to find what you need.

Categories

Resources