ASP.NET MVC 애플리케이션에서 AngularJS를 사용하여 양식 올리기

AngularJS를 사용하여 양식을 게시하고 싶습니다. 아래의 코드는 작동 할 때 애플리케이션을 시작할 때 폼이 컨트롤러에서 오는 값으로 채워진다는 것을 의미합니다. 텍스트 상자 (ng-model = "sometext"가있는 텍스트 상자)에 H1의 내용이 변경되면 AngularJS가 나타나고 작동한다는 것을 의미합니다.ASP.NET MVC 애플리케이션에서 AngularJS를 사용하여 양식 올리기

문제는 제출 버튼을 누르면 양식이 게시되지 않는 것입니다. sendForm이 호출됩니다 (경고로 테스트 됨). 콘솔에 오류가 없습니다. 레이아웃 페이지에서

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

, 기본적으로 만들어 표준 페이지입니다 : 콘솔

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

클래스는에서

. \ 컨트롤러에

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

PersonsController.cs : 난 그냥 HTML 태그를 조정

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); 
    } 
}

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) { 

     }); 
    }; 
}]);

출처

2014-09-24 Kris-I

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>

자바 스크립트 :

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 컨트롤러 :은 $ HTTP ({방법은

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); 
    } 
}

출처

2014-09-24 17:34:17

을 :라고 'GET'크리스-I @ –

? 페이지로드시 –

면도기 대신 AngularJS를 사용하는 이점은 보이지 않습니다. –

ASP.NET MVC 애플리케이션에서 AngularJS를 사용하여 양식 올리기

답변

관련 문제