使用 AngularJS 解决 .NET Core 中索引页面或表单提交的数据显示问题

Question

我的 .NET Core 和 AngularJS 应用程序遇到问题，通过数据库进行的表单提交和数据显示在索引页面上无法正常运行。有趣的是，相同的代码在其他页面上运行得很好。是什么原因导致此问题？如何专门针对索引页解决该问题？ 索引页代码是：

                    <!-- 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>

Angular js 的控制器代码是： var app = angular.module('myApp', []); 调试器 // 定义 AngularJS 控制器 app.controller('ConsultationController', ['$scope', '$http', function ($scope, $http) { 调试器 // 初始化表单数据 $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'));
        });
    }
};

}]）；

我只想在索引页面上提交此表单，仅在索引页面导航后在其他所有不同视图上工作的代码唯一的问题是不在索引页面首次加载页面上提交。

Answer 1

为了确保索引页上正确显示，您必须使用与索引页视图相同的控制器名称。例如，如果您有 HomeController，则视图应位于 /home/Index.cshtml。此外，当使用 AngularJS 功能运行 JavaScript 文件时，控制器名称必须一致为 HomeController。