I have the following functionality: A user registers a series of data in a form, after sending the form and saving it in the database, it is redirected to a second form, where it must load the rest of the information, it is possible that in this second form, contains a lot of values of the first form, but this is not always the case, that is why in this second form there is a button that allows "copy" the data of the first form, to reduce data entry.
As I did?
I created a main view, where the form is loaded as a partial view with the empty model fields, so that the user can enter the information if it is not the same as the first form Main View:
<div id="partialView">
@Html.Partial("_CreatePartialResponsable", Model)
</div>
In the form that contains the partial view, there is a dropdowlist that is filled through a web service. This dropdow is filled correctly when loading the blank form, the first time.
DropDownList in the partial view
<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>
With this script, the dropdowlist is loaded, I call it from the main view in the document.ready event (it's works perfectly)
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 > ');
}
}
});
};
If the user wants to "copy" the information of the previous form, press a button that executes the following function js to go to the server, search the data and return the same partial view, but with the corresponding fields loaded. Re render?
Script to "copy" 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);
};
What is the problem?
After the copy button is pressed and the partial view is reloaded with the "copied" data, the dropdownlist items are no longer there. I understand that they are lost, because of course, when doing a partial view reloaded, that dropdown comes empty, that I understood. What I do not understand is because, after reloading that partial view, there is no way I can fill the dropdowlist again. By test I made a change and in the click event of the ddl, I called the loadPartial function to see if it worked, but even though in the browser console, it is seen that the function is executed and the data object takes 94 values, these they are not loaded to the dll.
Can you help me with this problem?
llenaDropDownSeguros()when you 'copy' the data? And why are you doing this instead of strongly binding your<select>to the model?donehandler again after thehtmlmethod call. See this