个人中心
gpt4 book ai didi

javascript - 使用 Angular 将表单发布到 ASP.NET MVC ActionMethod

转载 作者：行者123 更新时间：2023-12-03 07:57:20 27 4
gpt4 key购买 nike

我正在尝试使用 angularjs 获取 ASP.NET MVC 表单自动发回服务器。当字段达到特定数量的字符并通过验证时，表单将自动发回我创建的 ActionResult 方法。

问题:是否可以使用 Angular 将表单发布到接收方法，并在验证后自动发送表单？我可以使用 MVC 助手来验证吗？

@model model.example

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal" ng-app="receiveApp" data-ng-submit="sendForm()" , data-ng-controller="breakDownController">
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })

        <div class="form-group">
            @Html.LabelFor(model => model.Id, new { @class = "control-label col-xs-12 col-sm-2" })
            <div class="col-sm-10">
                @Html.EditorFor(model => model.PId, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Id, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Uid, new { @class = "control-label col-xs-12 col-sm-2" })
            <div class="col-sm-10">
                @Html.EditorFor(model => model.Uid, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Uid, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.LId, new { @class = "control-label col-xs-12 col-sm-2" })
            <div class="col-sm-10">
                @Html.EditorFor(model => model.LId, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.LId, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <input type="submit" value=@Resources.Receive class="btn btn-default" />
                @Html.ActionLink(Resources.ClearButton, "Receive", null, new { @class = "btn btn-default" })
            </div>
        </div>
    </div>
}

Javascript

var App = angular.module('App', []);
    App.controller('testController', ['$scope', '$http', function ($scope, $http) {
        $scope.model = {};



        $scope.sendForm = function () {
            $http({
                method: 'POST',
                url: '@Url.Action("Receive")',
                data: $scope.model
            }).success(function(data,status,headers,config){

            }).error(function(data,status,headers,config){
            });
        };
    }]);

最佳答案

我认为这会有所帮助

angular.module('formExample', [])
  .controller('FormController', ['$scope',
    function($scope) {
      $scope.userType = 'samo';
      $scope.email = "samo@gmail.com"
      $scope.$watch(function() {
        if ($scope.myForm.$valid) {
          submitted()
        }


      });

      function submitted() {
        console.log("Form submited");
      }
    }
  ]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Example</title>
</head>

<body ng-app="formExample">
  <form name="myForm" ng-controller="FormController" class="my-form">
    userType:
    <input name="input" ng-model="userType" required>
    <input type="email" ng-model="email" required>
    <span class="error" ng-show="myForm.input.$error.required">Required!</span>
    <br>
  </form>
</body>

</html>

关于javascript - 使用 Angular 将表单发布到 ASP.NET MVC ActionMethod，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34747884/

27 4 0
文章推荐： javascript - jspm 强制错误的默认值
文章推荐： http - 如何在OSB中为HTTP后端服务实现选择性错误重试
文章推荐： error-handling - 如何使用自定义错误枚举来修复不匹配的返回类型？
文章推荐： javascript - ajax请求 - 更新没有表单的记录
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com