Display ID on Row Click in MVC6 Grid in ASP.Net Core MVC

smalikbu...

SOLVED CLOSED ACTIVE ANSWERED
User: smalikbudhwani
Posted: on Aug 21, 2023 10:44 PM
Forum: ASP.Net Core MVC
Answer: 1
Views: 5275

Many thanks the paging works perfect,

ASP.Net Core MVC6 Grid Paging

My other query on edit/del is still pending, i need to call a javascript function on edit button sending the selected row id.

In asp.net mvc grid my render column works perfect

code that i'm using is:

RenderedAs(o => $"<a name=\"ed\" id=\"ed\" href='#' onclick=hideme(Add);Add(" + new { o.regid } + ") ><img src='../images/editicon.png' height='20px' width='20px' alt='Image picture' /></a>");

columns.Add()
.Encoded(false)
.Sanitized(false)
.SetWidth(40)
.RenderValueAs(o => @<a href="#" onclick='hideme(Add); Sendid(@o.Regid)' data-modal='' id="ss" name="ss" data-id="@o.Regid" class="btn btn-success ss"> Add <span class='glyphicon glyphicon-user'> </span> <img src="~/images/editicon.png" width="20" height="20" /> </a>);

@{
    ViewData["Title"] = "Referrals Page";
}
@using GridMvc
@using GridCore
@using Test.common.Resources
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@model IEnumerable<RegUserRegisterResource>
@using NonFactors.Mvc.Grid;<script>

<script>
function hideme(name) {
    alert("in hideme " + name);
}
function Add(Id) {
    alert("in here "+ Id);
}
</script>

<h1 style="text-align:center"> My Referrals</h1>
@(
Html.Grid(Model).Build(columns =>
{
    columns.Add(model => model.Firstname).Titled("User Name");
    columns.Add(model => model.Email).Titled("User Email");
    columns.Add(model => model.regid).Titled("Registration ID");
    columns.Add()
    .RenderedAs(o => $"<a name=\"ed\" id=\"ed\" href='#' onclick=hideme(Add);Add(" + new { o.regid } + ") ><img src='../images/editicon.png' height='20px' width='20px' alt='Image picture' /></a>");
}
).Sortable().Filterable().Empty("No data Found").Pageable(pager =>
{
    pager.PageSizes = new Dictionary<Int32, String> { { 0, "All" }, { 5, "5" }, { 10, "10" }, { 50, "50" } };
    pager.ShowPageSizes = false;
    pager.PagesToDisplay = 3;
    pager.CurrentPage = 1;
    pager.RowsPerPage = 5;
    })
)

dharmend...

0 3

Reply
ANSWER
User: dharmendr
Replied: on Aug 23, 2023 12:25 AM
Modified: on Aug 23, 2023 12:27 AM
Report

Hi smalikbudhwan...,

Refer below example.

Database

For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database

Model

public class Customer
{
    public string CustomerID { get; set; }
    public string ContactName { get; set; }
    public string Country { get; set; }
}

Controller

public class HomeController : Controller
{
    private DBCtx Context { get; }

    public HomeController(DBCtx _context)
    {
        this.Context = _context;
    }

    public IActionResult Index()
    {
        IQueryable<Customer> customers = this.Context.Customers;
        return View(customers);
    }
}

View

@model IQueryable<WebGrid_MVC_Core.Models.Customer>
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@using NonFactors.Mvc.Grid
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/css/mvc-grid/mvc-grid.css" rel="stylesheet" />
</head>
<body>
    @(Html.Grid(Model).Build(columns =>
        {
            columns.Add(model => model.CustomerID).Titled("Customer ID");
            columns.Add(model => model.ContactName).Titled("Customer Name");
            columns.Add(model => model.Country).Titled("Country");
            columns.Add().RenderedAs(o => Html.Raw($"<a name=\"ed\" id=\"ed\" href='javascript:void(0)' onclick=Edit('" + o.CustomerID + "')><img src='../images/editicon.png' height='20px' width='20px' alt='Image picture' /></a>"));
        })
        .Sortable().Filterable().Empty("No data Found")
        .Pageable(pager =>
        {
            pager.PageSizes = new Dictionary<Int32, String> { { 0, "All" }, { 5, "5" }, { 10, "10" }, { 50, "50" } };
            pager.ShowPageSizes = false;
            pager.PagesToDisplay = 3;
            pager.CurrentPage = 1;
            pager.RowsPerPage = 5;
        }))
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="~/js/mvc-grid/mvc-grid.js"></script>
    <script type="text/javascript">
        document.querySelectorAll(".mvc-grid").forEach(element => new MvcGrid(element));
        function Edit(Id) {
            alert(Id);
        }
    </script>
</body>
</html>

Screenshot

Display ID on Row Click in MVC6 Grid in ASP.Net Core MVC

ASP.Net Core MVC6 Grid Paging

Company

Explore

Follow us

Contact Us