Updating webgrid in partialview with AngularJS

Question

Hello I am new to AngularJS

I have a MVC Webgrid in partial view. Which gets updated on user update click. Here is the webgrid

    @model BRM.Models.Projects

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

Its corresponding MVC Model

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

I want to render just the webgrid on update button click and not load the entire page. I have seen article on AJAX calls but I have already written an angular controller and wanted to know is there any way I can render just the webgrid in partial view?

Here is my angular function

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

It Just needs to refresh the grid view as the Action result already has the function to save the model in the webgrid. Here is the action result

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

And I am rendering the webgrid in following was on page first load.This below script works perfectly fine.

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

I tried using the same get method in the document ready, In the angular function but I had to reload the page to reflect the changes in webgrid.

user8856356 · Accepted Answer · 2017-10-30 12:27:41Z

2

The main issue is with the Jquery overide function which is overridiing the id of the div tag.

answered Oct 30, 2017 at 12:27

user8856356

Sign up to request clarification or add additional context in comments.

Comments

Aarth Tandel · Accepted Answer · 2017-05-12 06:05:01Z

After almost giving up found the answer

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

The document ready function was overriding the div id to LogGrid. So in the get statement I had to pass the updated div ID. This was the line

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

Collectives™ on Stack Overflow

Updating webgrid in partialview with AngularJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related