[ Foro de C# ]
quiero agregar un modal en una pagina asp.net
adjunto la estructura del codigo.
@using MedicalExamApp.Core
@using MedicalExamApp.Models
@using MedicalExamApp.ViewModels
@model MedicalExamApp.ViewModels.MedicalDateViewModel
@{
ViewBag.Title = "Agendar Cita";
}
@Html.MainTitle("Agendar Una Cita")
@using (Html.BeginForm("EditAndConfirm", "MedicalDate", FormMethod.Post))
{
<div class='wrapper wrapper-content animated fadeIn closed-inputs'>
@using (Html.SimpleContainer("Datos Personales", "", true))
{
@Html.HiddenFor(x => x.ForeignCustomer)
@Html.HiddenFor(x => x.MedicalExamId)
@Html.HiddenFor(x => x.StartExam)
<div class="container-personal-info">
@Html.HiddenFor(x => x.CustomerId)
<div class="row">
<div class="col-md-3">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Nombres</label>
<div class="col-sm-9">
@Html.TextBoxFor(x => x.Customer.Name, new { @class = "form-control only-foreing-edit", @readonly = "" })
<div class='text-danger'>@Html.ValidationMessageFor(x => x.CustomerId)</div>
<div class='text-danger'>@Html.ValidationMessageFor(x => x.Customer.Name)</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Apellidos</label>
<div class="col-sm-9">
@Html.TextBoxFor(x => x.Customer.LastName, new { @class = "form-control only-foreing-edit", @readonly = "" })
<div class='text-danger'>@Html.ValidationMessageFor(x => x.Customer.LastName)</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Tipo. Documento</label>
<div class="col-sm-9">
@Html.DropDownListFor(x => x.Customer.DocumentType, Html.GetSelectLists(MedicalDateViewModel.DocumentTypeList()), new { @class = "form-control only-foreing-edit", @readonly = "" })
<div class='text-danger'>@Html.ValidationMessageFor(x => x.Customer.DocumentType)</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Nro. Documento</label>
<div class="col-sm-9">
@Html.TextBoxFor(x => x.Customer.Identifier, new { @class = "form-control only-foreing-edit", @readonly = "" })
<div class='text-danger'>@Html.ValidationMessageFor(x => x.Customer.Identifier)</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Sexo</label>
<div class="col-sm-9">
@Html.DropDownListFor(x => x.Customer.Sex, Html.GetSelectLists(MedicalDateViewModel.SexList()), new { @class = "form-control only-foreing-edit", @readonly = "" })
<div class='text-danger'>@Html.ValidationMessageFor(x => x.Customer.Sex)</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Edad</label>
<div class="col-sm-9">
@Html.TextBoxFor(x => x.Customer.Age, new { @class = "form-control", @readonly = "" })
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Est Civil</label>
<div class="col-sm-9">
@Html.DropDownListFor(x => x.MaritalStatus, Html.GetSelectLists(MedicalDateViewModel.MaritalStatusList()), new { @class = "form-control" })
<div class='text-danger'>@Html.ValidationMessageFor(x => x.MaritalStatus)</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Grado Instrucción</label>
<div class="col-sm-9">
@Html.DropDownListFor(x => x.StudyLevel, Html.GetSelectLists(MedicalDateViewModel.StudyLevelsList()), new { @class = "form-control" })
<div class='text-danger'>@Html.ValidationMessageFor(x => x.StudyLevel)</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Pais Nac.</label>
<div class="col-sm-9">
@Html.TextBoxFor(x => x.Customer.BirthCountry, new { @class = "form-control", @readonly = "" })
<div class='text-danger'>@Html.ValidationMessageFor(x => x.Customer.BirthCountry)</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Departamento Nac.</label>
<div class="col-sm-9">
@Html.TextBoxFor(x => x.Customer.BirthDepartment, new { @class = "form-control", @readonly = "" })
<div class='text-danger'>@Html.ValidationMessageFor(x => x.Customer.BirthDepartment)</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Provincia Nac.</label>
<div class="col-sm-9">
@Html.TextBoxFor(x => x.Customer.BirthProvince, new { @class = "form-control", @readonly = "" })
<div class='text-danger'>@Html.ValidationMessageFor(x => x.Customer.BirthProvince)</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Distrito Nac.</label>
<div class="col-sm-9">
@Html.TextBoxFor(x => x.Customer.BirthDistrict, new { @class = "form-control", @readonly = "" })
<div class='text-danger'>@Html.ValidationMessageFor(x => x.Customer.BirthDistrict)</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Fecha Nac</label>
<div class="col-sm-9">
@Html.TextBoxFor(x => x.Customer.BirthdateString, new { @class = "form-control birth-readonly", @readonly = "" })
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Departamento Dom.</label>
<div class="col-sm-9">
@Html.TextBoxFor(x => x.Department, new { @class = "form-control" })
<div class='text-danger'>@Html.ValidationMessageFor(x => x.Department)</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Provincia Dom.</label>
<div class="col-sm-9">
@Html.TextBoxFor(x => x.Province, new { @class = "form-control" })
<div class='text-danger'>@Html.ValidationMessageFor(x => x.Province)</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Distrito Dom.</label>
<div class="col-sm-9">
@Html.TextBoxFor(x => x.District, new { @class = "form-control" })
<div class='text-danger'>@Html.ValidationMessageFor(x => x.District)</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Domicilio</label>
<div class="col-sm-9">
@Html.TextBoxFor(x => x.Address, new { @class = "form-control" })
<div class='text-danger'>@Html.ValidationMessageFor(x => x.Address)</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Profesión</label>
<div class="col-sm-9">
@Html.TextBoxFor(x => x.Customer.Profession, new { @class = "form-control" })
<div class='text-danger'>@Html.ValidationMessageFor(x => x.Customer.Profession)</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Celular</label>
<div class="col-sm-9">
@Html.TextBoxFor(x => x.Customer.MobilePhone, new { @class = "form-control" })
<div class='text-danger'>@Html.ValidationMessageFor(x => x.Customer.Phone)</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Teléfono</label>
<div class="col-sm-9">
@Html.TextBoxFor(x => x.Customer.Phone, new { @class = "form-control" })
<div class='text-danger'>@Html.ValidationMessageFor(x => x.Customer.Phone)</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Email</label>
<div class="col-sm-9">
@Html.TextBoxFor(x => x.Customer.Email, new { @class = "form-control", type = "email" })
<div class='text-danger'>@Html.ValidationMessageFor(x => x.Customer.Address)</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Departamento Labora</label>
<div class="col-sm-9">
@Html.TextBoxFor(x => x.Customer.WorkDepartment, new { @class = "form-control" })
<div class='text-danger'>@Html.ValidationMessageFor(x => x.Customer.WorkDepartment)</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Provincia Labora</label>
<div class="col-sm-9">
@Html.TextBoxFor(x => x.Customer.WorkProvince, new { @class = "form-control" })
<div class='text-danger'>@Html.ValidationMessageFor(x => x.Customer.WorkProvince)</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Distrito Labora</label>
<div class="col-sm-9">
@Html.TextBoxFor(x => x.Customer.WorkDistrict, new { @class = "form-control" })
<div class='text-danger'>@Html.ValidationMessageFor(x => x.Customer.WorkDistrict)</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Residencia lugar trabajo</label>
<div class="col-sm-9">
@Html.CheckBoxFor(x => x.Customer.WorkResident)
<div class='text-danger'>@Html.ValidationMessageFor(x => x.Customer.WorkResident)</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Tiempo de residencia en Lugar de Trabajo (años)</label>
<div class="col-sm-9">
@Html.TextBoxFor(x => x.Customer.TimeWorkResident, new { @class = "form-control" })
<div class='text-danger'>@Html.ValidationMessageFor(x => x.Customer.TimeWorkResident)</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Actividad Económica donde Labora</label>
<div class="col-sm-9">
@Html.TextBoxFor(x => x.Customer.ActividadEconomica, new { @class = "form-control" })
<div class='text-danger'>@Html.ValidationMessageFor(x => x.Customer.ActividadEconomica)</div>
</div>
</div>
</div>
</div>
</div>
//
}
@using (Html.SimpleContainer("Datos de la cita", multiple: true))
{
<div class="row">
<div class="col-md-3">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Exámen</label>
<div class="col-sm-9">
@Html.TextBoxFor(x => x.Examen, new { @class = "form-control", autocomplete = "off", @readonly = "readonly" })
<div class='text-danger'>@Html.ValidationMessageFor(x => x.Examen)</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Tipo de Exámen</label>
<div class="col-sm-9">
@Html.DropDownListFor(x => x.TipoExamen, Html.GetSelectLists(MedicalDateViewModel.ExamTipeList()), new { @class = "form-control" })
<div class='text-danger'>@Html.ValidationMessageFor(x => x.TipoExamen)</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Empresa Principal</label>
<div class="col-sm-9">
@Html.DropDownListFor(x => x.MainCompanyId, (List<SelectListItem>)ViewBag.MainCompanies, new { @class = "form-control" })
<div class='text-danger'>@Html.ValidationMessageFor(x => x.MainCompanyId)</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Contrata</label>
<div class="col-sm-9">
@Html.DropDownListFor(x => x.ContractorCompanyId, (List<SelectListItem>)ViewBag.ContractorCompanies, new { @class = "form-control" })
<div class='text-danger'>@Html.ValidationMessageFor(x => x.ContractorCompanyId)</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Fecha Planeada</label>
<div class="col-sm-9">
<div class="input-group">
@Html.TextBoxFor(x => x.StringDueDate, new { @class = "form-control", autocomplete = "off", @readonly = "" })
</div>
<div class='text-danger'>@Html.ValidationMessageFor(x => x.StringDueDate)</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Número de ticket</label>
<div class="col-sm-9">
@Html.TextBoxFor(x => x.TicketNumber, new { @class = "form-control", autocomplete = "off", @readonly = "" })
<div class='text-danger'>@Html.ValidationMessageFor(x => x.TicketNumber)</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Formato</label>
<div class="col-sm-9">
@Html.DropDownListFor(x => x.ExamFormat, (List<SelectListItem>)ViewBag.ExamFormats, new { @class = "form-control", autocomplete = "off" })
<div class='text-danger'>@Html.ValidationMessageFor(x => x.ExamFormat)</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Formato Evaluación Médica</label>
<div class="col-sm-9">
@Html.DropDownListFor(x => x.TipoFormatoExamen, Html.GetSelectLists(MedicalDateViewModel.TipoFormatoExamenList()), new { @class = "form-control" })
<div class='text-danger'>@Html.ValidationMessageFor(x => x.TipoFormatoExamen)</div>
</div>
</div>
</div>
<div class="col-md-3">
</div>
<div class="col-md-3">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Firma</label>
<div class="col-sm-9">
<div class="form-control">
<input type="hidden" name="FirmaBase64" id="FirmaBase64" />
<div class="text-center"><a href="#" id="btn-firma-modal">Firmar</a></div>
<img class="w-100" id="imagenFirma" src="@Url.Content(Model.WebRutaFirma())" onError="this.src = '@Url.Content("~/Content/img/sign-default-image.png")';" />
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Foto</label>
<div class="col-sm-9 text-center">
<div class="form-control">
<input type="hidden" name="FotoBase64" id="FotoBase64" />
<input class="photo-upload" style="display:none;" type="file" accept="image/*" />
<img class="photo-customer-img" style="width: 100px;" src="@Url.Content(Model.WebRutaFoto())" onError="this.src = '@Url.Content("~/Content/img/user.png")';" />
<i class="fa fa-camera photo-link-upload"></i>
</div>
</div>
</div>
</div>
</div>
<div class="mt-5">
<div class="ibox submit-form-buttons-ibox">
<div class="ibox-content">
<div class="form-group row">
<div class="col-sm-12 text-center">
<a class="btn btn-white" href="@Url.Action("Index")">Cancelar</a>
<input class="btn btn-primary" type="submit" value="Guardar">
<a class="btn btn-info text-white" id="iniciar-examen-button">Guardar e Iniciar Examen</a>
</div>
</div>
</div>
</div>
</div>
}
</div>
}
@Html.Partial("_busquedaModal")
@Html.Partial("_firmaModal")
@section scripts
{
<script>
var birthReadOnly = $(".birth-readonly");
var birthSelectDate = $(".birth-select-date");
$("#search-person").on("click",
function (e) {
e.preventDefault();
$(".only-foreing-edit").attr("readonly", "");
$(".container-personal-info input").val("");
$(".container-personal-info select").val("");
$('#busquedaPersonaModal').modal({
keyboard: false
});
birthReadOnly.show();
birthReadOnly.attr("name", "Customer.Birthdate");
birthSelectDate.hide();
birthSelectDate.find("input").attr("name", "fakebirthdate");
$("#ForeignCustomer").val(false);
});
$("#foreign-person").on("click",
function (e) {
e.preventDefault();
$(".container-personal-info input").val("");
$(".container-personal-info select").val("");
$(".only-foreing-edit").removeAttr("readonly");
birthReadOnly.hide();
birthReadOnly.attr("name", "fakebirthdate");
birthSelectDate.show();
birthSelectDate.find("input").attr("name", "Customer.Birthdate");
$("#ForeignCustomer").val(true);
$("#Customer_Name").focus();
});
$("#search-user-submit").on("click",
function (e) {
$.ajax({
method: "POST",
url: $(this).data("url"),
data: { id: $("#searched-identifier").val() },
beforeSend: function () {
$(".modal-footer button").hide();
},
})
.done(function (response) {
$("#CustomerId").val(response.CustomerId);
$("#Customer_Name").val(response.Name);
$("#Customer_LastName").val(response.LastName);
$("#Customer_Age").val(response.Age);
$("#Customer_Identifier").val(response.Identifier);
$("#Customer_DocumentType").val(response.DocumentType);
$("#Customer_BirthDistrict").val(response.BirthDistrict);
$("#Customer_BirthProvince").val(response.BirthProvince);
$("#Customer_BirthDepartment").val(response.BirthDepartment);
$("#Customer_Birthdate").val(response.BirthDateString);
$("#Customer_Sex").val(response.Sex);
$("#Customer_Profession").val(response.Profession);
$("#Customer_MobilePhone").val(response.MobilePhone);
$("#Customer_Phone").val(response.Phone);
$("#Customer_Email").val(response.Email);
$("#MaritalStatus").val(response.MaritalStatus);
$("#StudyLevel").val(response.StudyLevel);
$("#Address").val(response.Address);
$("#Department").val(response.Department);
$("#District").val(response.District);
$("#Province").val(response.Province);
$('#busquedaPersonaModal').modal("hide");
})
.fail(function () {
swal("Error", "hubo un error al ejecutar esta acción", "error");
})
.always(function () {
$('#searched-identifier').text("");
$(".modal-footer button").show();
});
});
</script>
<script>
$("#StartExam").val(false);
$('#iniciar-examen-button').on("click",
function (e) {
e.preventDefault();
var $form = $(this).closest("form");
swal({
title: "Guardar e Iniciar Examen",
text: `¿Confirma que desea iniciar el examen? esto guardará los cambios, estos valores no podrán modificarse`,
type: "warning",
showCancelButton: true,
confirmButtonColor: "#F8BB86",
confirmButtonText: "Continuar",
cancelButtonText: "Cancelar",
closeOnConfirm: false,
closeOnCancel: true
},
function () {
$("#StartExam").val(true);
$form.submit();
swal({
title: "Iniciando Examen",
text: ``,
type: "success"
});
});
});
</script>
@Scripts.Render("~/bundles/sigwebtablet")
<script type="text/javascript">
var tmr;
var resetIsSupported = false;
window.onload = function () {
if (IsSigWebInstalled()) {
resetIsSupported = GetResetSupported();
if (!resetIsSupported) {
var note = document.getElementById("sigWebVrsnNote");
note.innerHTML = "There is a newer version of SigWeb available here: ";
}
}
else {
//$("#ConfirmaciónDefirma").modal("show");
//alert("¡Existe una confirmación Pendiente con la firma!.");
}
}
function GetResetSupported() {
var minSigWebVersionResetSupport = "1.6.4.0";
if (isOlderSigWebVersionInstalled(minSigWebVersionResetSupport)) {
console.log("Old SigWeb version installed.");
return false;
}
return true;
}
function isOlderSigWebVersionInstalled(cmprVer) {
var sigWebVer = GetSigWebVersion();
if (sigWebVer != "") {
return isOlderVersion(cmprVer, sigWebVer);
} else {
return false;
}
}
function isOlderVersion(oldVer, newVer) {
const oldParts = oldVer.split('.')
const newParts = newVer.split('.')
for (var i = 0; i < newParts.length; i++) {
const a = parseInt(newParts[i]) || 0
const b = parseInt(oldParts[i]) || 0
if (a < b) return true
if (a > b) return false
}
return false;
}
function onSign() {
if (IsSigWebInstalled()) {
var ctx = document.getElementById('cnv').getContext('2d');
SetDisplayXSize(600);
SetDisplayYSize(100);
SetTabletState(0, tmr);
SetJustifyMode(0);
ClearTablet();
SetKeyString("0000000000000000");
SetEncryptionMode(0);
if (tmr == null) {
tmr = SetTabletState(2, ctx, 50);
}
//agregue aqui!
else {
SetTabletState(0, tmr);
tmr = null;
tmr = SetTabletState(2, ctx, 50);
}
} else {
alert("¡Existe una confirmación Pendiente con la firma!.");
}
}
//
function onClear() {
ClearTablet();
}
//
function onDone() {
if (NumberOfTabletPoints() == 0) {
alert("Please sign before continuing");
}
else {
SetTabletState(0, tmr); //deactivate connection
SetSigCompressionMode(1);
SetImageXSize(500);
SetImageYSize(100);
SetImagePenWidth(5);
GetSigImageB64(SigImageCallback); //PASS IN THE FUNCTION NAME SIGWEB WILL USE TO RETURN THE FINAL IMAGE
}
}
$("#btn-firma-modal").on("click", function (e) {
e.preventDefault();
$('#busquedaFirmaModal').modal({
keyboard: false
});
onSign();
});
$("#RegistrarFirmaBtn").on("click", function (e) {
onDone();
});
$("#SignBtn").on("click", onSign);
$("#ClearBtn").on("click", onClear);
$("#DoneBtn").on("click", onDone);
function SigImageCallback(str) {
var a = "data:image/png;base64," + str;
$("#imagenFirma").attr("src", a);
$('#busquedaFirmaModal').modal("hide");
$("#FirmaBase64").val(str);
}
function endDemo() {
ClearTablet();
SetTabletState(0, tmr);
}
function close() {
if (resetIsSupported) {
Reset();
} else {
endDemo();
}
}
//Perform the following actions on
// 1. Browser Closure
// 2. Tab Closure
// 3. Tab Refresh
window.onbeforeunload = function (evt) {
close();
clearInterval(tmr);
evt.preventDefault(); //For Firefox, needed for browser closure
};
var readURL = function (input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$(".photo-customer-img").attr('src', e.target.result);
var regex = /^data:.+\/.+;base64,/i;
var updated = e.target.result.replace(regex, "");
console.log(updated);
$("#FotoBase64").val(updated);
}
reader.readAsDataURL(input.files[0]);
}
}
$(".photo-upload").on('change', function () {
readURL(this);
});
$(".photo-link-upload").on('click', function () {
$(".photo-upload").click();
});
</script>
//
}