angular js and ui grid

Question

data-ng-href = @Url.Action( Edit   Home )/{{row.Id}} target = _self > Edit how to open partial view using url.action

Bikesh Srivastava · Answer

Hi Can you explain your query??

Ajaykumar Singh · Answer

i am using angular ui grid on main page and Bootstrap modal for crud operation but for read write and view i have to open modal using ui grid cell template. //Controller using Demo.Models; using System; using System.Collections.Generic; using System.Linq; using System.Data.Entity; using System.Threading.Tasks; using System.Web; using System.Web.Mvc; using System.Net; namespace Demo.Controllers { public class CountryController : Controller { DemoDBEntities db = new DemoDBEntities(); //Get: Country public async Task ViewCountry() { //var country = db.tblMstCountry_CNT.Where(x => x.btCntActive == true).ToListAsync(); return View(await db.tblMstCountry_CNT.ToListAsync()); //return View(await country); } public JsonResult GetCountryList() { var result = db.tblMstCountry_CNT.Where(c => c.btCntActive == true); return Json(result JsonRequestBehavior.AllowGet); } //GET: Country/AddCountry public ActionResult AddCountry() { if (Request.IsAjaxRequest()) { return PartialView(AddCountry); } return PartialView(AddCountry); } //POST: Country/AddCountry // To protect from overposting attacks please enable the specific properties you want to bind to for // more details see http://go.microsoft.com/fwlink/?LinkId=317598. [HttpPost] //[ValidateAntiForgeryToken] public async Task AddCountry(tblMstCountry_CNT country) { if (ModelState.IsValid) { var codeExists = db.tblMstCountry_CNT .Where(x => x.vcCntCode == country.vcCntCode || x.vcCntName == country.vcCntName).ToList(); if (codeExists.Count() > 0) { return PartialView(AddCountry); } else { country.dtCntCreatedDate = DateTime.Now; db.tblMstCountry_CNT.Add(country); try { await db.SaveChangesAsync(); ModelState.Clear(); } catch (Exception ex) { } return PartialView(AddCountry); } //return PartialView(SuccessMessage Notification); //return PartialView(~/Views/Notification/SuccessMessage.cshtml); //return Json(new { success = true }); } return PartialView(AddCountry country); //return PartialView(AddCountry); //return RedirectToAction(AddCountry); } public JsonResult IsCountryCodeExists(string code) { var isCodeExist = db.tblMstCountry_CNT .Where(x => x.vcCntCode == code) .FirstOrDefault(); if (isCodeExist == null) return Json(true); else return Json(false); } //GET: Country/GetCountryById/1 public async Task GetCountryById(int? id) { if (Request.IsAjaxRequest()) { if (id == null) { return new HttpStatusCodeResult(HttpStatusCode.BadRequest); } tblMstCountry_CNT country = await db.tblMstCountry_CNT.FindAsync(id); if (country == null) { return HttpNotFound(); } return PartialView(_GetCountryById country); } return PartialView(_GetCountryById); } // GET: People/Edit/5 public async Task Edit(int? id) { //if (id == null) //{ // return new HttpStatusCodeResult(HttpStatusCode.BadRequest); //} if (Request.IsAjaxRequest()) { if (id { return new HttpStatusCodeResult(HttpStatusCode.BadRequest); } tblMstCountry_CNT country = await db.tblMstCountry_CNT.FindAsync(id); if (country == null) { return HttpNotFound(); } return PartialView(_Edit country); } return PartialView(_Edit); } // POST: People/Edit/5 // To protect from overposting attacks please enable the specific properties you want to bind to for // more details see http://go.microsoft.com/fwlink/?LinkId=317598. [HttpPost] [ValidateAntiForgeryToken] public async Task Edit(tblMstCountry_CNT country) { if (ModelState.IsValid) { db.Entry(country).State = EntityState.Modified; await db.SaveChangesAsync(); return Json(new { success = true }); } return PartialView(_Edit country); } //Get: CountryDelete/2 public async Task Delete(int? id) { if (Request.IsAjaxRequest()) { //if (id == null) //{ // return new HttpStatusCodeResult(HttpStatusCode.BadRequest); //} tblMstCountry_CNT country = await db.tblMstCountry_CNT.FindAsync(id); if (country == null) { return HttpNotFound(); } return PartialView(Delete country); } return PartialView(Delete); } // POST: Country/Delete/5 [HttpPost ActionName(Delete)] [ValidateAntiForgeryToken] public async Task DeleteConfirmed(int id) { tblMstCountry_CNT country = await db.tblMstCountry_CNT.FindAsync(id); db.tblMstCountry_CNT.Remove(country); await db.SaveChangesAsync(); return Json(new { success = true }); } } } //View @{ ViewBag.Title = ViewCountry; } View Region @using (Html.BeginForm()) { @Html.ActionLink(Add New Country AddCountry Country null new { data_modal =  id = btnCreate @class = btn btn-small btn-primary pull-right }) @Html.ActionLink(View GetCountryById Country null new { data_modal =  id = btnCreate @class = btn btn-small btn-primary pull-right }) @Html.ActionLink(Edit Edit Country null new { data_modal =  id = btnCreate @class = btn btn-small btn-primary pull-right }) @Html.ActionLink(Delete Delete Country null new { data_modal =  id = btnCreate @class = btn btn-small btn-primary pull-right }) Country ui-grid-pinning> } @section scripts{ @Scripts.Render(~/bundles/jqueryval) @Scripts.Render(~/bundles/modalform) //reload on form close //$(document).on('hide.bs.modal' '#myModal' function () { // //alert(''); // window.location.reload(); //}); //Module var app = angular.module('countryApp' ['ngAnimate' 'ngTouch' 'ui.grid' 'ui.grid.pinning' 'ui.grid.pagination' 'ui.grid.selection']); //Controller app.controller('CountryCtrl' ['$scope' '$http' 'uiGridConstants' function ($scope $http uiGridConstants) { $scope.regionForm = true; $scope.regionData = null; var paginationOptions = { pageNumber: 1 pageSize: 2 sort: null }; $scope.region = { vcRgnCode:  vcRgnName:  vcRgnDesc:  } $scope.clear = function () { $scope.Person.vcRgnCode = '' $scope.region.vcRgnName = '' $scope.region.vcRgnDesc = '' // //$scope.addnewdiv = false; //$scope.updatediv = false; }; $scope.gridOptions = { paginationPageSizes: [1 2 3] paginationPageSize: 2 useExternalPagination: true useExternalSorting: true enableColumnMenus: true //Remove Column menus like ascending descending etc. enableSorting: true //enable sorting for grid enableFiltering: true //enable giltering for grid //enableHiding: false //remove hide column options from grid column //enable hide column options require for each column columnDefs: [ { field: 'index' displayName: 'Id' width: '5%' } //{name: 'seq' field: 'name' displayName: 'Id' cellTemplate: ' {{grid.renderContainers.body.visibleRowCache.indexOf(row)}} ' width: '5%'} { field: 'inCntId' visible: false } //hiding autoIncrement column { field: 'vcCntCode' displayName: 'Code' width: '20%' enableHiding: false filterHeaderTemplate: ' ' } { field: 'vcCntName' displayName: 'Region Name' width: '20%' enableFiltering: false enableHiding: false } //enableSorting: false enable Sorting remove sort Options { field: 'vcCntnDesc' displayName: 'Description' width: '20%' enableHiding: false menuItems: [{ title: 'Grid Id' action: function () { alert('Grid ID: ' + this.grid.id); } }] } { field: 'btCntActive' displayName: 'IsActive' width: '20%' enableHiding: false } { name: 'Actions1' width: '30%' enableFiltering: false enableSorting: false enableColumnMenu: false cellTemplate: ' ' + ' View   ' + @*' View   ' +*@ ' Edit   ' + //' Delete ' ' Delete ' @*' Delete '*@ } { name: 'Actions' width: '30%' enableFiltering: false enableSorting: false enableColumnMenu: false cellTemplate: ' ' + ' {{row.entity.inCntId}} ' + ' @Ajax.ActionLink(Edit Edit Countrynull new { data_modal =  id = btnCreate})  ' + ' AjaxUpdate  ' + '@Html.ActionLink(Delete Delete Country null new { data_modal =  id = btnCreate })  '+ //' Edit   ' + ' ' } ] //pAGINATION onRegisterApi: function (gridApi) { $scope.gridApi = gridApi; //$scope.gridApi.core.refresh() $scope.gridApi.core.on.sortChanged($scope function (grid sortColumns) { if (sortColumns.length == 0) { paginationOptions.sort = null; } else { paginationOptions.sort = sortColumns[0].sort.direction; } getPage(); }); gridApi.pagination.on.paginationChanged($scope function (newPage pageSize) { paginationOptions.pageNumber = newPage; paginationOptions.pageSize = pageSize; getPage(); }); } }; var getPage = function () { var url; switch (paginationOptions.sort) { case uiGridConstants.ASC: url = @Url.Action(GetCountryList Country); break; case uiGridConstants.DESC: url = @Url.Action(GetCountryList Country); break; default: url = @Url.Action(GetCountryList Country); break; } $http.get(url) .success(function (data) { $scope.gridOptions.totalItems = data.length; $scope.gridOptions.data = data; var firstRow = (paginationOptions.pageNumber - 1) * paginationOptions.pageSize; $scope.gridOptions.data = data.slice(firstRow firstRow + paginationOptions.pageSize); angular.forEach(data function (data index) { //Adding index column in grid data[index] = index + 1 }); $scope.divRegion = true; }); }; getPage(); $scope.ViewCountry = function (row col) { var id = row.entity.inCntId; alert(id); } }]) } // AddCountry.cshtml @model Demo.Models.tblMstCountry_CNT @{ ViewBag.Title = AddCountry; } @*Jquery validation scripts*@ &times; Add new Country @using (Html.BeginForm()) { @*@Html.AntiForgeryToken()*@ @Html.ValidationSummary(true) @* *@ @Html.ValidationSummary(true  new { @class = text-danger }) @Html.LabelFor(model => model.vcCntCode htmlAttributes: new { @class = control-label col-md-3 }) @* *@ @Html.EditorFor(model => model.vcCntCode new { htmlAttributes = new { @class = form-control uppercase @maxlength = 5 } }) @* *@ @Html.ValidationMessageFor(model => model.vcCntCode  new { @class = text-danger }) @Html.LabelFor(model => model.vcCntName htmlAttributes: new { @class = control-label col-md-3 }) @Html.EditorFor(model => model.vcCntName new { htmlAttributes = new { @class = form-control @maxlength = 30 @id = aj title = ModelMetadata.FromLambdaExpression(model => model.vcCntName ViewData).Description } }) @Html.ValidationMessageFor(model => model.vcCntName  new { @class = text-danger }) @Html.LabelFor(model => model.vcCntDesc htmlAttributes: new { @class = control-label col-md-3 }) @Html.EditorFor(model => model.vcCntDesc new { htmlAttributes = new { id = aj @class = form-control } }) @Html.ValidationMessageFor(model => model.vcCntDesc  new { @class = text-danger }) @Html.LabelFor(model => model.btCntActive htmlAttributes: new { @class = control-label col-md-3 }) @Html.CheckBox(btCntActive true) @Html.ValidationMessageFor(model => model.btCntActive  new { @class = text-danger }) @* Add *@ Add @* *@ Cancel } //$(function () { // $('[data-toggle=tooltip]').tooltip() //}) //$('#Add').tooltip(options) $('#vcCntCode').poshytip({ content: 'Please Enter Code' className: 'tip-darkgray' showOn: 'focus' alignTo: 'target' alignX: 'right' alignY: 'center' offsetX: 5 showTimeout: 1 hideTimeout: 1 hideAniDuration: 100 }); $('#aj').poshytip({ content: 'Please Enter Name' className: 'tip-darkgray' showOn: 'focus' alignTo: 'target' alignX: 'right' alignY: 'center' offsetX: 5 showTimeout: 1 hideTimeout: 1 hideAniDuration: 100 }); $(document).ready(function () { $('#Add').click(function () { //alert(hi); //hiding toolTip message if page is refreshed //$('#textboxId').po $('#vcCntCode').poshytip('destroy'); $('#aj').poshytip('destroy'); }); }); //_GetCountryById @model Demo.Models.tblMstCountry_CNT @*Jquery validation scripts*@ &times; Country Detail @using (Html.BeginForm()) { @Html.ValidationSummary(true  new { @class = text-danger }) @Html.DisplayNameFor(model => model.vcCntCode) @Html.DisplayFor(model => model.vcCntCode) @Html.DisplayNameFor(model => model.vcCntName) @Html.DisplayFor(model => model.vcCntName) @Html.DisplayNameFor(model => model.vcCntDesc) @Html.DisplayFor(model => model.vcCntDesc) @Html.DisplayNameFor(model => model.btCntActive) @Html.DisplayFor(model => model.btCntActive.Value) Ok } @section scripts{ @Scripts.Render(~/bundles/jqueryval) @Scripts.Render(~/bundles/modalform) } //Delete.cshtml @model Demo.Models.tblMstCountry_CNT @* *@ &times; Are you sure you want to delete this Country? @Html.DisplayNameFor(model => model.vcCntCode) @Html.DisplayFor(model => model.vcCntCode) @Html.DisplayNameFor(model => model.vcCntName) @Html.DisplayFor(model => model.vcCntName) @Html.DisplayNameFor(model => model.vcCntDesc) @Html.DisplayFor(model => model.vcCntDesc) @using (Html.BeginForm()) { @Html.AntiForgeryToken() No } //_Edit.cshtml @model Demo.Models.tblMstCountry_CNT @{ ViewBag.Title = View Country; } &times; Edit Person @using (Html.BeginForm()) { @Html.AntiForgeryToken() @Html.ValidationSummary(true  new { @class = text-danger }) @Html.HiddenFor(model => model.inCntId) @Html.LabelFor(model => model.vcCntCode htmlAttributes: new { @class = control-label col-md-3 }) @Html.EditorFor(model => model.vcCntCode new { htmlAttributes = new { @class = form-control } }) @Html.ValidationMessageFor(model => model.vcCntCode  new { @class = text-danger }) @Html.LabelFor(model => model.vcCntName htmlAttributes: new { @class = control-label col-md-3 }) @Html.EditorFor(model => model.vcCntName new { htmlAttributes = new { @class = form-control } }) @Html.ValidationMessageFor(model => model.vcCntName  new { @class = text-danger }) @Html.LabelFor(model => model.vcCntDesc htmlAttributes: new { @class = control-label col-md-3 }) @Html.EditorFor(model => model.vcCntDesc new { htmlAttributes = new { @class = form-control } }) @Html.ValidationMessageFor(model => model.vcCntDesc  new { @class = text-danger }) @Html.LabelFor(model => model.btCntActive htmlAttributes: new { @class = control-label col-md-3 }) @Html.CheckBox(btCntActive true) @Html.ValidationMessageFor(model => model.btCntActive  new { @class = text-danger }) Cancel }