c# - async - Actualizando PartialView mvc 4

mvc refresh partial view only

Question

Ey! ¿Cómo podría actualizar una vista parcial con datos fuera del modelo? La primera vez, cuando la página se carga, funciona correctamente, pero no cuando la llamo desde la Acción. La estructura que he creado se ve así:

En cualquier parte de mi vista:

 @{ Html.RenderAction("UpdatePoints");}

Mis "puntos de actualización" de PartialView:

<h3>Your points are @ViewBag.points </h3>

En el controlador tengo:

public ActionResult UpdatePoints()
{
ViewBag.points = _Repository.Points;
return PartialView("UpdatePoints");
}

¡Gracias por tu ayuda!

ACTUALIZAR

¡Gracias a todos por su ayuda! Finalmente, utilicé JQuery / AJAX como usted sugirió, pasando el parámetro utilizando el modelo.

Entonces, en JS:

$(''#divPoints'').load(''/Schedule/UpdatePoints'', UpdatePointsAction);
var points= $(''#newpoints'').val();
$element.find(''PointsDiv'').html("You have" + points+ " points");

En el controlador:

var model = _newPoints;
return PartialView(model);

En vista

<div id="divPoints"></div>
@Html.Hidden("newpoints", Model)

Answer 1

¡Gracias a todos por su ayuda! Finalmente, utilicé JQuery / AJAX como usted sugirió, pasando el parámetro utilizando el modelo.

Entonces, en JS:

$(''#divPoints'').load(''/Schedule/UpdatePoints'', UpdatePointsAction);
var points= $(''#newpoints'').val();
$element.find(''PointsDiv'').html("You have" + points+ " points");

En el controlador:

var model = _newPoints;
return PartialView(model);

En vista

<div id="divPoints"></div>
@Html.Hidden("newpoints", Model)

Answer 2

Entonces, digamos que tiene su Vista con PartialView, que debe actualizarse con un clic en el botón:

<div class="target">
@{ Html.RenderAction("UpdatePoints");}
</div>
<input class="button" value="update" />

Hay algunas maneras de hacerlo. Por ejemplo puedes usar jQuery:

<script type="text/javascript">
$(function(){
$(''.button'').on("click", function(){
$.post(''@Url.Action("PostActionToUpdatePoints", "Home")'').always(function(){
$(''.target'').load(''/Home/UpdatePoints'');
})
});
});
</script>

PostActionToUpdatePoints es su Action con el atributo [HttpPost] , que utiliza para actualizar puntos

Si usa la lógica en sus ActionPoints UpdatePoints () para actualizar puntos, tal vez olvidó agregarle el atributo [HttpPost]:

[HttpPost]
public ActionResult UpdatePoints()
{
ViewBag.points = _Repository.Points;
return PartialView("UpdatePoints");
}

Answer 3

También puedes probar esto.

 $(document).ready(function () {
var url = "@(Html.Raw(Url.Action("ActionName", "ControllerName")))";
$("#PartialViewDivId").load(url);
setInterval(function () {
var url = "@(Html.Raw(Url.Action("ActionName", "ControllerName")))";
$("#PartialViewDivId").load(url);
}, 30000); //Refreshes every 30 seconds
$.ajaxSetup({ cache: false }); //Turn off caching
});

Hace una llamada inicial para cargar el div, y luego las llamadas subsiguientes están en un intervalo de 30 segundos.

En la sección del controlador puede actualizar el objeto y pasar el objeto a la vista parcial.

public class ControllerName: Controller
{
public ActionResult ActionName()
{
.
. // code for update object
.
return PartialView("PartialViewName", updatedObject);
}
}

Answer 4

Controlador :

public ActionResult Refresh(string ID)
{
DetailsViewModel vm = new DetailsViewModel(); // Model
vm.productDetails = _product.GetproductDetails(ID);
/* "productDetails " is a property in "DetailsViewModel"
"GetProductDetails" is a method in "Product" class
"_product" is an interface of "Product" class */
return PartialView("_Details", vm); // Details is a partial view
}

En la página de índice anterior debes tener un enlace de actualización:

 <a href="#" id="refreshItem">Refresh</a>

Este script debería estar también en su página de índice:

<script type="text/javascript">
$(function () {
$(''a[id=refreshItem]:last'').click(function (e) {
e.preventDefault();
var url = MVC.Url.action(''Refresh'', ''MyController'', { itemId: ''@(Model.itemProp.itemId )'' }); // Refresh is an Action in controller, MyController is a controller name
$.ajax({
type: ''GET'',
url: url,
cache: false,
success: function (grid) {
$(''#tabItemDetails'').html(grid);
clientBehaviors.applyPlugins($("#tabProductDetails")); // "tabProductDetails" is an id of div in your "Details partial view"
}
});
});
});