Hi,
I have a view with a modal dialog window (bootstrap one) in it, which displays a partial view.
What I want is to export the content of the partial view to pdf.
The content of the partial view is dynamic, i mean, with JavaScript.
This is may view:
@model Credito.Models.ContratoCompletoViewModel
@{
ViewBag.Title = "ModificarContrato";
Layout = "~/Views/Shared/_Layout.cshtml";
var personaModel = ViewBag.Persona;
}
<h4>Contrato</h4>
<div id="container">
<div style="float:right">
<button class="btn" onclick="ConfirmacionTelefonica()" title="Reporte para confirmación telefónica"><i class="e-icons e-report"></i></button>
<button class="btn" onclick="ReportePlanPagos()" title="Reporte plan de pagos"><i class="e-icons e-planpago"></i></button>
</div>
<br />
<div class="col-lg-12 control-section">
<div class="e-sample-resize-container">
<div id="tabContrato">
<div class="e-tab-header">
<div>Titular </div>
<div>Condiciones </div>
<div>Beneficiarios </div>
</div>
<div class="e-content">
<div>
@Html.Partial("_Persona", Model.Persona)
</div>
<div>
@Html.Partial("_Contrato", Model.Contrato)
</div>
<div>
@Html.Partial("_BeneficiariosModif", Model.Beneficiarios)
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="ConfirmacionTelefonicaDialog" role="dialog" tabindex="-1"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Confirmación telefónica</h4> <button type="button" class="close" onclick="cerrarModalConfirmacionTelefonica()">×</button> </div> <div class="modal-body"> @Html.Partial("_ConfirmacionTelefonica") </div> </div> </div></div>@section Scripts {
<script type="text/javascript">
var beneficiariosGridDataSource = "";
var tabObj = new ej.navigations.Tab({
heightAdjustMode: "Auto"
});
tabObj.appendTo('#tabContrato');
$(document).ready(function () {
$(".deshabilitar").prop("readonly", true);
var ddlTipoId = document.getElementById("IdTiposIdentificacion").ej2_instances[0];
ddlTipoId.readonly = true;
var ddlPlanPago = document.getElementById("IdPlanPago").ej2_instances[0];
ddlPlanPago.readonly = true;
})
function ConfirmacionTelefonica() {
$("#ConfirmacionTelefonicaDialog").modal({ backdrop: "static", keyboard: false });
}
function ReportePlanPagos() {
alert("Plan de pagos");
}
function cerrarModalConfirmacionTelefonica() {
$("#ConfirmacionTelefonicaDialog").modal("hide");
}
</script>
<script src="~/Scripts/Views/IndexContratos.js"></script>
}
And this is the content of the parital view named "_ConfirmacionTelefonica", which is the one that I want to export to pdf:
<div class="row">
<div class="col-md-2">
<label>Código matrícula:</label>
</div>
<div class="col-md-2">
<label id="IdContratoRpt"></label>
</div>
<div class="col-md-2">
<label>Número contrato:</label>
</div>
<div class="col-md-2">
<label id="NumeroContratoRpt"></label>
</div>
<div class="col-md-2">
<label>Fecha contrato:</label>
</div>
<div class="col-md-2">
<label id="FechaContratoRpt"></label>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="grdBeneficiariosRpt"></div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
var idContrato = $("#IdContrato").val();
$("#IdContratoRpt").text($("#IdContrato").val());
$("#NumeroContratoRpt").text($("#NumeroContrato").val());
$("#FechaContratoRpt").text($("#FechaInicio").val());
$.ajax({
url: "/Contrato/Beneficiarios?idContrato=" + idContrato,
type: "GET",
cache: true,
success: function (result) {
var data = result.listaBeneficiarios;
var grid = new ej.grids.Grid({
dataSource: data,
columns: [
{ field: "IdBeneficiario", isPrimaryKey: true, isIdentity: true, visible: false },
{ field: "IdTiposIdentificacion", headerText: "Tipo id", foreignKeyField: "IdTiposIdentificacion", foreignKeyValue: "Nombre", dataSource: result.listaTiposId },
{ field: "NumeroId", headerText: "Numero id" },
{ field: "NombreCompleto", headerText: "Nombre" },
{ field: "TelefonoMovil", headerText: "Celular" },
{ field: "Email", headerText: "Email" },
{ field: "IdSede", headerText: "Sede", foreignKeyField: "IdSede", foreignKeyValue: "Nombre", dataSource: result.listaSedes },
{ field: "WelcomeDay", headerText: "Welcome day", format: "yyyy/MM/dd hh:mm a" }
],
locale: "es-CO",
dataBound: function () {
grid.autoFitColumns(['NumeroId', 'NombreCompleto', 'TelefonoMovil', 'Email', 'IdSede', 'WelcomeDay']);
}
});
grid.appendTo("#grdBeneficiariosRpt");
},
error: function (jqXHR, textStatus, error) {
alert(error);
}
});
})
</script>
Is it possible?
Thanks for your help, kind regards,
Juan J.
