Asp.net mvc 如何将模型通过MVC控制器传递到引导模式_Asp.net Mvc_Angularjs_Entity Framework_Twitter Bootstrap_Asp.net Mvc 4

Asp.net mvc 如何将模型通过MVC控制器传递到引导模式

asp.net-mvc angularjs entity-framework twitter-bootstrap asp.net-mvc-4

Asp.net mvc 如何将模型通过MVC控制器传递到引导模式,asp.net-mvc,angularjs,entity-framework,twitter-bootstrap,asp.net-mvc-4,Asp.net Mvc,Angularjs,Entity Framework,Twitter Bootstrap,Asp.net Mvc 4,我已经为此工作了一段时间，我想我已经接近了。我正在尝试使用引导模式编辑MVC应用程序用户。我正在使用Angular进行绑定，当我单击用户时，id将传递给Angular控制器，然后传递给MVC控制器。我想我可以在控制器中发布编辑操作，并返回模型的模态。我找不到那份工作。我为模态创建了一个动作，它打开的很好。但没有附加模型。我怎样才能让它工作棱角的 $scope.editUser = function (id) { var modalInstance = $modal.

我已经为此工作了一段时间，我想我已经接近了。我正在尝试使用引导模式编辑MVC应用程序用户。我正在使用Angular进行绑定，当我单击用户时，id将传递给Angular控制器，然后传递给MVC控制器。我想我可以在控制器中发布编辑操作，并返回模型的模态。我找不到那份工作。我为模态创建了一个动作，它打开的很好。但没有附加模型。我怎样才能让它工作

棱角的

  $scope.editUser = function (id) {
            var modalInstance = $modal.open({
                templateUrl: 'UsersAdmin/EditUserModal',
                controller: $scope.modalEdit,
                //matches of the id of your item to recover object model in the controller of the modal
                resolve: {
                    id: function () {
                        return id
                    }
                }
            });
        };

        //controller of the modal. Inside you can recover your object with ajax request
        $scope.modalEdit = function ($scope, $modalInstance, id) {
            if (angular.isDefined(id)) {
                var reqGetCustomer = $http({ url: '/UsersAdmin/Edit/' + id, method: 'GET' });
                reqGetCustomer.success(function (dataResult) {
                    $scope.model = dataResult;
                });
            } else { alert('id is undefined'); }
            //function to close modal
            $scope.cancel = function () {
                $modalInstance.dismiss('cancel');
            }
        }

查看用户列表

<tbody>
  @foreach (var item in Model)
    {
      <tr>
        <td>
     @Html.DisplayFor(modelItem => item.FullName)
       </td>
      <td class="text-left" style="width:225px">
       @Html.ActionLink("Edit", "Edit", null, new { ng_click = "editUser('" + @item.Id + "')" })
        </td>
          </tr>
     }
 </tbody>


@foreach（模型中的var项目）
{
@DisplayFor（modelItem=>item.FullName）
@ActionLink（“Edit”，“Edit”，null，new{ng_click=“editUser”（“+@item.Id+”）”）
}

MVC控制器

 public ActionResult EditUserModal(string id)
    { 
        return View();
    }

    // GET: /Users/Edit/1
    public async Task<ActionResult> Edit(string id)
    {
        if (id == null)
        {
            return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
        }
        ViewBag.RoleId = new SelectList(RoleManager.Roles, "Id", "Name");

        var user = await UserManager.FindByIdAsync(id); 
        if (user == null)
        {
            return HttpNotFound();
        }
        var userRoles = await UserManager.GetRolesAsync(user.Id);

        var companies = await _userCompanyService.GetCompaniesAsync();
        var selectedCompanies = companies.Where(c => c.Users.Any(u => u.Id == user.Id)).Select(c => c.Id).ToArray();
        var model = new EditUserViewModel()
        {
            Id = user.Id,
            UserName = user.UserName,
            FullName = user.FullName,
            RolesList = RoleManager.Roles.ToList().Select(x => new SelectListItem()
            {
                Selected = userRoles.Contains(x.Name),
                Text = x.Name,
                Value = x.Name
            }),
            CompanyList = new MultiSelectList(companies.Select(c => new 
            {
                Name = c.Name,
                Id = c.Id
            }), 
            "Id", "Name", selectedCompanies),
            SelectedCompanies = selectedCompanies
        };



        return View(model);
    }

  $('a.edit').on('click', function () {
            $.ajax({
                url: this.href,
                type: 'GET',
                cache: false,
                success: function (result) {
                    $('#myModal').html(result).find('.modal').modal({
                        show: true,
                        backdrop: false
                    });
                }
            });
            return false;
        });

        $scope.deleteUser = function (id) {
            ApplicationUserDelete.remove(id).success(function (result) {
            }).error(function (err, result) {
                console.log(err, result);
            });
        };

public ActionResult EditUserModal（字符串id）
{ 
返回视图（）；
}
//获取：/Users/Edit/1
公共异步任务编辑（字符串id）
{
if（id==null）
{
返回新的HttpStatusCodeResult（HttpStatusCode.BadRequest）；
}
ViewBag.RoleId=新的选择列表（rolemager.Roles，“Id”，“Name”）；
var user=await UserManager.FindByIdAsync（id）；
if（user==null）
{
返回HttpNotFound（）；
}
var userRoles=await UserManager.GetRolesAsync（user.Id）；
var companys=await_userCompanyService.getcompanyesasync（）；
var selectedcompanys=companys.Where（c=>c.Users.Any（u=>u.Id==user.Id））.Select（c=>c.Id.ToArray（）；
var model=new EditUserViewModel（）
{
Id=user.Id，
UserName=user.UserName，
FullName=user.FullName，
RolesList=RoleManager.Roles.ToList（）.Select（x=>new SelectListItem（））
{
Selected=userRoles.Contains（x.Name），
Text=x.名称，
Value=x.Name
}),
CompanyList=新的多重选择列表（companys.Select）（c=>new
{
Name=c.Name，
Id=c.Id
}), 
“Id”、“名称”、选定公司），
selectedcompanys=selectedcompanys
};
返回视图（模型）；
}

