When the bootstrap-datepicker is used inside a modal window, there is no decoration on hover events (days, buttons...) and current date is not highlighted.
It works fine when the datepicker is not inside a modal window.
How can I fix that?
Edit :
in my view "Details.cshtml":
<div class="form-group">
#Html.LabelFor(model => model.ImpactForm.DateFinTestPilote, new { #class = "control-label col-md-4" })
<div class="col-md-8">
#Html.EditorFor(model => model.ImpactForm.DateFinTestPilote)
#Html.ValidationMessageFor(model => model.ImpactForm.DateDebutTestPilote)
</div>
</div>
I have an editor template for Nullable DateTime type :
#inherits System.Web.Mvc.WebViewPage<System.Nullable<DateTime>>
#if (Model.HasValue)
{
#Html.TextBox("", (Model.Value.ToShortDateString()), new { #class = "datepicker form-control" })
}
else
{
#Html.TextBox("", null, new { #class = "datepicker form-control" })
}
bootstrap.css and bootstrap.js are loaded in _Layout.cshtml.
datepicker.css, bootstrap-datepicker.js and bootstrap-datepicker.fr.js are loaded in Details.cshtml
Try Loading CSS of Bootstrap in View itself and not in Layout,i think in your problem other CSS's is modifying css of bootstrap so load css of bootstrap in view where you are opening the modal.
Thanks!!
Related
I have this editorTemplate:
#model MyNamespace.Models.SomeModel
#using HtmlHelpers.BeginCollectionItem
<div>
#using (Html.BeginCollectionItem("someProperty")) {
<div class="form-group">
#Html.LabelFor(m => m.field1, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.PasswordFor(m => m.field1, new { #class = "form-control" })
</div>
</div>
//more content here
}
</div>
I need to conditionally include the #using (Html.BeginCollectionItem("someProperty")) {} part depending on a value of the ViewBag.
Is this possible?
Yes, it's possible
You need to include the using in # {/// using - without # }
example :
#{
if(ViewBag.x==x){
using (Html.BeginCollectionItem("someProperty")) {}
}else{
}
}
I use modal to include new terms in dropdownlist.
<div class="form-group">
#Html.LabelFor(model => model.NatureKindID, "Kind of nature", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<div id="divDropNatureKinds">
#Html.Action("ReloadDropDownListNatureKinds", "Modals")
</div>
#Ajax.ActionLink(" ", "CreateModalNatureKinds", "Modals", null, new AjaxOptions { UpdateTargetId = "modaldropbody", OnComplete = "openModal" }, new { #class = "glyphicon glyphicon-plus" })
#Html.ValidationMessageFor(model => model.NatureKindID, "", new { #class = "text-danger" })
</div>
And Also in the main form has a div where modal is building:
<div class="modal fade" id="modaldrop" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div id="modaldropbody" class="modal-body">
</div>
</div>
</div>
And also an script:
#section scripts {
<script>
function openModal() {
$("#modaldrop").modal()
}
</script>
}
When user hit the Action Link the "CreateModalNatureKinds" modal is open. It is a simple form and works well.
New nature types are saved in the database and everything is fine at this point.
So from this form I'll just show the script triggered by the close button that closes the modal and triggers reloading of the dropdownlist div from the main screen
<script>
$("#btnClose").click(function () {
$("#divDropNatureKinds").load("/Modals/ReloadDropDownListNatureKinds");
$("#modal").close;
});
</script>
ReloadDropDownListNatureKinds have only:
#{
Layout = null;
}
#Html.DropDownList("NatureKindID", null, "Select one", htmlAttributes: new { #class = "form-control" })
And Controller ActionResult is:
public ActionResult ReloadDropDownListNatureKinds(int? idNatureKind)
{
if (idNatureKind == null)
ViewBag.NatureKindID = ListToDropDown();
else
{
ViewBag.NatureKindID = ListaToDropDown(idNatureKind);
}
return PartialView();
}
public SelectList ListToDropDown()
{
return ListToDropDown(null);
}
public SelectList ListaToDropDown(int? idNatureKind)
{
var list = db.NatureKinds
.Select(u => new
{
Text = u.NatureName,
Value = u.ID
}).ToList();
SelectList ret = new SelectList(list.OrderBy(x => x.Text), "Value", "Text", idNatureKind);
return ret;
}
And the structure was:
To be clear. ALL THIS WORKS PERFECTLY.
But, my project was getting very big. A mix of over 50 controllers and more than 250 views. So I decided to look for some way to organize and I found a post about Areas.
I created 5 areas and moved models, controllers and views for each of them.
And now the structure is:
I put in the main View the references of the area where the modal is:
<div class="form-group">
#Html.LabelFor(model => model.NatureKindID, "Kind of nature", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<div id="divDropNatureKinds">
#Html.Action("ReloadDropDownListNatureKinds", "Modals", new { area = "Admin" })
</div>
#Ajax.ActionLink(" ", "CreateModalNatureKinds", "Modals", new { area = "Admin" }, new AjaxOptions { UpdateTargetId = "modaldropbody", OnComplete = "openModal" }, new { #class = "glyphicon glyphicon-plus" })
#Html.ValidationMessageFor(model => model.NatureKindID, "", new { #class = "text-danger" })
</div>
</div>
With this new structure, most features are working well. When I click ActionLink, the modal opens. In the modal, when registering a new type of nature, it is registered in the database.
When I click the modal close button, the ActionResult ReloadDropDownListNatureKinds is executed and the new list is loaded with the new Nature type that was created.
All of this has been tested.
But the list in the main View is not updated, it does not receive the new list.
It is as if the ViewBag.NatureKindID that receives the new list is not the same as that used in the Main View, it continues with the old list.
Any suggestion? Thanks in advance for any help.
I am a beginner to the mvc concept, I am trying to implement a datepicker in my mvc project, which steps are still missing ?
<div class="form-group">
#Html.LabelFor(model => model.Date, new { #class = "control-label col-md-2" })
<div class="col-md-10 date-picker">
#Html.EditorFor(model => model.Date, "", new { #class = "date-picker" })
#Html.ValidationMessageFor(model => model.Date)
</div>
</div>
I have used Nuget to install gridmvc datepicker. I have also put in the _layout.cshtml :
<script type="text/javascript">
$(function () {
// This will make every element with the class "date-picker" into a DatePicker element
$('.date-picker').datepicker();
})
</script>
until now - I get only textbox and not calender
Hi I am new to MVC and I have an input box where a user must enter a date. For some reason my date time picker is not displaying and I have to manually type in the date. I have declared all script files in my layout page. Am I missing something?
This is my display
This is my code for my view
<div class="form-group">
#Html.LabelFor(model => model.order_preffered_date, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.order_preffered_date, new { htmlAttributes = new { #class = "form-control datepicker" } })
#Html.ValidationMessageFor(model => model.order_preffered_date, "", new { #class = "text-danger" })
</div>
</div>
I'm assuming you have an editor template set up for whatever type model.order_preffered_date is (DateTime probably) - Views/Shared/EditorTemplates/DateTime.cshtml - that contains your datepicker markup?
(BTW it's 'preferred', not 'preffered' - sorry to be pedantic but Thrupps will thank you :) )
Follow-up: If you don't want to use a specific editor template of your own, then ensure it's removed (so the default is used) and then the following checklist should sort you out:
Bootstrap datepicker CSS & JS file declared on the page (you've already mentioned you've done this - I assume jQuery is already present)
The datepicker element is initialised in the document.ready function somewhere, e.g.
$(function() {
...
$('.datepicker').datepicker();
...
});
If this is still not helping, then ensure your model property is decorated appropriately with DataType:
[DataType(DataType.Date)]
public DateTime order_preffered_date {get;set;}
Not sure if this is a MVC or Razor problem. But I can't put a line break in my view. This is the code on the index.cshtml
#using (Html.BeginForm("Create", "Vacant", FormMethod.Post, new { role = "form" }))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary("", new { #class = "text-danger" })
<!--TITLE-->
<div class="form-group">
#Html.LabelFor(m => m.Title, new { #class = "col-md-3 control-label" })
<div class="col-md-12">
#Html.TextBoxFor(m => m.Title, new { #class = "form-control" })
</div>
</div>
<!--DESCRIPTION-->
<div class="form-group">
#Html.LabelFor(m => m.Description, new { #class = "col-md-3 control-label" })
<div class="col-md-10">
#Html.TextAreaFor(m => m.Description, new { #class = "form-control" })
</div>
</div>
<br /> ----> HERE
<!--TABS-->
<div class="form-group">
<div class="col-md-10">
As you can see I put the line break tag before to displayed the third field (Project) in my View.
The View is displayed without any error. However, the line break is not rendered between the 2nd and 3rd fields. Causing those two fields one after another with any space on them.
This is the screenshot
How could I put a line break between those two fields? Is there any #Html helper or Razor code to do that?
Thanks!
Try this
<div style="clear:both;margin-bottom:20px">
<!--TABS-->
<div class="form-group">
You can insert one more Div Between them.
OR
You can decorate the TAB Div with some STYLE like-
<div class="form-group" style="margin-top:20px">
OR
You can insert one more <P /> Between them.