web-dev-qa-db-fra.com

Mise à jour de la vue partielle mvc 4

Ey! Comment actualiser une vue partielle avec des données hors du modèle? Pour la première fois, lorsque la page se charge, elle fonctionne correctement, mais pas lorsque je l’appelle depuis l’Action . Nous avons créé ressemble à:

N'importe où dans ma vue:

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

Mes "UpdatePoints" PartialView:

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

Au contrôleur, j'ai:

public ActionResult UpdatePoints()
        {

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

Merci de votre aide!

METTRE &AGRAVE; JOUR

Merci à tous pour votre aide! Enfin, j'ai utilisé JQuery/AJAX comme vous l'avez suggéré, en passant le paramètre à l'aide de model.

Donc, dans JS:

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

En contrôleur:

var model = _newPoints;
return PartialView(model);

En vue

<div id="divPoints"></div>
@Html.Hidden("newpoints", Model)
c#asp.net-mvc-4partial-viewsviewbag
19
Mario Levrero

Donc, supposons que vous ayez votre vue avec PartialView, qui doit être mise à jour par un clic de bouton:

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

<input class="button" value="update" />

Il y a plusieurs façons de le faire. Par exemple, vous pouvez utiliser jQuery:

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

PostActionToUpdatePoints est votre Action avec [HttpPost] attribut, que vous utilisez pour mettre à jour des points

Si vous utilisez la logique dans votre action UpdatePoints () pour mettre à jour des points, vous avez peut-être oublié d'ajouter l'attribut [HttpPost]:

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

Vous pouvez aussi essayer ceci.

 $(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
    });

Il lance un appel initial pour charger le div, puis les appels suivants ont lieu toutes les 30 secondes.

Dans la section du contrôleur, vous pouvez mettre à jour l'objet et le transmettre à la vue partielle.

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

Merci à tous pour votre aide! Enfin, j'ai utilisé JQuery/AJAX comme vous l'avez suggéré, en passant le paramètre à l'aide de modèle. 

Donc, dans JS:

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

En contrôleur:

var model = _newPoints;
return PartialView(model);

En vue

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

Manette : 

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
    }

Dans votre page d'index, vous devriez avoir un lien d'actualisation: 

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

Ce script devrait également figurer dans votre page d'index: 

<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"
            }
        });
    });
});

0
Husam Ebish