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.
Related
I attempt to create the dropdown list in the View. The dropdown list for "CD_STATE_CLASS" "IN_DIVIDED" is working but for "TOLL_ROAD", it can return option values in the dropdown list, but the selected value defined in the function is not presented.When I log the TOLL_ROAD in the console, i can see the value but not in the dropdown list. I have no idea where the problem is because code looks identical. And also, when i save the form, it seems like selected TOLL_ROAD value in the dropdown list is not passing to the Road object.
private void GetEditRoadSelectLists(Road road)
{
var roadLookup = objMgr.GetRoadLookupDataBAL();
ViewBag.RoadTypes = roadLookup.RoadTypeLookup;
ViewData["CD_STATE_CLASS"] = new SelectList(roadLookup.StateClassLookup, "StateClassCode", "StateClassDescription", road.CD_STATE_CLASS);
ViewData["IN_DIVIDED"] = new SelectList(roadLookup.YesNoLookup, "YesNoShort", "YesNoLong", road.IN_DIVIDED);
ViewData["TOLL_ROAD"] = new SelectList(roadLookup.TollLookup, "Id","TOLL_ROAD", road.RoadsRamps.TOLL_ROAD);
//ViewData["TOLL_ROAD"] = new SelectList(roadLookup.TollLookup, "TOLL_ROAD", "TOLL_ROAD", road.RoadsRamps.TOLL_ROAD);
System.Diagnostics.Debug.WriteLine("toll"+road.RoadsRamps.TOLL_ROAD);
System.Diagnostics.Debug.WriteLine("YES" + road.IN_DIVIDED);
}
<div class="form-group row">
#Html.LabelFor(model => model.CD_STATE_CLASS, htmlAttributes: new { #class = "control-label col-md-2 required" })
<div class="col-md-4">
#Html.DropDownList("CD_STATE_CLASS", null, "-- Please select --", new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.CD_STATE_CLASS, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group row">
#Html.LabelFor(model => model.RoadsRamps.TOLL_ROAD, htmlAttributes: new { #class = "control-label col-md-2 required" })
<div class="col-md-4">
#Html.DropDownList("TOLL_ROAD", null, "-- Please select --", new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.RoadsRamps.TOLL_ROAD, "", new { #class = "text-danger" })
</div>
</div>
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" } })
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?
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>
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;
}