Creating a Webgrid in MVC and integrating it with a custom class in AngularJS

Hey there, I'm a beginner when it comes to AngularJS and I'm looking to bind the webgrid within the method of AngularJS.

$scope.SaveDetails = function () {
                debugger;
                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 },
                    }).then(function (resposne) {
                        debugger;
                        $scope.grid = resposne.data;
                        alert("Saved Successfully");
                    });
            }

I'm looking for a way to bind the webgrid before displaying the alert message. The data from the server is returned in a custom class format.

[HttpPost]
        public List<LogData> SaveDetails(SelectedID x)
        {
            application.SaveLogs(x.Application_ID, x.Release_ID, x.Change_ID, x.Environment_ID, x.Server_ID, x.User_ID);
            BLLogTable logs = new BLLogTable();
            List<LogData> data = new List<LogData>();
            data = logs.GetData(10, 10);
            return data;
        }

This section showcases my Business Layer.

public class BLLogTable
{
    BRMContext db = new BRMContext();

    public List<LogData> GetData(int rowCount, int rowFrom)
    {
        var param1 = new SqlParameter();
        param1.ParameterName = "@Value1";
        param1.SqlDbType = SqlDbType.Int;
        param1.SqlValue = rowCount;

        var param2 = new SqlParameter();
        param2.ParameterName = "@Value2";
        param2.SqlDbType = SqlDbType.Int;
        param2.SqlValue = rowFrom;

        var query = db.LogDataContext.SqlQuery("BRM.spLogs @value1,@value2", param1, param2).ToList();
        List<LogData> x = new List<LogData>();

        foreach (var log in query)
            x.Add(log);

        return x;
    }

}

I've come across several solutions involving AJAX calls, but I wasn't confident they would work. Instead, I followed this answer on how to bind a new model to a webgrid using jQuery AJAX

I've managed to retrieve the data in my AngularJS function The data is stored in a custom class object named LogsData. How can I go about binding this data in an MVC webgrid?

A little assistance would be greatly appreciated! Thank you in advance.

Answer №1

To resolve my issue, I utilized a Partial view to display the webgrid content. The Partial view was then called during the document load process.

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

Additionally, I implemented an Angular button click event to trigger the rendering of the partial view again.

Answer №2

In order for the grid to be displayed properly, it is essential that the rendering happens prior to the button being clicked. Failing to follow this sequence will result in the grid not appearing as expected.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The data returned by AJAX is not in the correct order in the database

