使用AngularJS更新部分视图中的webgrid

时间:2017-05-11 14:58:29

标签: javascript jquery angularjs asp.net-mvc-5

你好我是AngularJS的新手

我在局部视图中有一个MVC Webgrid。哪个更新了用户更新点击。这是webgrid

    @model BRM.Models.Projects

<div id="LogGrid">
    @{
        WebGrid DataLogGrid = new WebGrid(Model.logs, rowsPerPage: 10, ajaxUpdateContainerId: "LogGrid");
    }
    @DataLogGrid.GetHtml()
</div>

其对应的MVC模型

namespace BRM.Models
{
    public class Projects
    {
        public LogData log { get; set; }
        public List<LogData> logs { get; set; }
        public string Status { get; set; }
    }
}

我想在更新按钮上单击webgrid,而不是加载整个页面。我已经看过有关AJAX调用的文章,但我已经编写了一个角度控制器,想知道有什么方法可以在局部视图中渲染webgrid吗?

这是我的角度函数

 $scope.SaveDetails = function () {
                var UserID = '@Session["ID"]';
                var ID = { "Application_ID": $scope.Application.ID, "Release_ID": $scope.Release.ID, "Change_ID": $scope.Change.ID, "Environment_ID": $scope.Environment.ID, "Server_ID": $scope.Server.ID, "User_ID": UserID };


                if ($scope.Application || $scope.Release || $scope.Change || $scope.Environment || $scope.Server)
                    $http({
                        method: 'POST',
                        url: '/Dashboard/SaveDetails/',
                        data: { Application_ID: $scope.Application.ID, Release_ID: $scope.Release.ID, Change_ID: $scope.Change.ID, Environment_ID: $scope.Environment.ID, Server_ID: $scope.Server.ID, User_ID: UserID 
//Saves the data in the server},
                    }).then(function () {
                        //How to render the webgrid here again 
                    });
            }

它只需要刷新网格视图,因为Action结果已经具有将模型保存在webgrid中的功能。这是行动结果

[HttpPost]
public void SaveDetails(SelectedID x)
{
    application.SaveLogs(x.Application_ID, x.Release_ID, x.Change_ID, x.Environment_ID, x.Server_ID, x.User_ID);
}

public ActionResult RefreshGrid(Projects model)
{
    model.logs = Table.GetLogData(10, 10);
    return PartialView("_Grid",model);
}

我在下面的第一次加载时正在渲染webgrid。这个下面的脚本工作得很好。

<script type="text/javascript">
    $(document).ready(function () {
        $.get("@Url.Action("RefreshGrid", "Dashboard")", function (data) {
            $('#divProduct').replaceWith(data);
        });
    });
</script>

我尝试在文档准备中使用相同的get方法,在angular函数中但我不得不重新加载页面以反映webgrid中的更改。

1 个答案:

答案 0 :(得分:2)

主要问题是Jquery overide函数覆盖了div标签的id。