1

I am new to AngularJS and INTEGRATING it with ASP.NET MVC5.

I would like to know how can i call an mvc5 View along with Model Data from AngularJS in a way that it renders respective View ALONG with mapping ModelData to (ng-Model) or (controller $scope)

-- UPDATE --

As what i do in asp.net mvc5 is i have UserController with two Edit views as follows

ASP.NET MVC5 CODE

/// ########### C# CODE ##############
public class UserController : Controller
{
    // GET: USER/Edit/5
    public ActionResult Edit(string id)
    {
        try
        {
            EntitiesModel1 context = new EntitiesModel1();
            USER objUser = context.USER.SingleOrDefault(w => w.USER_ID == Id);

            **//what this return statement does, it renders given view in browser along with ModelData which will automatically be mapped with Razor Model**
            return View("Edit_View", objUser);
        }
        catch (Exception ex)
        {
            return View("~/Views/Shared/Error.cshtml");
        }
    }

    // POST: USER/Edit/5
    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Edit(User argUser)
    {
        try
        {
            if (ModelState.IsValid)
            {
                long userIdToUpdate = long.Parse(TempData.Peek("UserIdToUpdate").ToString());

                EntitiesModel1 context = new EntitiesModel1();
                USER entUser = context.USER.SingleOrDefault(w => w.USER_ID == userIdToUpdate);
                entUser.FirstNames= argUser.FirstNames;
                entUser.Lastname= argUser.LastName;

                context.SaveChanges();
            }

            //what this return does is, it returns control back to index page
            return RedirectToAction("Index");
        }
        catch (Exception ex)
        {
            return View("~/Views/Shared/Error.cshtml");
        }
    }
}

/// ########### RAZOR VIEW CODE ##############
@model DRS_Web.Model.USER
@using (Html.BeginForm())
{
     @Html.AntiForgeryToken()

<div>
    <label>Update User</label>
    <div >
        First name @Html.EditorFor(model => model.FirstNames)
        Last name  @Html.EditorFor(model => model.LastName)

        <input type="submit" value="Update Record" />
    </div>
</div>

}

Now in AngularJS i ve to maintain a controller at client side aswell which is controlling the flow

ASP.NET MVC5 ANGULARJS CODE

// ########### ANGULARJS CONTROLLER ###########
<addangular.module('ngAppModule').controller('ngUserController', function ($scope, $http) {
$scope.UserModel = {};    
$scope.UserList = null;
$scope.message= '';

//GET EDIT VIEW
$scope.EditGet = function (id) {
    $http({ method: 'GET', url:'/User/Edit', data: id })
    .success(function (data, status, headers, config) {
        $scope.UserModel = data;
        // **HERE IS MY QUESTION, SINCE EDIT ACTION IN USERCONTROLLER IS RETURNING VIEW NAME ALONG WITH MODEL DATA, DATA LOADED SUCCESSFULLY VIA JSON, HOW COME VIEW BE RENDERED IN BROWSER**
    })
   .error(function (data, status, headers, config) {
       $scope.message = 'Unexpected Error while loading data!!';
   });
};

//POST EDIT VIEW
$scope.EditSubmit= function () {
    $http({ method: 'POST', url:'/User/Edit', data: $scope.UserModel })
    .success(function (data, status, headers, config) {
        $scope.message = 'Data updated successfully';
    })
   .error(function (data, status, headers, config) {
       $scope.message = 'Unexpected Error while loading data!!';
       $scope.result = "color-red";
       console.log($scope.message);
   });
};

HERE IS MY QUESTION

By calling EditGet function from AngularJS will further call EDIT Action Method in UserController, and this Action Method IS RETURNING VIEW (Edit_View) ALONG WITH MODEL DATA.

So How AngularJS Handles / Render Returned view (i.e Edit_View) in browser algon with mapping returned ModelData.

Are we going to make separate views at angular level or can we utilize views at asp.net mvc5 level

1 Answer 1

2

You do not want $http GET or POST to MVC Controller. Instead, you want to use Web API Controller.

The bottom line is you want JSON returning from server-side when GET or POST is performed.

You might want to watch Matt Honeycutt's Building Strongly-typed AngularJS Apps with ASP.NET MVC 5.

How to pass info between Angular and C# ASP.NET

Updated:

If you work with Angular, you want to return JSON from MVC action method.

public ActionResult Edit(string id)
{
   ....  
   return Json(objUser);     
}
Sign up to request clarification or add additional context in comments.

7 Comments

actually your provided link are asking for payment info and i do not have credit / debit card, i am a student right now, any free course without payment registration.
I believe you can sign-up for free trial via DreamSpark for student. That 3 hours worth of video save my 3 days worth of fiddling in Google or even more. This is your call.
actually I am already returning json data from server side by calling controller. I'm confused in a way that how come I return view as well by view I mean html page routing
alright i got UserModel from MVC in form of JSON, how am i going to navigate to view "Edit_View" from MVC
Why does Edit action method still need to service MVC view while you have Angular at front end?
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.