在表ASP.NET MVC和angularjs的TD值上创建超链接 [英] Create hyperlink on TD value of table ASP.NET MVC and angularjs
问题描述
大家好，
我正在编写一个ASP.Net MVC应用程序，其中我正在使用AngularJS和一些HTML脚本显示一个看起来像网格的表。当我为单元格显示表格和TD时，当我点击TD值时，我应该能够执行Action方法更新或编辑，我使用AngularJS控制器显示的TD值。我正在循环收集并在TD中显示值。现在在TD本身我应该有一个关于它的值的超链接，当点击时应该调用Controller的Update动作。
如果你给我另一个AngularJS控制器和Action来调用C＃Controller中的Update Action也没关系。任何类型的帮助可能是一个代码片段链接甚至建议将是非常有帮助的。在此先感谢。
这是我的观点
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.
推荐答案
为什么不试试Jquery Datatable呢。
这里有一个例子
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>
<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：函数（数据，类型，full）{
return'< a href ='+ data +'> View< / a>';
}
}，
{sName：名称}，
{sName：描述}，
]
}）; < / script>
('#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
[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此类用于将参数从datatable传递到服务器端函数，如页码，排序列等，
希望此帮助..
this class is used for passing the parameter from datatable to the server side function like page number,sorting column etc,
hope this help..
这篇关于在表ASP.NET MVC和angularjs的TD值上创建超链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