function retrieveData() { <?php $stmt = $conn->prepare("SELECT id, name FROM data"); $stmt->execute(); $stmt->bind_result($id ,$name); while ($stmt->fetch()) {?> processData (<?php echo "'$id'";?>,<?php echo "&apo ...

Retrieve data from a variable that is located within a function that is also

<script> const tally ={ total: 0, increase: function(){ total++; console.log(total); } } const selectBtn = document.getElementsByTagName('button& ...

After my jQuery functions are executed, my CSS rules are loaded

Struggling with the communication between CSS and jQuery, I find myself torn. In CSS, my rules are often very specific, like this: div#container > div#contentLeft { //Code here } However, when I add jQuery to spice up my site, the CSS rules seem to ...

Determine the Button's State by Monitoring Changes in the TextBox Text

I have been tasked with developing a web application for my company. The main components of the application are a button and a textbox. My goal is to allow users to input a value into the textbox, which will then be processed when they click on the button ...

What is the best way to include bootstrap using webpack?

I am currently building a webapp using Typescript and webpack. I have been able to successfully import some modules by including them in my webpack.config.js file as shown below. However, no matter how many times I attempt it, I cannot seem to import the b ...

Approach for checking duplicates or empty input fields through PHP, AJAX, and JavaScript

Looking for a solution to validate and check for duplicate values when listing, creating, or deleting products using a REST API. I tried using rowCount in the php file to check for duplicates but I feel there might be a better approach that I am missing. N ...

I'm wondering why my positive numbers aren't displayed in green and negative numbers in red

I am currently working on a commodities quotes widget. I have already set up the 'Current' and '24-hour' divs, but I'm facing an issue where positive values are not displaying in green and negatives in red as intended. I have check ...

Finding if a WebElement is not present using C# and Appium and displaying the correct error message

Having a code that verifies the presence of an AppiumWebElement on the page by its ID (checking against a list of expected elements to ensure none are missing), I encounter an issue when the element does not exist: OpenQA.Selenium.WebDriverException : The ...

Issue with dynamically passing select values to pop-up link in Firefox

My website has a select dropdown feature that triggers a confirmation pop up with the same selection when the user makes a choice. Upon clicking Submit, a new window opens with the corresponding link. Everything works smoothly in Safari, Chrome, and Opera ...

Reduce the amount of time it takes for a Google AdWords Script to generate a

According to Google Script best practices, it is recommended to store operations in an array and then call the methods once all the operations have been constructed. This helps minimize response time each time a service is called. For example, let's ...

How can the ID of a table row be retrieved if it is selected?

In my datatable, I have a list of Cars where each row contains a Car ID. A checkbox column has been added to the first cell in the table - when checked, the row is highlighted to show the user their selection. The goal is to retrieve the IDs of all selecte ...

Is it a shallow copy or something else when updating state in React JS?

I am currently dealing with a particular state within my application: const [work, setWork] = useState([ { company: "Company", position: "President", website: "example.com", startDate: "2013-01-01", endDate: "2014-01- ...

Tailoring information to fit selected preferences

Currently working on developing a fitness app with Vue, aiming to create personalized workout routines based on user preferences. Users can choose specific options and generate a workout plan by clicking a button. The collected data is stored as an object ...

Having trouble decoding invalid JSON received from the Twilio API

For the past 4 hours, I've been struggling to parse a basic JSON from Twilio. The process is as follows: A text message containing a magnet link is sent Twilio forwards the request to my serverless function in the cloud I attempt to parse the reques ...

How can you typically verify the type of an object variable in TypeScript?

How can I verify if the obj variable contains all the properties defined in the Person interface? interface Person { name: string; age: number; } const jsonObj = `{ name: "John Doe", age: 30, }`; const obj: Person = JSON.parse(jsonObj); ...

Adding conditional href based on a specific criteria to an <a> tag in AngularJs

I have been working on a menu list where some menus contain URLs and others do not. When a menu item includes a URL, the href attribute is displayed, otherwise just the span tag is shown. I tried checking it like this but ended up with href="#" when the me ...

I am looking to incorporate a new "ID" column into my mui data grid table in ReactJS that will incrementally count from 0 to the total number of rows

When displaying data from an API in a datagrid table component with multiple columns, it is necessary to include a column for the ID which should have values ranging from 0 to the number of rows. Currently, the Object_id is being displayed in this cell. T ...

"Utilizing Trackball controls, camera, and directional Light features in ThreeJS version r69

I am struggling to synchronize trackball controls and camera with the directional light. Here is my situation: I start by initializing an empty scene with a camera, lights, and controls. Then, I load a bufferGeometry obj, calculate its centroid, and adjus ...

How can we effectively implement alert notifications for validating image sizes and formats prior to uploading?

code playground : https://codesandbox.io/s/quizzical-lamport-ql5ep I'm encountering an issue with the code provided in the CodeSandbox link. https://i.sstatic.net/xg3aK.png I've attempted to resolve this issue using various methods, but unfortu ...

Enhance the readability of your Angular/Ionic applications with proper hyphenation

In my Ionic 3 app, I am using an ion-grid. Some words do not fit within the columns and are cut off, continuing on the next row without any hyphens added for proper grammar context. See image https://i.stack.imgur.com/3Q9FX.png. This layout appears quite ...