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

Question

I want to pass ASP.NET MVC view (.cshtml) values to angular js controller. I am familiar with Angular js, But not on MVC. I have values in MVC cshtml. I want to pass that value to my angular controller. Please provide me some info or demo project or link which explains in detail.
i want somthing like below,
Get value from mvc model and pass it to cshtml.
from cshtml pass value to angular js controller and display in angular html page
I do not want to use cshtml as my view. I want to get data from cshtml to angular controller and display in seperate html

Answer 1

Using the very first tutorial I pulled up I grabbed this 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 this how you link a view to a 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 one 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 would be in the Views folder in a sub folder RoutesDemo
one.cshtml GET
two.cshtml POST ie: a href="#/Article/6" type=submit" class="btn"
$("form").submit( function(){
$.ajax( function(url, data){
});
});
three.cshtml GET 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 you want to pass values to the angular controller use razor syntax and bind the value to the html input. The top of the view file will make it so angular knows what type of object to expect.
IE: Top of Two.cshtml
#model AwesomeAngularMVCApp.Article
That should be it besides route.config for angular
If you want to handle the Model object using razor syntax check out this tutorial. Pretty cut and dry.If that is not enough I will show example of binding #Model.attribute/property to an html element after work tomorrow
EDIT
<div class="row-fluid" ng-controller="PersonDetailsController" ng-init="personId=#Model.Id">
Angular injects it in the scope during initialization, so you can refer to it as $scope.personId