Using AngularJS-01 in MVC, basic, mvcangularjs-01
Angularjs is a front-end Javascript MVC library and framework, so that the front-end can be better designed, maintained, and tested. Its core features include MVC, bidirectional data binding, command and semantic tags, modular tools, dependency injection, HTML templates, and encapsulation of common tools, for example, $ http, $ cookies, and $ location. This article describes how to use Angularjs in MVC.
Enter the keyword Angularjs through NuGet and install "Angular JS Core ".
Introduce angular. js to the page:
<script src="~/Scripts/angular.js"></script>
Ng-app command
When Angular finds the element in the DOM that contains the ng-app instruction, it initializes and can call other commands of Angular.
Bind data using the "ng-model" command
<Div> <input type = "text" placeholder = "input Name" ng-model = "name"/>{{ name }}</div>
Using ng-model = "name", the input and page display are bound in two directions.
Use the "ng-controller" command to introduce the controller
Enter the keyword bootstrap in NuGet and install bootstrap under MVC4.
Introduce bootstrap. cs to the view page.
Create controller. js as follows:
Var MainController = function ($ scope) {var model = {Name: "My Books", Books: [{Title: 'sundry Day', isComplete: false }, {Title: 'years ', isComplete: false}, {Title: 'Time is wasted', isComplete: true}]}; $ scope. readingList = model ;};Introduce controller. js into the view page. Home/Index. cshtml:
<Html ng-app>Run:
When the checkbox check status is changed, the isComplete value also switches between true and false, which reflects the bidirectional binding of Angularjs.
Filter
Add an Input:
<Div> <input type = "text" ng-model = "titleFilter" placeholder = "input keyword search"/> </div>Add a filter to each line in the form of "|:
<tr ng-repeat="book in readingList.Books | filter:titleFilter">Run, enter keywords:
Use the "ng-click" command to bind events to DOM elements
Add the following in controller. js:
$scope.addBook = function() { model.Books.push({ Title: $scope.newTitle, isComplete: false }); $scope.newTitle = ''; };Add the following in <div ng-controller = "MainController">:
<Div> <input type = "text" ng-model = "newTitle" placeholder = "enter a new title" required> <input type = "button" ng-click = "addBook () "value =" add "class =" btn "/> </div>Run and add data:
Choose Angularjs or Knockout?
Angular undertakes more server-side work than Knockout. If the framework used is lightweight, such as NodeJS, Angular is preferred.
If ASP. NET is selected, Knockout is preferred.
I am a beginner in MVC. I have encountered a problem: how to convert a common view into a master page in MVC?MVC has no template page and only LayoutPage. All views can be used as LayoutPage. However, LayoutPage generally has the most basic @ RenderBody () method call, in this way, the current page can be rendered as the LayoutPage page. You can use @ RenderSection to define the block (similar to the ContentPlaceholder in the template page) you can use @ section on the reference page to define the content to replace @ RenderSection.
How does mvc Access controller in view?Basically all MVC operations are performed through Ajax. Access controller from View? You are talking about the View request controller data? This is also done through Ajax.
$. Ajax ({
Url: "/Admin/GetData ",
Type: "POST ",
Data: {key: value },
Success: function (jdata ){
Alert (jdata); // here, jdata is the result obtained from the GetData () method of the controller Admin.
}
});
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
