angularjs - how to pass ASP.NET MVC view values to angular js controller -


i want pass asp.net mvc view (.cshtml) values angular js controller. familiar angular js, not on mvc. have values in mvc cshtml. want pass value angular controller. please provide me info or demo project or link explains in detail.

i want somthing below,

  1. get value mvc model , pass cshtml.
  2. from cshtml pass value angular js controller , display in angular html page
    not want use cshtml view. want data cshtml angular controller , display in seperate html

using first tutorial pulled grabbed snippet:

var awesomeangularmvcapp = angular.module('awesomeangularmvcapp', ['ngroute']);  awesomeangularmvcapp.controller('homecontroller', homecontroller);  var configfunction = function ($routeprovider) {     $routeprovider.         when('/listings', {             url: 'routesdemo/one'         })         .when('/listing', {             url: 'routesdemo/two'         })         .when('/listings', {             url: 'routesdemo/three'         }); } configfunction.$inject = ['$routeprovider'];  awesomeangularmvcapp.config(configfunction); 

now how link view controller action in mvc:

using system.web.mvc;  namespace awesomeangularmvcapp.controllers {     public class routesdemocontroller : controller     {         public actionresult one(string title)         {             var listings = db.articles.contain(title);             return partialview(listings, "..\views\shared\whateverpartialview.cshtml");         }          [httppost]         public async task<actionresult> two(article article)         {             if(modelstate.isvalid){                   _db.add(article)             }             return view(article); //this 1 returns entire page         }          public jsonresult three(string title)         {              var listing = db.articles.where(t => t.title == title).singleordefault();             return json(listing, jsonrequestbehavior.allowget);         }     } } 

these partial views in views folder in sub folder routesdemo

  1. one.cshtml get
  2. two.cshtml post ie: a href="#/article/6" type=submit" class="btn"

    $("form").submit( function(){ $.ajax( function(url, data){ }); });

  3. three.cshtml ie

    $.ajax({ url: '@url.action("routedemo", "three")', //url: baseurl + url, data: { search: searchblue.val() }, success: function (data) { $("#msg").html("results for" + searchblue.val()); searchblue.searchmeme({ searchcomplete: true }); $('#main').fadeout(800, function () { $('#main').html("" + data + "").fadein().delay(800); }); searchblue.val(""); }, error: function (xhr, status, error) { alert(error); } });

if want pass values angular controller use razor syntax , bind value html input. top of view file make angular knows type of object expect.

ie: top of two.cshtml

 @model awesomeangularmvcapp.article 

that should besides route.config angular

if want handle model object using razor syntax check out tutorial. pretty cut , dry.if not enough show example of binding @model.attribute/property html element after work tomorrow

edit

<div class="row-fluid" ng-controller="persondetailscontroller" ng-init="personid=@model.id"> 

angular injects in scope during initialization, can refer $scope.personid


Comments

Popular posts from this blog

javascript - How to get current YouTube IDs via iMacros? -

c# - Maintaining a program folder in program files out of date? -

emulation - Android map show my location didn't work -