Question

我想使用AngularJS发布表单。下面的代码工作，我的意思是当我启动应用程序时，表单填入来自控制器ok的值。当我输入文本框（ng-model =＆＃34; sometext＆＃34;）时，H1的内容会发生变化，这意味着AngularJS存在并正常工作。

问题是当我按下提交按钮时，表单未发布。调用sendForm（我通过警报测试），控制台中没有错误。

在控制台中

XML : 
XML Parsing Error: no element found Location: moz-nullprincipal:{9bd871b4-ae27-4998-a67a-bc2674aefe60} Line Number 1, Column 1:
^
Post : is blank
Cookies : 
__RequestVerificationToken : JyEiABS8lLKnblGCkeLg_ODieIZc4ZhjHn6lEo4o9geEB9_lgEjxiYBtJ-zligkONM2sxSBgDgvpMolF3derhg6KuUXf2vKNSEVIRVtSwes1
Headers :
Cache-Control   private
Content-Length  0
Date    Wed, 24 Sep 2014 17:02:19 GMT
Server  Microsoft-IIS/8.0
X-AspNet-Version    4.0.30319
X-AspNetMvc-Version 5.2
X-Powered-By    ASP.NET
X-SourceFiles   =?UTF-8?B?RDpcVXNlcnNcQ2hyaXNcTXkgRG9jdW1lbnRzXFZpc3VhbCBTdHVkaW8gMjAxM1xQcm9qZWN0c1xQT0NBbmd1bGFySlNXaXRoTVZDXFdlYkFQSVdpdGhNVkNcUGVyc29uc1xTYXZl?=
view source
Accept  application/json, text/plain, */*
Accept-Encoding gzip, deflate
Accept-Language en-US,en;q=0.5
Content-Length  0
Content-Type    text/plain; charset=UTF-8
Cookie  __RequestVerificationToken=JyEiABS8lLKnblGCkeLg_ODieIZc4ZhjHn6lEo4o9geEB9_lgEjxiYBtJ-zligkONM2sxSBgDgvpMolF3derhg6KuUXf2vKNSEVIRVtSwes1
Host    localhost:51853
Referer http://localhost:51853/Persons
User-Agent  Mozilla/5.0 (Windows NT 6.3; WOW64; rv:31.0) Gecko/20100101 Firefox/31.0
X-Requested-With    XMLHttpRequest

班级：

public class Person
{
    public int Id { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
}

在布局页面上，是默认创建的标准页面。我只是调整HTML标记：

<html data-ng-app="myApp">

\ Controllers中的PersonsController.cs：

public class PersonsController : Controller
{
    public ActionResult Index()
    {
        return View(new Person { FirstName = "MyFarst", LastName = "MyLast", Id = 1 });
    }

    public void Save(Person person)
    {
        Console.WriteLine(person);
    }
}

\ Views \ Persons中的Index.cshtml：

@model MyApp.Entities.Person
<div>
    Write some text in textbox:
    <input type="text" ng-model="sometext" />
    <h1>Hello {{ sometext }}</h1>
</div>

<div>
    <div data-ng-controller="personController">
        First Name: <input type="text" ng-model="firstName"><br>
    </div>
    <form name="mainForm" data-ng-submit="sendForm()" data-ng-controller="personController" novalidate>
        <div>@Html.AntiForgeryToken()</div>
        <div>@Html.TextBoxFor(m => m.FirstName)</div>
        <div>@Html.TextBoxFor(m => m.LastName)</div>
        <div><button type="submit" data-ng-disabled="mainForm.$invalid">Submit</button></div>
    </form>
</div>

app.js文件：

var myApp = angular.module('myApp', []);
myApp.controller('personController', ['$scope', '$http', function ($scope, $http) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";

    $scope.sendForm = function () {
        $http({
            method: 'POST',
            url: '/Persons/Save'
        }).success(function (data, status, headers, config) {

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

        });
    };
}]);

Answer 1

你正在混合mvc和angularjs它将无法正常工作。你必须这样做：

<div>        
    <form name="mainForm" data-ng-submit="sendForm()" data-ng-controller="personController" novalidate>        
        <div><input ng-model="model.firstName" type="text" /></div>
        <div><input ng-model="model.lastName" type="text" /></div>
        <div><button type="submit" data-ng-disabled="mainForm.$invalid">Submit</button></div>
    </form>
</div>

的javascript：

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

   $http({method: 'GET', url: 'Persons/Get' + personIdFromQueryString}).success(function(data) {
        $scope.model = data;
   });

    $scope.sendForm = function () {
        $http({
            method: 'POST',
            url: '/Persons/Save',
            data : $scope.model
        }).success(function (data, status, headers, config) {

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

        });
    };
}]);

mvc控制器：

public class PersonsController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult Get(int id)
    {
       return Json(new Person { FirstName = "MyFarst", LastName = "MyLast", Id = 1 });
    }

    public void Save(Person person)
    {
        Console.WriteLine(person);
    }
}

在ASP.NET MVC应用程序中使用AngularJS发布表单

1 个答案: