使用 AngularJS 在局部视图中更新 webgrid答案

【问题标题】：Updating webgrid in partialview with AngularJS使用 AngularJS 在局部视图中更新 webgrid
【发布时间】：2017-10-10 16:06:18
【问题描述】：

你好，我是 AngularJS 的新手

我有一个局部视图中的 MVC 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 中的更改。

【问题讨论】：

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

【解决方案1】：

主要问题在于覆盖 div 标签的 id 的 Jquery 覆盖函数。

【讨论】：

【解决方案2】：

几乎放弃后找到了答案

 $scope.SaveDetails = function () {
                var UserID = '@Session["ID"]';

                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 },
                    }).then(function () {
                        $.get("@Url.Action("RefreshGrid", "Dashboard")", function (data) {
                            $('#LogGrid').replaceWith(data);
                        });
                    });
            }

文档就绪函数将 div id 覆盖到 LogGrid。因此，在 get 语句中，我必须传递更新后的 div ID。这是行

 $.get("@Url.Action("RefreshGrid", "Dashboard")", function (data) {
                            $('#LogGrid').replaceWith(data);

【讨论】：