引导模式

@model TransparentEnergy.Models.EditUserViewModel
@{
    Layout = null;
 }
<div class="modal-header">
    <h3 class="modal-title">Edit User</h3>
</div>
<div class="modal-body">
    <div class="row">
        <div class="col-md-12">
            @using (Html.BeginForm())
            {
                @Html.AntiForgeryToken()
                @Html.ValidationSummary(true)
                @Html.HiddenFor(model => model.Id)
                <div class="card-body card-padding">
                    <div class="form-group">
                        <label for="UserName" class="col-md-2 control-label">UserName</label>
                        <div class="col-md-10">
                            <div class="fg-line">
                                @Html.TextBoxFor(m => m.UserName, new { @class = "form-control fg-input" })
                                @Html.ValidationMessageFor(model => model.UserName)
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-9">
                        <div class="form-group fg-line">
                            <label for="SelectedRoles" class="control-label">Roles</label>
                            @foreach (var item in Model.RolesList)
                            {
                                <input type="checkbox" name="SelectedRoles" value="@item.Value" checked="@item.Selected" class="checkbox-inline" />
                                @Html.Label(item.Value, new { @class = "control-label" })
                            }
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-2">
                            <button type="submit" class="btn bgm-blue waves-effect btn-width">Save</button>
                        </div>
                    </div>
                </div>
            }
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="modal-footer">
            <button class="btn bgm-orange waves-effect btn-width" ng-click="cancel()">Close</button>
        </div>
    </div>
</div>

@model TransparentEnergy.Models.EditUserViewModel
@{
布局=空；
}
编辑用户
@使用（Html.BeginForm（））
{
@Html.AntiForgeryToken（）
@Html.ValidationSummary（true）
@Html.HiddenFor（model=>model.Id）
用户名
@TextBoxFor（m=>m.UserName，新的{@class=“formcontrol fg input”}）
@Html.ValidationMessageFor（model=>model.UserName）
角色
@foreach（Model.RolesList中的var项）
{
@Label（item.Value，新的{@class=“control Label”}）
}
拯救
}
接近

最佳做法是：

1）控制器中的Write方法（如果您要编写WebApi以将数据传递给客户端，则更好）

2）编写角度服务，它将与您的API兼容

3）为您的页面编写控制器和指令

一切都很容易。当您需要数据时，只需从指令调用您的角度服务。Anf在视图（引导模型）中，您可以使用指令属性

这是一个小例子：

 public class DoorsController : ApiContollerBase
    {

      [HttpGet]
      public IEnumerable<DoorViewModel> AdminGetDictionaries()
      {
         //here i just return List of my doors
        return Doors.GetDoors();
      }

}

指令：

