如何通过AngularJS $uibModal提交表单至ASP.NET Core MVC动作方法

方案一：AngularJS异步提交（推荐，无页面刷新） #

这种方式通过AngularJS的$http发送POST请求，避免页面刷新，体验更流畅。

1. 修改模态框控制器，添加提交逻辑

注入$http服务，新增提交方法，收集表单数据并发送到MVC动作：

app.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, product, $http) {
    var $ctrl = this;
    $scope.selectedUnitItem = null;
    $scope.productobj = product;
    
    // 初始化表单数据模型
    $scope.formData = {
        ProductID: product.EnID,
        UnitCode: '',
        Quantity: 0
    };

    $ctrl.cancel = function () {
        $uibModalInstance.dismiss('cancel');
    };

    // 提交表单到MVC动作
    $ctrl.submitForm = function () {
        $http.post('/Products/PostAddToCart', $scope.formData)
            .then(function (response) {
                // 提交成功：关闭弹窗、更新购物车等逻辑
                $uibModalInstance.close('success');
            }, function (error) {
                // 处理提交失败，比如提示用户
                console.error('提交失败:', error);
            });
    };

    $scope.onUnitChanged = function (code) {
        $scope.selectedUnitItem = $scope.productobj.Inventories.find(r => r.Code == code);
        $scope.formData.UnitCode = code;
    };
});

2. 修正模态框视图（AddToCart.cshtml）

移除原生表单的asp-action和method，用AngularJS的ng-model绑定表单数据，修改提交按钮触发控制器方法：

<form>
    <div class="modal-header btn-info"> 
        <label class="modal-title control-label col-md-11">Add To Cart</label>
        <label class="modal-title control-label col-md-1" ng-click="$ctrl.cancel()">X</label>    
    </div>
    <div class="modal-body" id="modal-body">
            <input type="hidden" ng-model="formData.ProductID" />
            <div class="form-group">
                <label class="control-label col-md-4">Product Name</label>
                <div class="col-md-8">                
                    <label class="control-label col-md-8">{{productobj.Name}}</label>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-md-4">Unit Type</label>
                <div class="col-md-8">
                    <select ng-change="onUnitChanged(formData.UnitCode)" 
                            ng-model="formData.UnitCode" 
                            class="form-control col-md-8">
                      <option ng-repeat="inv in productobj.Inventories track by inv.Code" 
                              value="{{inv.Code}}">
                          {{inv.UnitChart.UnitChartName}}  -  Price : {{inv.SellingPrice}}
                      </option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-md-4">Available Stock</label>
                <div class="col-md-8">
                    <label class="control-label col-md-8">{{selectedUnitItem?.Quantity}}&nbsp;</label>
                </div> 
            </div>
            <div class="form-group">
                <label class="control-label col-md-4">Order Qty</label>
                <div class="col-md-8">
                   <input ng-pattern="/^(0|[0-9][0-9]*)$/" 
                          type="number" 
                          ng-model="formData.Quantity" 
                          class="form-control col-md-8" />
                </div>
            </div>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" type="button" ng-click="$ctrl.submitForm()">Add To Cart</button>
        <button class="btn btn-primary" type="button" ng-click="$ctrl.cancel()">Cancel</button>
    </div>
</form>

3. 调整MVC动作方法

创建模型类接收参数，替换原有的零散参数，更规范且避免绑定问题：

// 新增模型类
public class AddToCartModel
{
    public string UnitCode { get; set; }
    public string ProductID { get; set; }
    public decimal Quantity { get; set; }
}

// 修改POST动作
[HttpPost] 
public async Task<IActionResult> PostAddToCart([FromBody] AddToCartModel model)
{
    // 执行添加到购物车的业务逻辑（如存入Session、数据库）
    // ...

    // 返回JSON结果给前端
    return Json(new { success = true });
}

方案二：原生表单提交（会刷新页面） #

如果不需要异步提交，保留原生表单提交逻辑，需修正以下两点：

1. 将ng-submit移至<form>标签上，而非按钮：

<form asp-action="PostAddToCart" method="post" ng-submit="$ctrl.ok()">
    <!-- 原有内容不变 -->
    <div class="modal-footer">
        <button class="btn btn-primary" type="submit">Add To Cart</button>
        <button class="btn btn-primary" type="button" ng-click="$ctrl.cancel()">Cancel</button>
    </div>
</form>

2. 确保AngularJS绑定的表单值正确渲染到DOM（当前{{productobj.EnID}}等绑定已生效），提交后页面会整体刷新。

关键注意事项 #

• 异步提交时，确保$http请求的URL与MVC路由完全匹配
• 使用[FromBody]接收参数时，AngularJS的$http.post默认发送JSON格式数据，无需额外配置
• 可为表单添加AngularJS验证逻辑（如数量不能为0），提升用户体验

内容的提问来源于stack exchange，提问作者JagathNalin