Create hyperlink on TD value of table ASP.NET MVC and angularjs

Question

0.00/5 (No votes)

See more:

Hi All,

I am writing an ASP.Net MVC application in which I am displaying a Table which looks like a grid using AngularJS and some HTML Script. When I am displaying Table and TD for cell, when I click on TD value I should be able execute the Action method Update or Edit, TD value I am displaying by using AngularJS Controller. I am looping through collection and displaying the value in TD. Now in TD itself I should have a hyperlink on its value and when clicked that should call the Update action of the Controller.
If you give me another AngularJS Controller and Action to call the Update Action in C# Controller is also fine. Any type of help may be a code snippet a link or even suggestion is going to be greatly helpful. Thanks in advance.

Here is my View

@using MVCWithWebApiApp.Models;
@using System.Linq;

@model IEnumerable<MVCWithWebApiApp.Models.User>

@{
    ViewBag.Title = "Index";
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Users Details</title>
    <script src="~/Scripts/jquery-2.2.4.min.js"></script>
    <script src="~/Scripts/angular.min.js"></script>
    <script src="~/Scripts/myApp.js"></script>
</head>

<body>
    <h2>Index</h2>
   <div data-ng-app="myApp" data-ng-controller="userController">
        <table style="border:none 0px gray;">
            <tr>
              <td>
        <table style="border:solid 1px gray;">
            <tr>
                <td style="border:solid 1px gray;">User Id</td>
                <td style="border:solid 1px gray;">User Name</td>               
            </tr>
            <tr data-ng-repeat="usr in users">
                
                <td><a href="/User/UpdateUser/"> {{usr.UserId}} </a> </td>
                <td><a>{{usr.UserName}}</a></td>               
            </tr>
        </table>
                    
                </td>
                <td>
                     @Html.ActionLink("Create User", "CreateUser")
                </td>
            </tr>
        </table>
    </div>  
</body>
</html>

Here is my Controller:

using MVCWithWebApiApp.Models;
using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MVCWithWebApiApp.Controllers
{
    public class UserController : Controller
    {
        public ActionResult Index()
        {
            var dbContext = new MVCDBContext();

            List<User> listOfUsers;
            listOfUsers = dbContext.Users.ToList();

            return View(listOfUsers);
        }

        public ActionResult GetUsers()
        {
            var dbContext = new MVCDBContext();

            List<User> listOfUsers;
            listOfUsers = dbContext.Users.ToList();

            return Json(listOfUsers, JsonRequestBehavior.AllowGet);
        }

        //
        // GET: /User/Details/5
        public ActionResult Details(int id)
        {
           
            return View();
        }

        //
        // GET: /User/Create

        public ActionResult CreateUser()
        {
            User user = new User();
            user.UserId = 1;
            user.UserName = "Abdul";

            return View(user);
        }

        //
        // POST: /User/Create
        [HttpPost]
        public ActionResult CreateUser(FormCollection collection)
        {
            try
            {
                var dbContext = new MVCDBContext();
                User user = new User();
                user.UserId = 1;
                user.UserName = "Abdul";

                dbContext.Users.Add(user);
                dbContext.SaveChanges();

                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }

        //
        // GET: /User/Update/5
        public ActionResult UpdateUser(int id)
        {
            return View();            
        }

        //
        // POST: /User/Edit/5

        [HttpPost]
        public ActionResult UpdateUser(int id, FormCollection collection)
        {
            try
            {
                var dbContext = new MVCDBContext();

                User user = new User();
                user.UserId = 1;
                user.UserName = "Abdul";

                user = dbContext.Users.Where(i => i.UserId == 1).FirstOrDefault();
                user.UserName = "Abdul Aleem";

                dbContext.SaveChanges();

                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }

        //
        // GET: /User/Delete/5

        public ActionResult DeleteUser(int id)
        {
            return View();
        }

        //
        // POST: /User/Delete/5

        [HttpPost]
        public ActionResult DeleteUser(int id, FormCollection collection)
        {
            try
            {
                var dbContext = new MVCDBContext();

                User user = new User();

                IQueryable<User> Users = dbContext.Users.Where(i => i.UserId == 1);

                foreach (User a in Users)
                {
                    dbContext.Users.Remove(a);
                }

                dbContext.SaveChanges();

                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }
    }
}

What I have tried:

I am trying from google and various ways to fix it.

Posted 28-Jun-16 22:46pm

indian143

Updated 29-Jun-16 2:43am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Er Daljeet Singh · Answer 1 · 2016-06-29T02:43:00

why dont u try Jquery Datatable for this.

here is an example

<script scr="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>

HTML

<table id="myDataTable">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Description</th>            
        </tr>
    </thead>
    <tbody></tbody>
</table>

<script type="text/javascript">
    $('#myDataTable').dataTable({
        "bServerSide": true,
        "sAjaxSource": "Home/AjaxHandler",
        "bProcessing": true,
        "aoColumns": [
                                {
                                    "sName": "Id",
                                    "bSearchable": false,
                                    "bSortable": false,
                                    "mRender": function (data, type, full) {
                                        return '<a href="' + data + '">View</a>';
                                    }

                                },
                                { "sName": "Name" },
                                { "sName": "Description" },

                ]
    }); </script>

In controller

C#

[ActionLogAttribute]
   public class HomeController : Controller
   {
       public ActionResult Index()
       {
           return View();
       }


       public ActionResult AjaxHandler(jQueryDataTableParamModel param)
       {
           return Json(new
           {
               sEcho = param.sEcho,
               iTotalRecords = 97,
               iTotalDisplayRecords = 3,
               aaData = new List<string[]>() {
                   new string[] {"1", "Microsoft", "Redmond", "USA"},
                   new string[] {"2", "Google", "Mountain View", "USA"},
                   new string[] {"3", "Gowi", "Pancevo", "Serbia"}
                   }
           },
           JsonRequestBehavior.AllowGet);
       }
   }
   public class jQueryDataTableParamModel
   {
       /// <summary>
       /// Request sequence number sent by DataTable,
       /// same value must be returned in response
       /// </summary>
       public string sEcho { get; set; }

       /// <summary>
       /// Text used for filtering
       /// </summary>
       public string sSearch { get; set; }

       /// <summary>
       /// Number of records that should be shown in table
       /// </summary>
       public int iDisplayLength { get; set; }

       /// <summary>
       /// First record that should be shown(used for paging)
       /// </summary>
       public int iDisplayStart { get; set; }

       /// <summary>
       /// Number of columns in table
       /// </summary>
       public int iColumns { get; set; }

       /// <summary>
       /// Number of columns that are used in sorting
       /// </summary>
       public int iSortingCols { get; set; }

       /// <summary>
       /// Comma separated list of column names
       /// </summary>
       public string sColumns { get; set; }
   }

jQueryDataTableParamModel

this class is used for passing the parameter from datatable to the server side function like page number,sorting column etc,

hope this help..