[英]Post an form using AngularJS in an ASP.NET MVC application
我想使用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) {
});
};
}]);
您正在將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);
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.