我们如何使用AngularJS绑定asp.net中的gridview控件？ [英] How can we bind the gridview control in asp.net using AngularJS?

问题描述

我是AngularJS的新手。我想使用AngularJS将数据绑定到gridview控件。我已经使用HTML表完成了这项任务，它工作正常。我们可以为ASP.NE T控件应用AngularJS数据绑定吗？

I am a newbie to AngularJS.I want to bind the data to gridview control using AngularJS.I have done this task using HTML table it is working fine. Can we apply AngularJS databind for ASP.NE T controls ?

推荐答案

双向数据绑定

AngularJS的双向数据绑定是它最显着的特性，通过减轻服务器后端的模板责任来减少编写的代码量。相反，模板根据模型中定义的范围中包含的数据以纯HTML格式呈现。 Angular中的

Two-way Data Binding
AngularJS' two-way data binding is its most notable feature and reduces the amount of code written by relieving the server backend from templating responsibilities. Instead, templates are rendered in plain HTML according to data contained in a scope defined in the model. The

范围服务检测模型部分的更改，并通过控制器修改视图中的HTML表达式。同样，视图的任何更改都会反映在模型中。这避免了主动操作DOM的需要，并鼓励对Web应用程序进行自举和快速原型设计。



一些AngularJS指令



AngularJS指令允许开发人员指定自定义和可重用的HTML标签，以缓和某些元素的行为。



ng-app

声明一个元素作为应用程序的根元素，允许通过自定义HTML标记修改行为。



ng-bind

自动将HTML元素的文本更改为给定表达式的值。



ng-model

类似于ng-bind，但允许视图和范围之间的双向数据绑定。



ng-class

允许动态加载类属性。



ng-controller

指定用于评估HTML表达式的JavaScript控制器类。



ng-repeat

从集合中为每个项目实例化一个元素。



ng-show& ng-hide

有条件地显示或隐藏元素，具体取决于布尔表达式的值。



ng-switch

有条件地从一组选项中实例化一个模板，具体取决于选择表达式的值。



ng-view

在呈现由指定控制器驱动的模板之前，负责处理解析JSON的路由的基本指令。



ngClick

ngClick允许您指定自定义单击元素时的行为。



ngSubmit

启用绑定角度表达式为onsubmit事件。



ngHref

在href属性中使用Angular标记会使页面打开到错误的URL，如果用户在angular有机会替换实际URL之前单击该链接，链接将被破坏，很可能会返回404错误。 ngHref指令解决了这个问题。

scope service in Angular detects changes to the model section and modifies HTML expressions in the view via a controller. Likewise, any alterations to the view are reflected in the model. This circumvents the need to actively manipulate the DOM and encourages bootstrapping and rapid prototyping of web applications.

Some of AngularJS Directives

AngularJS directives allow the developer to specify custom and reusable HTML tags that moderate the behavior of certain elements.

ng-app
Declares an element as a root element of the application allowing behavior to be modified through custom HTML tags.

ng-bind
Automatically changes the text of an HTML element to the value of a given expression.

ng-model
Similar to ng-bind, but allows two-way data binding between the view and the scope.

ng-class
Allows class attributes to be dynamically loaded.

ng-controller
Specifies a JavaScript controller class that evaluates HTML expressions.

ng-repeat
Instantiate an element once per item from a collection.

ng-show & ng-hide
Conditionally show or hide an element, depending on the value of a boolean expression.

ng-switch
Conditionally instantiate one template from a set of choices, depending on the value of a selection expression.

ng-view
The base directive responsible for handling routes that resolve JSON before rendering templates driven by specified controllers.

ngClick
The ngClick allows you to specify custom behavior when element is clicked.

ngSubmit
Enables binding angular expressions to onsubmit events.

ngHref
Using Angular markup like in an href attribute makes the page open to a wrong URL, if the user clicks that link before angular has a chance to replace the with actual URL, the link will be broken and will most likely return a 404 error. The ngHref directive solves this problem.

To communicate with database using AngularJS, create a Web Service and paste the following code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data;
using System.Data.SqlClient;
using System.Web.Script.Services;
using System.Collections;
using System.Web.Script.Serialization;

namespace EmplyeeDetails
{
    /// <summary>
    /// Summary description for EmpService
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]

    // To allow this Web Service to be called from script, 
    // using ASP.NET AJAX, uncomment the following line. 
    [System.Web.Script.Services.ScriptService]

    public class EmpService : System.Web.Services.WebService
    {
        string connection = @"Data Source=RAVINDRA\SQLEXPRESS;
        Initial Catalog=Employee;Integrated Security=SSPI;";

        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public string InsertEmployee(string empID, string firstName, 
        	string lastName, string address, string city, 
        	string pincode, string state, string country)
        {
            SqlConnection con = new SqlConnection(connection);
            SqlCommand cmd;
            try
            {
                con.Open();
                cmd = con.CreateCommand();
                cmd.CommandText = "INSERT INTO EmployeeDetails
                (ID,FirstName,LastName,Address,City,Pincode,State,Country) 
                VALUES(@ID,@FirstName,@LastName,@Address,@City,@Pincode,@State,@COuntry)";
                cmd.Parameters.AddWithValue("@ID", empID);
                cmd.Parameters.AddWithValue("@FirstName", firstName);
                cmd.Parameters.AddWithValue("@LastName", lastName);
                cmd.Parameters.AddWithValue("@Address", address);
                cmd.Parameters.AddWithValue("@City", city);
                cmd.Parameters.AddWithValue("@Pincode", Convert.ToInt32(pincode));
                cmd.Parameters.AddWithValue("@State", state);
                cmd.Parameters.AddWithValue("@Country", country);
                cmd.ExecuteNonQuery();
                return "Record Inserted Successfully";
            }
            catch (Exception)
            {
                throw;
            }
            finally
            {
                if (con.State == ConnectionState.Open)
                {
                    con.Close();
                }

            }
        }
}
}

scope.save = function（）{

scope.save = function () {

这篇关于我们如何使用AngularJS绑定asp.net中的gridview控件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！