I have a partial view where I list certain data in the form of a table, I would like to have an edit button per row, but I don't want it to launch a new sale, but rather these fields can be edited in a modal, but honestly I don't know how to do this.
Part of my partial view where I have the edit button is this.
<tbody>
@foreach (var item in Model)
{
<td>
<button class="btn btn-primary edit-radicado" data-id="@item.NumeroRecepcion">
<span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
</button>
<a href="@Url.Action("Details", "Estadistica", new {recepcion = item.NumeroRecepcion})" class="btn btn-default">
<span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
</a>
</td>
<td>
@Html.DisplayFor(modelItem => item.FechaAudiria)
</td>
<td>
@Html.DisplayFor(modelItem => item.UsuarioRevision)
</td>
<td>
@Html.DisplayFor(modelItem => item.UnidadesSoportadas)
</td>
<td>
@Html.DisplayFor(modmodelItemel => item.Devoluciones)
</td>
}
Then I have a div where I should insert the content of the "Edit" partial view
<div class="modal hide fade in" id="edit-person">
<div id="edit-person-container"></div>
</div>
The js I have at the moment to call the "Edit" partial view is this.
$(".edit-radicado").click(function () {
var id = $(this).attr("data-id");
$.ajax({
url: '/Estadistica/Edit',
type: 'GET',
data: { recepcion: id },
success: function (data) {
alert(data);
//$(".edit-person-container").html(data);
$(".edit-person-container").load(data);
$(".edit-person").modal('show');
}
});
});
And the Edit partial view is this.
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
Now, what I don't understand is why it doesn't draw (show) the content that it brings in the ajax in the div. In advance thank you very much for the help
What you should do is call a fieldset that contains the edited form and that when saving, calls a javascript that collects the data through a json, sends it to the controller and performs the update, and that when returning a response (true), perform a page refresh, showing you the updated data.
This is an example I'm using and it works 100% for me:
button that calls the modal
"modal" div that displays the content of the fieldset
Fieldset to display in the modal
script
example images:
If you are lost with the Json method to save the data, let me know and I'll help you :D
There are two ways to load a modal dynamically:
Load the modal remotely
this implies, that your view must have the format of the modal
The following way is using ajax:
Have a container in which to load the modal
Detect the
click
one of the button (as you have it in your question)To start you must put the code where you call the modal inside the same view where you call the Partial as well as the Script where you call it.
The button inside the list in the Partial like this works for you
In the controller to call the Modal your GET method like this
Already the Post if you adjust it to your need.