(function () {
    'use strict';

    angular
        .module('adminApp.directives.adminTableArea', ['adminApp.directives', 'adminApp.services'])
        .directive('adminTableArea', function () {
            return {
                restrict: 'E',
                replace: true,
                templateUrl: '/App/Admin/views/General/admin-table-area.html',
                scope: {
                    options: "="
                },

                controller: ['$scope', '$translate', 'AdminData', 'DictionaryProvider', '$state', '$window',
                    function ($scope, $translate, AdminData, DictionaryProvider, $state, $window) {
                        var vm = this;

                        var data = AdminData(vm.dataSource, vm.dataActionNames);
....etc...

我希望它能帮助你

祝你好运。当做 David

最佳实践是：

1）控制器中的Write方法（如果您要编写WebApi以将数据传递给客户端，则更好）

2）编写角度服务，它将与您的API兼容

3）为您的页面编写控制器和指令

一切都很容易。当您需要数据时，只需从指令调用您的角度服务。Anf在视图（引导模型）中，您可以使用指令属性

这是一个小例子：

 public class DoorsController : ApiContollerBase
    {

      [HttpGet]
      public IEnumerable<DoorViewModel> AdminGetDictionaries()
      {
         //here i just return List of my doors
        return Doors.GetDoors();
      }

}

指令：

(function () {
    'use strict';

    angular
        .module('adminApp.directives.adminTableArea', ['adminApp.directives', 'adminApp.services'])
        .directive('adminTableArea', function () {
            return {
                restrict: 'E',
                replace: true,
                templateUrl: '/App/Admin/views/General/admin-table-area.html',
                scope: {
                    options: "="
                },

                controller: ['$scope', '$translate', 'AdminData', 'DictionaryProvider', '$state', '$window',
                    function ($scope, $translate, AdminData, DictionaryProvider, $state, $window) {
                        var vm = this;

                        var data = AdminData(vm.dataSource, vm.dataActionNames);
....etc...

我希望它能帮助你

祝你好运。当做 David

最佳实践是：

1）控制器中的Write方法（如果您要编写WebApi以将数据传递给客户端，则更好）

2）编写角度服务，它将与您的API兼容

3）为您的页面编写控制器和指令

一切都很容易。当您需要数据时，只需从指令调用您的角度服务。Anf在视图（引导模型）中，您可以使用指令属性

这是一个小例子：

 public class DoorsController : ApiContollerBase
    {

      [HttpGet]
      public IEnumerable<DoorViewModel> AdminGetDictionaries()
      {
         //here i just return List of my doors
        return Doors.GetDoors();
      }

}

指令：

(function () {
    'use strict';

    angular
        .module('adminApp.directives.adminTableArea', ['adminApp.directives', 'adminApp.services'])
        .directive('adminTableArea', function () {
            return {
                restrict: 'E',
                replace: true,
                templateUrl: '/App/Admin/views/General/admin-table-area.html',
                scope: {
                    options: "="
                },

                controller: ['$scope', '$translate', 'AdminData', 'DictionaryProvider', '$state', '$window',
                    function ($scope, $translate, AdminData, DictionaryProvider, $state, $window) {
                        var vm = this;

                        var data = AdminData(vm.dataSource, vm.dataActionNames);
....etc...

我希望它能帮助你

祝你好运。当做 David

最佳实践是：

1）控制器中的Write方法（如果您要编写WebApi以将数据传递给客户端，则更好）

2）编写角度服务，它将与您的API兼容

3）为您的页面编写控制器和指令

一切都很容易。当您需要数据时，只需从指令调用您的角度服务。Anf在视图（引导模型）中，您可以使用指令属性

这是一个小例子：

 public class DoorsController : ApiContollerBase
    {

      [HttpGet]
      public IEnumerable<DoorViewModel> AdminGetDictionaries()
      {
         //here i just return List of my doors
        return Doors.GetDoors();
      }

}

指令：

(function () {
    'use strict';

    angular
        .module('adminApp.directives.adminTableArea', ['adminApp.directives', 'adminApp.services'])
        .directive('adminTableArea', function () {
            return {
                restrict: 'E',
                replace: true,
                templateUrl: '/App/Admin/views/General/admin-table-area.html',
                scope: {
                    options: "="
                },

                controller: ['$scope', '$translate', 'AdminData', 'DictionaryProvider', '$state', '$window',
                    function ($scope, $translate, AdminData, DictionaryProvider, $state, $window) {
                        var vm = this;

                        var data = AdminData(vm.dataSource, vm.dataActionNames);
....etc...

我希望它能帮助你

祝你好运。当做

大卫终于用最简单的方法找到了答案。没有自定义MVC帮助程序或不必要的jquery

这是带有表的索引视图

 <div class="table-responsive">
                            <table class="table table-vmiddle">
                                <thead>
                                    <tr>
                                        <th>Full Name</th>
                                        <th>Email</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach (var item in Model)
                                    {
                                        <tr>
                                            <td>
                                                @Html.DisplayFor(modelItem => item.FullName)
                                            </td>
                                            <td>
                                                @Html.DisplayFor(modelItem => item.Email)
                                            </td>
                                            <td class="text-left" style="width:100px">
                                                @Html.ActionLink("Edit", "Edit", new { id = item.Id }, new { @class = "btn bgm-gray waves-effect edit" })
                                            </td>
                                            <td class="text-left" style="width:100px">
                                                @Html.ActionLink("Delete", "Edit", null, new { ng_click = "deleteUser('" + @item.Id + "')", @class = "btn" })
                                            </td>
                                        </tr>
                                    }
                                </tbody>
                            </table>
                        </div>

MVC控制器动作返回部分ALVI