Troubleshooting Data Display Issues on Index Page or form submission in .NET Core with AngularJS

Question

I am encountering an issue with my .NET Core and AngularJS application where form submission and data display through the database are not functioning correctly on the Index page. Interestingly, the same code works perfectly on other pages. What could be causing this problem, and how can it be resolved specifically for the Index page? Index Page code is:

                    <!-- Request Form Text -->      
        <div class="col-md-12">
            <h5 class="h5-lg" style= "color: black">Request Free Consultation</h5>  
        </div> 

        <!-- Request Form Input -->
        <div id="input-name" class="col-md-12">
                <input type="text" name="name" class="form-control name" placeholder="Enter Your Name*" ng-model="formData.name" required>
            </div>
             
        <!-- Request Form Input -->       
        <div id="input-email" class="col-md-12">
                <input type="text" name="email" class="form-control email" placeholder="Enter Your Email*" ng-model="formData.email" required>
        </div>

                    <!-- Request Form Input -->
        <div id="input-phone" class="col-md-12">
                <input type="tel" name="phone" class="form-control phone" placeholder="Enter Your Phone Number*" ng-model="formData.phone" required>
        </div>  

        <!-- Request Form Select -->
        <div id="input-visa" class="col-md-12 input-visa">
                <select id="inlineFormCustomSelect1" name="visa" class="custom-select visa" ng-model="formData.visa" required>
                <option value="">Select Visa</option>  
                <option>Student Visa</option>
                <option>Travel visa</option>
                <option>Working Visa</option>
                <option>Business Visa</option>
                <option>Visitor Visa</option>
                <option>PR Visa</option>
            </select>
        </div>

        <!-- Request Form Select -->
        <div id="input-country" class="col-md-12 input-country">
                <select id="inlineFormCustomSelect2" name="country" class="custom-select country" ng-model="formData.country" required>
                <option value="">Visa For</option>  
                            <option>Australia</option>
                            <option>Canada</option>
                            <option>Belgium</option>
                            <option>Denmark</option>
                            <option>Germany</option>
                            <option>New Zealand</option>
                            <option>United Kingdom</option>
                            <option>USA</option>
            </select>
        </div>
                                        
        <!-- Request Form Button -->
        <div class="col-md-12 form-btn">  
            <button type="submit" class="btn btn-primary tra-black-hover submit">Send Request</button> 
        </div>
                                                      
        <!-- Request Form Message -->
        <div class="col-md-12 request-form-msg text-center">
            <div class="sending-msg"><span class="loading"></span></div>
        </div>  
                                      
    </form>

and controller code for angular js is: var app = angular.module('myApp', []); debugger // Define the AngularJS controller app.controller('ConsultationController', ['$scope', '$http', function ($scope, $http) { debugger // Initialize form data $scope.formData = {};

// Function to submit the form
$scope.submitForm = function (isValid) {
    debugger
    if (isValid) {
        var data = {
            id: 0,
            name: $scope.formData.name,
            email: $scope.formData.email,
            phone: $scope.formData.phone,
            visa: $scope.formData.visa,
            country: $scope.formData.country
        };

        console.log("Data:", data);

        // Example of an HTTP POST request
        $http({
            url: `https://localhost:1653/api/Home/ContactUs`,
            method: "POST",
            data: data,
            headers: {
                'Content-Type': 'application/json; charset=utf-8'
            },
            transformRequest: function (data) {
                return JSON.stringify(data);
            }
        }).then(function (response) {
            swal({
                title: "Success",
                text: response.data.Message,
                icon: "success",
                allowOutsideClick: false,
                allowEscapeKey: false,
                allowEnterKey: false,
                showConfirmButton: false,
                buttons: false,
                timer: 3000
            });

            // Clear form data and reset form state
            $scope.formData = {};
            $scope.requestForm.$setPristine();
            $scope.requestForm.$setUntouched();
        }, function (error) {
            // Handle error
            alert('An error occurred: ' + (error.data ? error.data.message : 'Unknown error'));
        });
    }
};

}]);

I just want to submit this form on index page only code working on other all different view after navigation of Index page the only problem is that not submit on Index Page First Time loading page.

Answer 1

To ensure proper display on the Index Page, you must use the same controller name as the one used for the Index Page view. For example, if you have a HomeController, the view should be located at /home/Index.cshtml. Additionally, when running JavaScript files with AngularJS functionality, the controller name must consistently be HomeController.