I have this main view:
@model JedyHealthWeb.Models.ResponsableCaso
@ { ViewBag.Title="Responsible for the account."; Layout="~ / Views / Shared / _LayoutSinControles.cshtml"; }
Information of the person in charge of the account. @ Html.Partial ("_ CreatePartialResponsable", Model)@section Scripts { @ Scripts.Render ("~ / bundles / jqueryval")
<script>
$(function () {
$("#copiar").click(function () {
var url = "@Url.Action("ResponsableIgualPaciente", "ResponsableCaso")";
var valor = @ViewBag.CedulaPaciente;
loadPartial(url, valor);
})
})
</script>
<script>
$(document).ready(function () {
var url = "@Url.Action("getSeguros", "ResponsableCaso")";
var valor = "";
llenaDropDownSeguros(url, valor)
})
</script>
}
When you press a button, it updates _CreatePartialResponsable with data, since in the initial load this partial view is empty:
<div class="form-row">
<div class="form-group col-md-3">
@Html.LabelFor(model => model.Parentesco, htmlAttributes: new { @class = "titulocampo" })
@Html.EditorFor(model => model.Parentesco, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Parentesco, "", new { @class = "text-danger" })
</div>
<div class="form-group col-md-9">
@Html.LabelFor(model => model.DireccionHabitacion, new { @class = "titulocampo" })
@Html.EditorFor(model => model.DireccionHabitacion, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.DireccionHabitacion, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-row">
<div class="form-group col-md-3">
@Html.LabelFor(model => model.Empresa, htmlAttributes: new { @class = "titulocampo" })
@Html.EditorFor(model => model.Empresa, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Empresa, "", new { @class = "text-danger" })
</div>
<div class="form-group col-md-9">
@Html.LabelFor(model => model.DireccionTrabajo, new { @class = "titulocampo" })
@Html.EditorFor(model => model.DireccionTrabajo, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.DireccionTrabajo, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-row">
<div class="form-group col-md-2">
@Html.LabelFor(model => model.TelefonoTrabajo, new { @class = "titulocampo" })
@Html.EditorFor(model => model.TelefonoTrabajo, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.TelefonoTrabajo, "", new { @class = "text-danger" })
</div>
<div class="form-group col-md-2">
@Html.LabelFor(model => model.TelefonoHabitacion, new { @class = "titulocampo" })
@Html.EditorFor(model => model.TelefonoHabitacion, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.TelefonoHabitacion, "", new { @class = "text-danger" })
</div>
<div class="form-group col-md-2">
@Html.LabelFor(model => model.TelefonoCelular, new { @class = "titulocampo" })
@Html.EditorFor(model => model.TelefonoCelular, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.TelefonoCelular, "", new { @class = "text-danger" })
</div>
<div class="form-group col-md-6">
@Html.LabelFor(model => model.SeguroNombre, htmlAttributes: new { @class = "titulocampo" })
<select id="SeguroNombre", name="SeguroNombre" class="form-control"><option value=""></option></select>
@Html.ValidationMessageFor(model => model.SeguroNombre, "", new { @class = "text-danger" })
</div>
</div>
<hr />
<div class="form-row">
<div class="btn-group" role="group" aria-label="Control">
@Html.ActionLink("Regresar", "Index", "Pacientes", null, new { @class = "btn btn-success" })
<input type="button" id="copiar" value="Copiar de paciente" class="btn btn-success" />
<input type="submit" value="Continuar" class="btn btn-success" />
</div>
}
After that update is done, the items loaded in the dropdownitem are lost through the document.ready
this is the script that fills the dropdowitem
function llenaDropDownSeguros(url, valor) {
var data = { nombre: valor };
$.post(url, data).done(function (data) {
if (data.isError) {
muestraError(data.Titulo, data.Mensaje);
} else {
for (var i = 0; i < data.length; i++) {
$('#SeguroNombre').append('<option value=' + data[i].codigoSeguro + '>' + data[i].descripcion + '</option > ');
}
}
});
};
And this is the script I use to update the view with the data
function loadPartial(url, valor) {
$("#esperar").show();
var data = { cedula: valor };
$.post(url, data).done(function (data) {
if (!data.isError) {
$("#esperar").hide();
$("#partialView").html(data);
} else {
$("#esperar").hide();
muestraError(data.Titulo, data.Mensaje);
}
}).fail(manejarErrorAjax);
};
I have little experience with this javascript and partial views, I think my problem is concept error, but I can not identify, what I'm doing wrong.