更新 PartialView mvc 4答案

【问题标题】：Updating PartialView mvc 4更新 PartialView mvc 4
【发布时间】：2013-08-17 18:20:28
【问题描述】：

喂！如何使用模型中的数据刷新局部视图？第一次，当页面加载时它工作正常，但当我从 Action 调用它时却没有。我创建的结构如下所示：

我视野中的任何地方：

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

我的 PartialView “更新点”：

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

在我拥有的控制器处：

public ActionResult UpdatePoints()
        {

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

感谢您的帮助！

更新

感谢大家的帮助！最后我按照你的建议使用了 JQuery/AJAX，使用模型传递参数。

所以，在 JS 中：

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

在控制器中：

var model = _newPoints;
return PartialView(model);

在视图中

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

【问题讨论】：

您是否希望为此使用 AJAX？
你的问题不清楚，什么时候有效，什么时候无效？向我们展示您用于两者的代码

标签： c# asp.net-mvc-4 partial-views viewbag

【解决方案1】：

所以，假设您的 View 带有 PartialView，必须通过单击按钮来更新：

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

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

有一些方法可以做到这一点。例如，您可以使用 jQuery：

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

PostActionToUpdatePoints 是您的 Action 和 [HttpPost] 属性，用于更新点

如果您在操作 UpdatePoints() 中使用逻辑来更新点，可能是您忘记为其添加 [HttpPost] 属性：

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

【讨论】：

伙计们，这个解决方案有效。虽然很少维修。如果您放置 HttpPost 注释，您将无法通过 jquery 加载功能执行 Get。删除注释。 “加载”函数是小写的。并且 post 方法是“$.post”而不是 od $post。修复这些小东西，它会像魅力一样发挥作用
这一行解决了我几个小时的故障 $('.target').load('/Home/UpdatePoints');非常感谢！

【解决方案2】：

感谢大家的帮助！最后我按照你的建议使用了 JQuery/AJAX，使用模型传递参数。

所以，在 JS 中：

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

在控制器中：

var model = _newPoints;
return PartialView(model);

在视图中

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

【讨论】：

【解决方案3】：

你也可以试试这个。

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

它会进行初始调用以加载 div，然后以 30 秒为间隔进行后续调用。

在控制器部分，您可以更新对象并将对象传递给局部视图。

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

【讨论】：

【解决方案4】：

控制器：

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
    }

在以前的索引页面中你应该有刷新链接：

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

该脚本也应该在您的索引页面中：

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

【讨论】：