angular js and ui grid

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 <= 0)

{

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")

}

// AddCountry.cshtml

@model Demo.Models.tblMstCountry_CNT

ViewBag.Title = "AddCountry";

}

@*Jquery validation scripts*@

@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" })

@**@

}

//_GetCountryById

@model Demo.Models.tblMstCountry_CNT

@*Jquery validation scripts*@

@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)

}

@section scripts{

@Scripts.Render("~/bundles/jqueryval")

@Scripts.Render("~/bundles/modalform")

}

//Delete.cshtml

@model Demo.Models.tblMstCountry_CNT

@**@

@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()

}

//_Edit.cshtml

@model Demo.Models.tblMstCountry_CNT

ViewBag.Title = "View Country";

}

@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" })

}

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Bikesh Srivastava9y ago
Accepted answer
Hi,
Can you explain your query??
Ajaykumar Singh9y ago
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 <= 0)
{
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")
}

// AddCountry.cshtml
@model Demo.Models.tblMstCountry_CNT
@{
ViewBag.Title = "AddCountry";
}
@*Jquery validation scripts*@

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

@**@

@**@

}

//_GetCountryById
@model Demo.Models.tblMstCountry_CNT
@*Jquery validation scripts*@

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)

}
@section scripts{
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/modalform")
}

//Delete.cshtml
@model Demo.Models.tblMstCountry_CNT
@**@

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()

}

//_Edit.cshtml
@model Demo.Models.tblMstCountry_CNT
@{
ViewBag.Title = "View Country";
}

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

}

angular js and ui grid

Country

Add new Country

Country Detail

Are you sure you want to delete this Country?

Edit Person