0
AngularJS와 함께 ASP.NET MVC를 사용하여 CRUD 작업을 수행 할 수있는 페이지가 있습니다. html 테이블에 내 데이터를 표시하고 있습니다. UI 그리드로 그걸 보여주고 싶습니다. http://ui-grid.info/ASP.NET MVC에서 AngularJS를 사용하여 UI Grid에 내 데이터를 표시하는 방법
누구든지 UI 그리드에서 데이터를 보여줄 수 있습니까?
app.controller('crudController', function ($scope, crudService) {
$scope.IsNewRecordProject = 1;
loadRecordsProject();
//Function to load all Projects records
function loadRecordsProject() {
var promiseGet = crudService.getProjects(); //The Method Call from service
promiseGet.then(function (pl) { $scope.Projects = pl.data },
function (errorPl) {
$log.error('failure loading Projects', errorPl);
});
}
});
Module.js
var app;
(function() {
app = angular.module("crudModule", []);
})();
Service.js
,536,913,632Controller.js을 :
이 내 웹 애플리케이션이 모습입니다 10
app.service('crudService', function ($http) {
//Get All Projects
this.getProjects = function() {
return $http.get("/api/ProjectsAPI");
}
});
는 그리고 이것은 내 Project.cshtml 파일
당신은 그리드 옵션을 정의하고 JSON으로 데이터를 반환해야@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<!-- page content -->
<body>
<div class="container-fluid">
<div class="header-title">
<h1>Projects</h1>
<br />
</div>
</div>
@*<div class="right_col" role="main">*@
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12" ng-controller="crudController">
<div class="col-md-7">
<div class="col-md-4 left-zero">
<div class="form-group">
<div class="col-md-5 left-zero">
<div class="form-group row">
<div class="col-md-2">
<input id="txtSearch" type="text" placeholder="Search by name..." class="form-control" Height="33" Width="200" />
</div>
<div class="col-md-2 pull-right">
<div style="margin-left: 47px;"><input id="btnSearch" type="button" value="Search" Class="btn btn-primary" /></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8 pull-right">
<table style="border-collapse: separate; border-spacing: 10px 0px;">
<tr>
<td>
<select id="cbStatus" class="form-control">
<option>Active</option>
<option>Inactive</option>
</select>
</td>
<td>
<select id="cbPlatform" class="form-control">
<option>Desktop</option>
<option>Web</option>
<option>Mobile</option>
</select>
</td>
<td>
<select id="cbVerify" class="form-control">
<option>Veryfy1</option>
<option>Veryfy2</option>
</select>
</td>
<td>
<select id="cbBlank" class="form-control">
<option>Test1</option>
<option>Test2</option>
</select>
</td>
<td>
<select id="cbBlank2" class="form-control">
<option>Test1</option>
<option>Test2</option>
</select>
</td>
<td><input id="btnNewProjects" type="button" value="Create New" data-ng-click="ShowInsertPanel = !ShowInsertPanel" class="btn btn-success" /></td>
</tr>
</table>
</div>
<table class="table table-bordered" align="center">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Application</th>
<th>Status</th>
</tr>
</thead>
<tbody ng-repeat="Proj in Projects">
<tr ng-click="getProject(Proj)">
<td width="50"> <span>{{Proj.id}}</span></td>
<td width="150"> <span>{{Proj.name}}</span></td>
<td width="150"> <span>{{Proj.application}}</span></td>
<td width="150"> <span>{{Proj.status}}</span></td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-5">
<br />
<br />
<div class="row">
<div class="col-md-12" ng-show="ShowInsertPanel">
<div class="x_panel">
<div class="x_title">
<h2>New Project <small></small></h2>
<ul class="nav navbar-right panel_toolbox">
<li class="pull-right">
<a class="close-link" data-ng-click="ShowInsertPanel = !ShowInsertPanel"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<div class="dashboard-widget-content">
<table class="table table" align="center">
<tbody>
<tr>
<th>ID</th>
<td style="vertical-align: middle;"><input type="text" id="p_id" readonly="readonly" ng-model="id" class="form-control" /></td>
</tr>
<tr>
<th>Name</th>
<td style="vertical-align: middle;"><input type="text" id="p_name" required ng-model="name" class="form-control" /></td>
</tr>
<tr>
<th>Application</th>
<td style="vertical-align: middle;"><input type="text" id="p_application" required ng-model="application" class="form-control" /></td>
</tr>
<tr>
<th>Status</th>
<td style="vertical-align: middle;">
<select id="cbStatus" required ng-model="status" class="form-control">
<option>Active</option>
<option>Inactive</option>
</select>
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="button" id="new" value="New" ng-click="clearProject()" class="btn btn-default" />
<input type="button" id="save" value="Save" ng-click="saveProject()" class="btn btn-success" />
<input type="button" id="delete" value="Delete" ng-click="deleteProject()" class="btn btn-danger" />
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<br />
@*</div>*@
</body>
<!-- /page content -->
[Plunker] (https://plnkr.co/)를 만들어서 어디서 붙어 있는지 알려주세요. – Win
이 링크를 확인 했습니까? http://ui-grid.info/docs/#/tutorial/106_binding 여기서 데이터를 바인딩하는 방법의 예를 보여줍니다. plunkr에 대한 링크도 있습니다. – superachu
[mcve]를 만드는 방법을 읽어보십시오. 이 질문에는 많은 코드가 있으며 격자가 있어야하는 위치, 필요한 열 등을 표시하지 않습니다. –