Question

我是AngularJS的新手，并将其与ASP.NET MVC5集成。

我想知道如何调用mvc5视图以及AngularJS中的模型数据，使其呈现相应的View ALONG并将ModelData映射到（ng-Model）或（controller $ scope）

- 更新 -

正如我在asp.net mvc5中所做的那样，我的UserController有两个编辑视图，如下所示。

ASP.NET MVC5代码

/// ########### 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>

}

现在在AngularJS中，我还要在客户端维护一个控制流程的控制器

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);
   });
};

这是我的问题

通过调用AngularJS的 EditGet函数将进一步调用UserController中的 EDIT Action Method ，此操作方法与模型数据一起返回视图（Edit_View）。

那么AngularJS如何处理/渲染返回的视图（即Edit_View）在浏览器对齐中，并且映射返回了ModelData。

我们是要在角度级别制作单独的视图，还是可以在asp.net mvc5级别使用视图

Answer 1

您不希望$ http GET或POST到MVC Controller。相反，您希望使用Web API Controller。

底线是你希望在执行GET或POST时从服务器端返回JSON。

您可能需要观看Matt Honeycutt's Building Strongly-typed AngularJS Apps with ASP.NET MVC 5。

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

更新

如果您使用Angular，则需要从MVC操作方法返回 JSON 。

public ActionResult Edit(string id)
{
   ....  
   return Json(objUser);     
}

将AngularJs与Asp.net MVC5集成（Views，Controller，ModelData）

1 个答案:

更新