I saw lot of post regarding this but not able to solve.
In my view the bootstrap datepicker is popping out successfully for the input tag
eg:
<input class="span2 datepicker" size="16" type="text" value="12-02-2012">
When i run the page iam able to change the date through datepicker.
$(document).ready(function () {
$('.datepicker').datepicker();
});
but the same is not working with below code
<div class="control-group">#Html.LabelFor(model => model.dob, htmlAttributes: new { #class = "control-label " })
<div class="controls">
#Html.EditorFor(model => model.dob, new { htmlAttributes = new {#class = "datepicker" } })
#Html.ValidationMessageFor(model => model.dob, "", new { #class = "field-validation-error text-danger" })
</div>
</div>
Please help me.
It is sorted out.
<div class="control-group">#Html.LabelFor(model => model.dob, htmlAttributes: new { #class = "control-label " })
<div class="controls">
#Html.EditorFor(model => model.dob, new {#class = "datepicker" } })
#Html.ValidationMessageFor(model => model.dob, "", new { #class = "field-validation-error text-danger" })
</div>
</div>
I removed new { htmlAttributes = from the Editorfor
and its working fine :)
Related
I get some issues in the grid system.
I design this label and text box but I want all this together. How can I do that ? I tried but it is not come with me
enter image description here
This is my code:
<div class="form-group">
#Html.LabelFor(m => m.Name, htmlAttributes: new { #class = "control-label col-md-12" })
<div class="col-md-10" >
#Html.EditorFor(m => m.Name, new { htmlAttributes = new { #class = "form-control " } })
#Html.ValidationMessageFor(m => m.Name, "", new { #class = "text-danger" })
</div>
</div>
I believe col-md-12 should be replaced by col-md-2 is order to not exceed 12 columns.
Also, adding a row class with your form-group, and col-form-label in place of control-label if you are using bootstrap 4.
<div class="form-group row">
#Html.LabelFor(m => m.Name, htmlAttributes: new { #class = "col-md-2 col-form-label" })
<div class="col-md-10" >
#Html.EditorFor(m => m.Name, new { htmlAttributes = new { #class = "form-control " } })
#Html.ValidationMessageFor(m => m.Name, "", new { #class = "text-danger" })
</div>
</div>
Please consult the documentation for more details.
I have this "little" problem.
I have created a project MVC, where I need to register a user, with different field. (I will show you only a part.)
One particular field, is giving me an issue:
On the field DateOfBirth, where I have implemented a datepicker on jquery
When I click on my EditorFor label:
I got at first all the old data I taped before, and my calendar is behind, so i can't select the date:
Is there a way to make disappear the cache and have only the calendar?
#model WebApplication2.Models.Person
#{
ViewBag.Title = "Create";
}
<h2>Create</h2>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Person</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.FirstName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.FirstName, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.LastName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.LastName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.LastName, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.DateOfBirth, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.DateOfBirth, new { htmlAttributes = new { #class = "datepicker form-control" } })
#Html.ValidationMessageFor(model => model.DateOfBirth, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
}
<div>
#Html.ActionLink("Back to List", "ListPerson")
</div>
<link href="~/Content/themes/base/jquery-ui.min.css" rel="stylesheet" />
#section Scripts {
<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
#Scripts.Render("~/bundles/jqueryval")
<script>
$(function() {
$(".datepicker").datepicker(
{
dateFormat: "yy/mm/dd",
changeMonth: true,
changeYear : true
});
});
</script>
}
At first I thought it was just the cache of a browser, and I tested with many (IE11, Mozilla, Chrome), and I cleaned cache, but it seem that is storing the date on the application cache.
Do you know what it could be the reason?
Kind regards.
Try adding the autocomplete="off" attribute – Stephen Muecke
#Html.EditorFor(model => model.DateOfBirth, new { htmlAttributes = new { #class = "form-control", autocomplete = "off" } })
And it works :)
Can somebody help me out on how to change width of Edit box in following code? I tried everything but stubborn edit box wont change its width.
<div class="form-group">
#Html.LabelFor(model => model.Category, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Category, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Category, "", new { #class = "text-danger" })
</div>
</div>
Try this- Include style inside html attributes.
#Html.EditorFor(model => model.Category, new { htmlAttributes = new { #class = "form-control", style="width: 10px" } })
I am working on MVC application. Trying to the add the months to Kendo MVC Datetimepicker control based on the change event of text box control.
When the user enters the months in the Contract Duration field it should add Priority Date time control.
Could somebody advice how it can be done.
Contract Duration in Months
<div class="form-group">
#Html.LabelFor(model => model.ContractDurationInMonths, htmlAttributes: new { #class = "control-label col-md-4" })
<div class="col-md-8">
#Html.EditorFor(model => model.ContractDurationInMonths, new { htmlAttributes = new { #class = "form-control", style = "width:100%" } })
#Html.ValidationMessageFor(model => model.ContractDurationInMonths, "", new { #class = "text-danger" })
</div>
</div>
Priority Datetime control
<div class="form-group">
#Html.LabelFor(model => model.Priority, htmlAttributes: new { #class = "control-label col-md-4" })
<div class="col-md-8">
#*#Html.EditorFor(model => model.Priority, new { htmlAttributes = new { #class = "form-control" } })*#
#(Html.Kendo().DatePickerFor(model => model.Priority)
.Name("Priority")
.Value("10/10/2011")
.HtmlAttributes(new { style = "width: 100%" })
)
#Html.ValidationMessageFor(model => model.Priority, "", new { #class = "text-danger" })
</div>
</div>
Basically, set the blur() event on your textbox then update the value of datepicker:
<script>
$(document).ready(function() {
$("#ContractDurationInMonths").blur(function () {
var date = $("#Priority").data("kendoDatePicker").value();
var newMonth = date.getMonth() + kendo.parseInt($("#ContractDurationInMonths").val());
date.setMonth(newMonth);
$("#Priority").data("kendoDatePicker").value(date);
});
});
</script>
Here is an example in js: http://dojo.telerik.com/#sg53719/eseRo
I am new to MVC C# Razor, I have done this in PHP and I tried to use my previous code in Jquery (as shown below)
<script>
$(document).ready(function(){
$('.CurrentStatus').change(function () {
if(this.value == "Non-Teaching") {
$('#div-CurrentTDepartment').fadeOut('fast');
$('#div-CurrentTPostion').fadeOut('fast');
$('#div-CurrentNTDepartment').fadeIn('fast');
$('#div-CurrentNTPostion').fadeIn('fast');
}
else if (this.value == "Teaching") {
$('#div-CurrentTDepartment').fadeIn('fast');
$('#div-CurrentTPostion').fadeIn('fast');
$('#div-CurrentNTDepartment').fadeOut('fast');
$('#div-CurrentNTPostion').fadeOut('fast');
}
else {
$('#div-CurrentTDepartment').fadeIn('fast');
$('#div-CurrentTPostion').fadeIn('fast');
$('#div-CurrentNTDepartment').fadeIn('fast');
$('#div-CurrentNTPostion').fadeIn('fast');
}
});
});
</script>
and this is my Create code
<div class="form-group">
#Html.LabelFor(model => model.Status, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("Status", new SelectList(ViewBag.Statusdll, "Value", "Text"), "Select Status", new { #class = "form-control", #onchange = "location = this.value;" })
</div>
</div>
<div class="form-group" id="div-NTDepartment">
#Html.LabelFor(model => model.NTDepartment, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.NTDepartment, new { htmlAttributes = new { #class = "form-control" } })
</div>
</div>
<div class="form-group" id="div-NTPosition">
#Html.LabelFor(model => model.NTPosition, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.NTPosition, new { htmlAttributes = new { #class = "form-control" } })
</div>
</div>
<div class="form-group" id="div-TDepartment">
#Html.LabelFor(model => model.TDepartment, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.TDepartment, new { htmlAttributes = new { #class = "form-control" } })
</div>
</div>
The error is - if you select a 'Non-Teaching' on the dropdown, it shows a 404 error of the page '/Employees/Non-Teaching', which is really a 404 error because I don't have any page like that.
It should only hide or show the divs in the page.
Because you have add the event onchange = "location = this.value; which is effectively window.location.href = TheValueOfYourSelectedOption when an option is selected.
Remove that from the attributes your adding to #Html.DropDownList() and instead use
$('#Status').change(function () {
....
or if this is applicable to multiple controls, add a class name
#Html.DropDownList( ...., new { #class = "form-control", #class = "CurrentStatus" })