欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ASP.NET MVC中jQuery与angularjs混合应用传参并绑定数据

程序员文章站 2023-11-09 13:07:22
要求是这样子的,在一个列表页中,用户点击详细铵钮,带记录的主键值至另一页。 在另一外页中,获取记录数据,然后显示此记录数据在网页上。 先用动图演示: 昨天有分享为...

要求是这样子的,在一个列表页中,用户点击详细铵钮,带记录的主键值至另一页。
在另一外页中,获取记录数据,然后显示此记录数据在网页上。

先用动图演示:

ASP.NET MVC中jQuery与angularjs混合应用传参并绑定数据

昨天有分享为ng-click传递参数 《angularjs为ng-click事件传递参数》

上面仅仅是在ng-click传入一个值,但是在asp.net mvc中,还需要把这个值传至另外一个视图中《asp.net mvc传递参数(model)》

ASP.NET MVC中jQuery与angularjs混合应用传参并绑定数据

$scope.detail = function (code) {
      var objects = {};
      objects.key = code;
      objects.value = "";
      objects.controller = "code";
      objects.action = "clausedetail";
      $http({
        method: 'post',
        url: '/pass/redirect',
        datatype: 'json',
        headers: {
          'content-type': 'application/json; charset=utf-8'
        },
        data: json.stringify(objects),
      }).then(
         function success(response) {
           if (response.data.success) {            
             window.location.href = response.data.redirecturl;
           }
           else {
             alert(response.data.exceptionmessage);
           }
         },
        function error(error) {
          alert(response.error.data);
        });
    };

在asp.net mvc的控制器的action接收参数,获取数据库的数据:

public actionresult clausedetail()
    {
      if (tempdata["pass"] == null)
        return redirecttoaction("clause", "code");
      var pass = tempdata["pass"] as pass;
      tempdata["pass"] = pass;
      clause c = new models.clause();
      c.code = pass.key.tostring();
      clauseentity ce = new clauseentity();
      var model = ce.clausebykey(c).firstordefault();
      return view(model);
    } 

上面从数据库获取数据后,给视图一个model。下面是本篇所说的重点,怎样把asp.net mvc的model传给angularjs ng-model:

ASP.NET MVC中jQuery与angularjs混合应用传参并绑定数据

以上所述是小编给大家介绍的asp.net mvc中jquery与angularjs混合应用传参并绑定数据,希望对大家有所帮助