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

Question

我想使用AngularJS发布表单。 下面的代码有效，我的意思是当我启动应用程序时，表格中填充了来自控制器的值。 当我在文本框（带有ng-model =“ sometext”的文本框）中键入内容时，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 个解决方案

解决方案1
5 2014-09-24 17:34:17

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

问题描述

1 个解决方案

解决方案1 5 2014-09-24 17:34:17

解决方案1
5 2014-09-24 17:34:17