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", "Country",null, 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 }

angular js and ui grid

Insert Link

Embed YouTube Video

Table Options

Insert Image

Answers (2)