I'm solving a little bug of an application but I have difficulty on a DateTimePicker. In a View of the application I added a DateTimePicker that needs to allow the user to select values in the past. Strangely the object disable the old dates. How can i solve it?
I tried to use DateTimePicker from other pages that actually works as the one i need to implement. But it doesn't work.
That's the code of the page where I'm trying to implement the DateTimePicker.
#{
ViewBag.Title = "CambioTarga";
ViewBag.provenienza = "CambioTarga";
TempData["FromCambioTarga"] = true;
}
<div class="form1">
#Html.Partial("~/Views/Condivise/_Anagrafica.cshtml", (RSM.BusTuristiciBO.SourceDataReference.AnagraficaCliente)ViewBag.anagrafica)
#Html.Partial("~/Views/Condivise/_DatiSocietari.cshtml", (RSM.BusTuristiciBO.SourceDataReference.Dati_Soggetti)ViewBag.dati)
#Html.Partial("~/Views/Condivise/_DettaglioPermesso.cshtml", Model)
#Html.Partial("~/Views/Condivise/_VisuraTargaRidotta.cshtml", (RSM.BusTuristiciBO.SourceDataReference.DatiVisura)ViewBag.datiVisura)
<h4 class="colorH4">Elenco Documenti Allegati Alla Richiesta </h4>
#Html.Partial("~/Views/RichiesteWeb/Dettagli/Trasversali/_ElencoDocumenti.cshtml", (IEnumerable<RSM.BusTuristiciBO.SourceDataReference.Documento>)ViewBag.allegati)
#if (Model.Stato == "PagamentoInValutazione")
{
<div class="row">
<div class="col-sm-4">
#Html.Label("", "Data iniziale", htmlAttributes: new { #class = "control-label" })
#Html.EditorFor(model => model.DataInserimento, new { htmlAttributes = new { #class = "form-control datetimepicker", #Value = Model.DataInserimento.ToShortDateString(), required = "required" }, #language = "it", type = "text" })<br />
#Html.ValidationMessageFor(model => model.DataInserimento, "", new { #class = "text-danger" })
</div>
</div>
}
#Html.Partial("~/Views/BTAbbonamenti/_Tariffa.cshtml", (RSM.BusTuristiciBO.SourceDataReference.Tariffa)ViewBag.Tariffa)
<br />
<!-- partial bottoni-->
#Html.Partial("~/Views/RichiesteWeb/Dettagli/Trasversali/_RichiesteButtons.cshtml", Model)
#*#if (Model.Stato != "PagamentoInValutazione")
{
<script>
$('#divPagaRata').hide();
</script>
}
else
{
<script>
$('#btnAccetta').hide();
</script>
}*#
#if (Model.Stato == "InAttesaDiPagamento")
{
<script>
$('#btnAccetta').hide();
</script>
}
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#pnlCambioTarga").hide();
$('#ddlTipoPagamento').val('7');
$("#txtImporto").prop('disabled', true);
$("#ddlTipoPagamento").prop('disabled', true);
$('#btn_VisuraIndietro').hide();
})
</script>```
Related
I am using a modal bootstrap but my data is not loading into the bootstrap even though I am passing it trough from the controller.
My Grid pulls in data from a list for Notes Object
#foreach (var notes in Model) {
<tr>
<td>#notes.LastModifedDate</td>
<td>#notes.LastModifiedBy</td>
<td>#notes.Notes </td>
<td>
<p>#notes.Id</p> <i class="glyphicon glyphicon-pencil"></i>Edit
|<p>#notes.Id</p> <i class="glyphicon glyphicon-trash"></i>Delete
</td>
</tr>
}
I am using the following to Return the data to the popup.
public ActionResult NotesEditPopupPartial(int id ) {
var record = _context.MISNotes.Where(w => w.Id == id).FirstOrDefault();
return PartialView("NotesEditPopupPartial", record);
}
And using the following call to load the data but the data is not in the model for me to edit the text fields are still blank.
<script>
var AddOrEditNotes = function (id) {
var url = "/MISOjbects/NotesEditPopupPartial?id=" + id;
$("#myModalBodyDiv1").load(url, function () {
$("#MyEditUpateModal").modal("show");
})
}
</script>
<script>
function EditModal(id) {
$("#editMode").val(id);
}
</script>
My Modal
<div class="modal fade" id="NotesEditPopupPartial">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
×
<h3 class="modal-title">Notes Entry</h3>
</div>
<div class="modal-body" id="myModalBodyDiv1">
<div>
<input type="text" name="linkId" id="linkId" />
#using (Html.BeginForm("SaveCaseNotes", "MISObjects", FormMethod.Post, new { #id = "myNotesEditForm", #name = "myNotesEditForm", enctype = "multipart/form-data" })) {
<form id="myForm" asp-action="">
<div asp-validation-summary="All" class="text-danger"></div>
#Html.LabelFor(model => model.Title)
#Html.TextBoxFor(model => model.Title, new { #class = "form-control", #placeholder = "Title" })
#Html.ValidationMessageFor(model => model.Title, string.Empty, new { #style = "color:red;" })
<div class="form-group">
#Html.LabelFor(model => model.Notes, new { #class = "col-lg-2 control-label" })
<div class="col-lg-9">
#Html.TextAreaFor(model => model.Notes, new { #class = "form-control", #row = 5 })
</div>
</div>
#Html.LabelFor(model => model.DateActioned)
#Html.EditorFor(model => model.DateActioned, new { htmlAttributes = new { #class = "form-control datetimepicker" } })
#Html.ValidationMessageFor(model => model.DateActioned)
#Html.DisplayNameFor(model => model.LastModifiedBy)
#Html.LabelFor(model => model.LastModifiedBy)
<input name="IsValid" type="hidden" value="#ViewData.ModelState.IsValid.ToString()" />
<div class="modal-footer">
<button type="submit" id="btnEditSave" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</form>
}
</div>
<div style="text-align:center;display:none" id="loaderDiv">
<img src="~/Content/InternetSlowdown_Day.gif" width="150" />
</div>
</div>
</div>
Wrap your modal with div:
<div id="modalWrapper">
<div class="modal fade" id="NotesEditPopupPartial">
...
</div>
</div>
and then load and show the modal:
$("#modalWrapper").load(url, function () {
$("#NotesEditPopupPartial").modal("show");
})
<script>
var AddOrEditNotes = function (id) {
var url = "/MISOjbects/NotesEditPopupPartial?id=" + id;
$("#myModalBodyDiv1").load(url, function () {
$("#MyEditUpateModal").modal("show");
})
}
</script>
<script>
function EditModal(id) {
$("#editMode").val(id);
}
</script>
According to your code, I didn't find where you call the AddorEditNotes function to call the NotesEditPopupPartial action and display the partial, and in the EditModel method, you also didn't call the action method to show the partial, so, the popup modal is blank.
In my opinion, I suggest you put the bootstrap Modal on the main page (with note grid), because the trigger button (Edit hyperlink) is on this page. Then, in the hyperlink click event, you could use JQuery Ajax to call the action method and load the partial view and put it on the Bootstrap Modal.
Sample code as below:
Code in the Main page:
#model IEnumerable<NetMvcSample.Models.Note>
#{
ViewBag.Title = "ShowNotes";
}
<h2>ShowNotes</h2>
<script>
function EditModal(id) {
event.preventDefault(); // prevent the hyperlink default event.
$.ajax({
type: "POST",
url: "/Home/NotesEditPopupPartial", //change the url to your owns.
data: '{id: '+ id + "}",
contentType: "application/json; charset=utf-8",
success: function (data) {
console.log(data)
//put the partial view in the modal content.
$('#myModalBodyDiv1').html(data);
},
failure: function (response) {
console.log(response.responseText);
},
error: function (response) {
console.log(response.responseText);
}
});
}
</script>
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.LastModifyDate)
</th>
<th>
#Html.DisplayNameFor(model => model.LastModifiedBy)
</th>
<th>
#Html.DisplayNameFor(model => model.Notes)
</th>
<th></th>
</tr>
#foreach (var notes in Model) {
<tr>
<td>
#notes.LastModifyDate
</td>
<td>
#notes.LastModifiedBy
</td>
<td>
#notes.Notes
</td>
<td>
<p>#notes.Id</p> <i class="glyphicon glyphicon-pencil"></i>Edit
|<p>#notes.Id</p> <i class="glyphicon glyphicon-trash"></i>Delete
</td>
</tr>
}
</table>
<div class="modal fade" id="NotesEditPopupPartial">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
×
<h3 class="modal-title">Notes Entry</h3>
</div>
<div class="modal-body" id="myModalBodyDiv1">
</div>
</div>
</div>
</div>
Code in the controller method:
[HttpPost]
public ActionResult NotesEditPopupPartial(int id)
{
var record = GetNotes().Where(c => c.Id == id).FirstOrDefault();
return PartialView("NotesEditPopupPartial", record);
}
public ActionResult SaveCaseNotes(Note note)
{
// do something
return View();
}
Code in the NotesEditPopupPartial view (NotesEditPopupPartial.cshtml):
#model NetMvcSample.Models.Note
#using (Html.BeginForm("SaveCaseNotes", "Home", FormMethod.Post))
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Note</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
#Html.HiddenFor(model => model.Id)
<div class="form-group">
#Html.LabelFor(model => model.LastModifyDate, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.LastModifyDate, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.LastModifyDate, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.LastModifiedBy, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.LastModifiedBy, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.LastModifiedBy, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Notes, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Notes, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Notes, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-default" />
</div>
</div>
</div>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
The output like this:
I have extended the default registration form in ASP.NET MVC with 2 jquery-ui datepickers.
<div class="form-group">
#Html.LabelFor(m => m.LicenseDateOfIssuance, "Date of Issue", new { #class = "col-md-3 control-label required-field" })
<div class="col-md-9">
#Html.EditorFor(m => m.LicenseDateOfIssuance, new { htmlAttributes = new { #class = "form-control DateTimePicker", placeholder = "Date of Issuance", #readonly = "true" } })
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.LicenseDateOfExpiry, "Date of Expiry", new { #class = "col-md-3 control-label required-field", placeholder = "eg 1 Jan 2015" })
<div class="col-md-9">
#Html.EditorFor(m => m.LicenseDateOfExpiry, new { htmlAttributes = new { #class = "form-control DateTimePicker", placeholder = "Date of Expiry", #readonly = "true" } })
</div>
</div>
I would like to compare the dates held by both datepickers and ensure that the expiry div's date is later than the issuance div.
Any suggestions would be very much appreciated.
Hi you can use foolproof mvc extensions: http://foolproof.codeplex.com
or you may also use MVC remote validation that is my personal favorite. Here is an example:
MVC 5 Remote Validation
I prefer to use MVC validation but if you want only client side then try this script. It does format date as day/month/year.
$(document).ready(function() {
var options = {
dateFormat: "dd/mm/yy"
};
$("#LicenseDateOfIssuance").datepicker(options);
$("#LicenseDateOfExpiry").datepicker(options);
$("#validate").click(function() {
var from = GetDate($("#LicenseDateOfIssuance").val());
var to = GetDate($("#LicenseDateOfExpiry").val());
if (from > to) {
alert("Invalid Date Range");
} else {
alert('ok');
};
});
});
function GetDate(date) {
var parts = date.split('/');
return new Date(parts[2], parts[1], parts[0]);
};
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>License of issuance: <input type="text" id="LicenseDateOfIssuance"></p>
<p>License of expiry: <input type="text" id="LicenseDateOfExpiry"></p>
<button id="validate">Validate range</button>
I am a beginner and learning ASP.Net MVC web development. I am stuck at one place.
I have a reset password window. If user successfully resets the password I want him to redirect to the same page but I want a "Password Reset Successful" message to be on top. It can be an alert or something. Just user should know that password has been reset. But I don't know how to achieve this. Below is what I have till now.
[HttpPost]
[ValidateAntiForgeryToken]
public ViewResult WidgetResetPassword(ResetPasswordMV data)
{
bool isValid = false;
isValid = ModelState.IsValid;
// verify the 2 password match
if (isValid && !data.NewPassword.Equals(data.ConfirmNewPassword))
{
isValid = false;
ModelState.AddModelError("ConfirmNewPassword", "Passwords doesn't match.");
}
if (isValid)
{
//setting the correct tenant id
if (Session[Constants.SESSION_USER_KEY] != null)
{
UserMV authenticatedUsers = (UserMV)Session[Constants.SESSION_USER_KEY];
data.UserId = authenticatedUsers.Id;
}
ResetPasswordHelper.Save(data);
}
return View(data);
}
My .cshtml file:
#model ResetPasswordMV
#using SIM_Obj.ModelViews;
#{
ViewBag.Title = "Reset Password";
}
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
#* <div id="ResetPasswordWidget" class="form-horizontal">*#
<div id="ResetPasswordWidget" class="form-horizontal-width-inherit">
<h3>Reset Password</h3>
<hr/>
#Html.ValidationSummary(true, "", new {#class = "text-danger"})
#Html.HiddenFor(model => model.UserId)
<div class="form-group">
#Html.LabelFor(model => model.OldPassword, htmlAttributes: new {#class = "control-label col-md-2"})
<div class="col-md-10">
#Html.EditorFor(model => model.OldPassword, new {htmlAttributes = new {#class = "form-control"}})
#Html.ValidationMessageFor(model => model.OldPassword, "", new {#class = "text-danger"})
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.NewPassword, htmlAttributes: new {#class = "control-label col-md-2"})
<div class="col-md-10">
#Html.EditorFor(model => model.NewPassword, new {htmlAttributes = new {#class = "form-control"}})
#Html.ValidationMessageFor(model => model.NewPassword, "", new {#class = "text-danger"})
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.ConfirmNewPassword, htmlAttributes: new {#class = "control-label col-md-2"})
<div class="col-md-10">
#Html.EditorFor(model => model.ConfirmNewPassword, new {htmlAttributes = new {#class = "form-control"}})
#Html.ValidationMessageFor(model => model.ConfirmNewPassword, "", new {#class = "text-danger"})
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Reset Password" class="btn btn-default"/>
</div>
</div>
</div>
}
I want to be able to add something like:
<p class ="alert alert-success"> <strong>Success! </strong>Your Password has been successfully changed.</p>
Question 1: How to get this to be displayed when password is reset.
Question 2: Currently I am doing return view(data) in the controller. Is it necessary.
Question 3: Can I use something like partialview. I am beginner. Please guide me.
Add a property like ShowMessage to your model and set it if the reset was successful.
Change the view to
#if (model.ShowMessage)
{
<p class="alert alert-success"> <strong>Success! </strong>Your Password has been successfully changed.</p>
}
...
ViewBag.SaveResult=true;
return View(data);
.....
in view page
#if (ViewBag.SaveResult == true) {
<div class="alert alert-success" >
<strong>Success! </strong>Your Password has been successfully changed.</div>
}
I did this using ValidationMessage.
First in razor page add ValidationMessage for success and error:
#Html.ValidationMessage("ERROR", new { #class = "card-alert alert alert-danger v-message", #style = "display: none;" })
#Html.ValidationMessage("SUCCESS", new { #class = "card-alert alert alert-success v-message", #style = "display: none;" })
Then in controller you send error and success message using:
ModelState.AddModelError("SUCCESS", "Success message !");
ModelState.AddModelError("ERROR", "Error message !");
Add this code in JavaScript witch will display messages when needed:
$(".validation-message").each(function () {
if ($(this).text() !== "") {
$(this).css("display", "block");
}
});
I followed an online tutorial to dynamically add items to a bound list model using ajax, which works perfectly. (http://www.mattlunn.me.uk/blog/2014/08/how-to-dynamically-via-ajax-add-new-items-to-a-bound-list-model-in-asp-mvc-net/comment-page-2/#comment-68909)
My question is, how would I correctly remove items from the list?
Right now what I have done is add a delete link which when clicked removes the item from the view. However, when I submit the form I noticed that the modelState is no longer valid and it has null entries for the item that was removed from the view. So I guess the model is not being updated.
Test.cshtml
#model TesterManager.Models.Test
<div class="form-group">
#Html.LabelFor(model => model.Software, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<div class="form-group">
<div class="col-md-5">
#Html.DropDownListFor(m => m.Software, TesterManager.Models.Helper.GetTestSoftwares(), "Choose a USB Card", new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.Software, "", new { #class = "text-danger" })
</div>
<div class="col-md-5">
#Html.EditorFor(model => model.Version, new { htmlAttributes = new { #class = "form-control", #title = "Enter a USB FW Version", #placeholder = "Enter a USB FW Version" } })
#Html.ValidationMessageFor(model => model.Version, "", new { #class = "text-danger" })
</div>
<div class="col-md-2">
Delete
</div>
</div>
</div>
</div>
AdminTesterConfigurations.cshtml (snippet):
#model TesterManager.Models.AdminTesterConfigurations
<div class="form-group">
<div class="col-md-6">
....
</div>
</div>
<hr />
<div class="form-group">
<div class="col-md-12">
<h3>Test Software</h3>
<div id="test-list">
#Html.EditorForMany(x => x.Tests, x => x.Index)
</div>
<input type="button" id="add-test" value="Add" />
</div>
</div>
RequestEditViewModel.cshtml:
#model TesterManager.Models.RequestEditViewModel
<div class="form-horizontal">
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
#Html.EditorFor(model => model.ShippingLocation)
#Html.EditorFor(model => model.RequesterTesterConfigurations)
#Html.EditorFor(model => model.AdminTesterConfigurations)
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-default" />
</div>
</div>
</div>
Edit.cshtml:
#model TesterManager.Models.RequestEditViewModel
#Styles.Render("~/Content/Edit")
#{
ViewBag.Title = "Edit";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#section Scripts
{
<script>
jQuery(document).ready(function ($) {
$('#add-test').on('click', function () {
jQuery.get('/TesterManager/Request/AddTest').done(function (html) {
$('#test-list').append(html);
});
});
});
</script>
}
#using (Html.BeginForm())
{
<h2>Edit</h2>
#Html.AntiForgeryToken()
#Html.EditorFor(x => x);
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
RequestController.cs
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit(RequestEditViewModel request)
{
if (ModelState.IsValid)
{
Request domainRequest = new Request(request);
requests.Add(domainRequest);
return RedirectToAction("Index");
}
return View(request);
}
[OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]
public ActionResult AddTest()
{
var request = new RequestEditViewModel();
request.AdminTesterConfigurations.Tests.Add(new Test());
return View(request);
}
I realized that the problem was that when I would remove the item from the list in the view, I was not removing the hidden input for the collection indexer as well. I updated the code to remove the hidden input and it works fine now.
This is my first use of Knockout.js.
I don't understand why I have this problem.
Uncaught Error: Unable to parse bindings.
Message: ReferenceError: DataPrevista is not defined;
Bindings value: value:DataPrevista, namePath: true
I wish anyone help me.
This is my code:
View
<div>
#Html.LabelFor(model => model.Cliente)
</div>
<div>
#Html.DropDownListFor(model => model.Cliente.Codigo, new SelectList(Model.ClientesSelecionaveis, "Value", "Text", Model.Cliente), new { #class = "form-control" })
</div>
<div>
#Html.LabelFor(model => model.Funcionario)
</div>
<div>
#Html.DropDownListFor(model => model.Funcionario.Codigo, new SelectList(Model.FuncionariosSelecionaveis, "Value", "Text", Model.Cliente), new { #class = "form-control" })
</div>
<fieldset>
<div style="margin:30px 0;">
<input type="button" value="Adicionar Agendamento" data-bind="click: addAgendamento" class="btn btn-success" />
<input type="button" value="Remover Agendamento" data-bind="click: removeAgendamento" class="btn btn-danger" />
</div>
<h4 class="page-header">Agendamentos</h4>
#Html.EditorFor(model => model.Agendamentos)
</fieldset>
<p style="margin:30px 0;">
<input type="submit" value="Enviar" class="btn btn-info" />
#Html.ActionLink("Listar", "Index")
</p>
Editor Template
<div>
#Html.LabelFor(model => model.DataPrevista)
</div>
<div>
#Html.TextBoxFor(model => model.DataPrevista, new { #class = "form-control", data_bind = "value: dataPrevista, namePath: true" })
</div>
<div>
#Html.LabelFor(model => model.InicioPrevisto)
</div>
<div>
#Html.TextBoxFor(model => model.InicioPrevisto, new { #class = "form-control", data_bind = "value: inicioPrevisto, namePath: true" })
</div>
<div>
#Html.LabelFor(model => model.FimPrevisto)
</div>
<div>
#Html.TextBoxFor(model => model.FimPrevisto, new { #class = "form-control", data_bind = "value: fimPrevisto, namePath: true" })
</div>
<div>
#Html.LabelFor(model => model.TrasladoPrevisto)
</div>
<div>
# Html.TextBoxFor(model => model.TrasladoPrevisto, new { #class = "form-control", data_bind = "value: trasladoPrevisto, namePath: true" })
Javascript
<script type="text/javascript" language="javascript">
function createViewModel() {
var createAgendamento = function () {
return {
dataPrevista: ko.observable(),
inicioPrevisto: ko.observable(),
fimPrevisto: ko.observable(),
trasladoPrevisto: ko.observable()
};
};
var addAgendamento = function () {
agendamentos.push(createAgendamento());
};
var removeAgendamento = function () {
agendamentos.pop();
};
var cliente = ko.observable();
var funcionario = ko.observable();
var agendamentos = ko.observableArray([createAgendamento()]);
return {
cliente: cliente,
funcionario: funcionario,
agendamentos: agendamentos,
addAgendamento: addAgendamento,
removeAgendamento: removeAgendamento
};
}
$(document).ready(function () {
var viewModel = createViewModel();
ko.applyBindings(viewModel);
});
It appears your data syntax is incorrect. It should be data-bind not data_bind
See Knockout documentation: binding syntax
Also dataPrevista is a nested observable within your view model, so you would need to reference it like this.
data-bind="value: agendamentos.dataPrevista"