Below I have given the controller, model and view. After run, grid is displaying with values, but I need to edit the values and delete the values on same page. I have searched and seen some example, in that for edit, delete they creating separate index but mine need is to edit and delete should done on same page instead of another page. Please give me a solution.
Controller:
public ActionResult Index()
{
var PersonList = new List<Person>()
{
new Person(){Name="A", Age=20,Id =1},
new Person(){Name="B",Age=45,Id =2},
new Person(){Name="C", Age=30,Id =3},
new Person(){Name="D",Age=55,Id =4},
new Person(){Name="E", Age=30,Id =5},
new Person(){Name="F",Age=25,Id =6},
new Person(){Name="G", Age=30,Id =7},
new Person(){Name="H",Age=25,Id =8},
};
return View(PersonList);
}
Class :
public class Person
{
public string Name { get; set; }
public int Age { get; set; }
}
View :
#model IEnumerable<edit.Models.Person>
#{
ViewBag.Title = "Index";
}
<html>
<head>
<title>Index</title>
<style type="text/css">
.webGrid { margin: 4px; border-collapse: collapse; width: 300px; }
.header { background-color: #E8E8E8; font-weight: bold; color: #FFF; }
.webGrid th, .webGrid td { border: 1px solid #C0C0C0; padding: 5px; }
.alt { background-color: #E8E8E8; color: #000; }
.person { width: 200px; font-weight:bold;}
</style>
</head>
<body>
#{
var grid = new WebGrid(Model, canPage: true, rowsPerPage: 5);
grid.Pager(WebGridPagerModes.NextPrevious);
#grid.GetHtml(tableStyle: "webGrid",
headerStyle: "header",
alternatingRowStyle: "alt",
columns: grid.Columns(
grid.Column("Name", "Given Name", canSort: true, format:#<b>#item.Name</b>, style: "person"),
grid.Column("Age", "How Old?", canSort: true)
));
}
</body>
</html>
#Yasser, it is very dangerous to implement a DELETE via a GET link. A search engine crawling the page might delete all your information.
It is much better to implement a POST operation. Here is an example:
In the View:
#functions{
string Delete(dynamic p)
{
string actionController = Url.Action("Delete", "Admin", new {id=p.AccountId});
return "<form style='display:inline;' method='post' action='" + actionController + "'><input type='submit' value='Delete' onclick=\"return confirm('Are you sure?')\"/></form>";
}
}
...
grid.Column(header: "", format: p => Html.Raw(Delete(p)))
In the Controller:
[HttpPost]
public ActionResult Delete(int id)
{
PerformDelete(id);
return RedirectToAction("Index");
}
Here is something you can start with,
You will have to first generate two action link called "Edit" and "Delete" along with each record in the webgrid.
See this tutorial for that.
something like this
grid.Column(format: (item) => Html.ActionLink("Edit", "ActionName", new { param1 = "send id here", param2 = "xtra param" }))
grid.Column(format: (item) => Html.ActionLink("Delete", "ActionName2", new { param1 = "hello", param2 = "bye" }))
Hope this helps.
Here you go...
http://www.dotnet-tricks.com/Tutorial/mvc/E2S9150113-Enhancing-WebGrid-with-Insert-Update-and-Delete-Operations.html
I think you are looking for this.
You can try this inline editable gridview using asp.net mvc and knockoutjs:
www.anhbui.net/blog?id=kojs-1
Related
I have the following ActionLink:
#if (ViewBag.Locality != null)
{
<h4>Active Localities:</h4>
<table class="table table-hover">
#foreach (var loc in ViewBag.Locality)
{
<tr>
<td>#loc.Locality</td>
<td>#Html.ActionLink(" ", "RemoveActive", new { #class = "removeBtn" }, new { id = #loc.Locality })</td>
</tr>
}
</table>
}
However, the class removeBtn is not being applied as below from the CSS:
a.removeBtn
{
background:url('http://news.techgenie.com/files/symbols-delete.png') no-repeat top left;
display: block;
background-size: 20px;
width: 50px;
height: 20px;
text-indent: -9999px;
}
Additionally, upon click the id is not being passed to the controller method, the parameter is being passed as null
You are using actionlink in a wrong way,here is the demonstration of proper actionlink usage:
Html.ActionLink(article.Title, <--Text of actionlink
"Item", <-- ActionMethod
"Login", <-- Controller Name.
new { article.ArticleID }, <-- Route arguments.
new { #class="btn" } <-- htmlArguments.
)
Ans for ur question is:
#Html.ActionLink("// Title //", "RemoveActive", "// Your controller Name //" ,new { id = #loc.Locality },new { #class = "removeBtn" })
I'm trying to connect to database from jqgrid. I have this bug in the controller, does anyone know how to fix it?
Component LINQ to Entities does not recognize the method 'System.String ToString () "and you can not translate it to express the warehouse.
When given data rigidly works.
new {id = 1, cell = new[] {"1", "zzzzzz", "xxxxxx"}}
In addition, I would like to ask how to add edit to jqgrid?
View
<asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server">
Home Page
</asp:Content>
<asp:content contentplaceholderid="HeadContent" runat="server">
<link href="/Content/jquery-ui-1.8.7.css" rel="stylesheet" type="text/css" />
<link href="/Content/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="/Scripts/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="/Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#list").jqGrid({
url: '/Home/LinqGridData/',
datatype: 'json',
mtype: 'GET',
colNames: ['CatID', 'CatName', 'Age'],
colModel: [
{ name: 'CatID', index: 'CatID', width: 40, align: 'left' },
{ name: 'CatName', index: 'CatName', width: 40, editable: true, align: 'left' },
{ name: 'Age', index: 'Age', width: 400, align: 'left' }],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'Id',
sortorder: "desc",
viewrecords: true,
imgpath: '/scripts/themes/coffee/images',
caption: 'My first grid'
});
jQuery("#list").jqGrid('navGrid', "#pager", { edit: true, add: true, del: true });
jQuery("#list").jqGrid('inlineNav', "#pager");
});
</script>
</asp:content>
<asp:content contentplaceholderid="MainContent" runat="server">
<h2>My Grid Data</h2>
<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
</asp:content>
Model
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;
namespace MvcApplication2.Models
{
public class Cat
{
[Key]
public int CatID { get; set; }
public string CatName { get; set; }
public string Age { get; set; }
}
}
Controller
public ActionResult LinqGridData(string sidx, string sord, int page, int rows)
{
var context = new CatEntities();
var jsonData = new
{
total = 1, //todo: calculate
page = page,
records = context.Cats.Count(),
rows = (
from question in context.Cats
select new
{
i = question.CatID,
cell = new string[] { question.CatID.ToString(), question.CatName, question.Age }
}).ToArray()
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
}
I think it's because the question for a moment it is sent to the database,
You can't send this:
question.CatID.ToString()
to SQL Server because it doesn't know what to do with the method call. If you force enumeration of the set first you can make use of .NET methods in memory:
from question in context.Cats.ToList()
The problem is going to be balancing performance. If the Cats unfiltered set is large performance will suffer as the entire table is loaded into memory. In your case you probably won't notice a difference as you're invoking ToArray() later anyway.
If possible, use Skip() and Take() to implement paging and keep your sets small.
You should also consider storing the result in a variable so that you can reference it for your rows and records properties rather than hitting the context twice.
I have the following code :
#{
var db = Database.Open("WebPageMovies") ;
var selectCommand = "SELECT * FROM Movies";
var searchGenre = "";
var searchTitle = "";
var selectedData = "";
// search by Genre
if(!Request.QueryString["searchGenre"].IsEmpty() ) {
selectCommand = "SELECT * FROM Movies WHERE Genre = #0";
searchGenre = Request.QueryString["searchGenre"];
}
// searching by title ( but any word or words that match a title will work).
if(!Request.QueryString["searchTitle"].IsEmpty()){
selectCommand += " AND Title LIKE #1";
searchTitle = "%"+ Request.QueryString["searchTitle"] + "%";
}
// if both textboxes are empty, then the following is dispayed
if(searchGenre != null)
{
selectedData = db.Query(selectCommand, searchGenre,searchTitle);
}
else
{
selectedData = db.Query(selectCommand,searchTitle);
}
var grid = new WebGrid(source: selectedData, defaultSort: "Genre", rowsPerPage:3);
}
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
.grid { margin: 4px; border-collapse: collapse; width: 600px; }
.grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; }
.head { background-color: #E8E8E8; font-weight: bold; color: #FFF; }
.alt { background-color: #E8E8E8; color: #000; }
</style>
<meta charset="utf-8" />
<title>Movies</title>
</head>
</head>
<body>
<h1>Movies</h1>
<form method="get">
<div>
<label for="searchGenre">Genre to look for:</label>
<!-- in order for the textbox to rememebr what search value was entered, we need to provide a value attribute with that search value in our HTML-->
<input type="text" value="#Request.QueryString["searchGenre"]" name="searchGenre" value="" />
#*<input type="Submit" value="Search Genre" /><br/>*#
(Leave blank to list all movies.)<br/>
</div>
<div>
<label for="SearchTitle">Movie title contains the following:</label>
<input type="text" name="searchTitle" value="#Request.QueryString["searchTitle"]" />
<input type="Submit" value="Search Title" /><br/>
</div>
</form>
<div>
#grid.GetHtml(
tableStyle: "grid",
headerStyle: "head",
alternatingRowStyle: "alt",
columns: grid.Columns(
grid.Column("Title"),
grid.Column("Genre"),
grid.Column("Year")
)
)
</div>
</body>
</html>
Don't worry about the length of it, just focus on the razor code. In brief, I have two textboxes and one button. I would like to display a table when a user puts in a value in either the "Title" or the "Genre" or both the search boxes. However, I am getting the following error:
You error is related to the type of this variable that happens to be string:
var selectedData = "";
See that you're trying to assign the query result to it and db.Query returns an IEnumerable<dynamic>.
selectedData = db.Query(selectCommand, searchGenre,searchTitle);
Change that variable to:
IEnumerable<dynamic> selectedData;
I have a webgrid defined within a partial view. (This is an MVC 4 project.) The webgrid isn't the only thing in the partial view, so the webgrid is bound to a List within the model of the partial view.
The grid populates and sorts as it should when a column header is clicked, but when I repopulate the grid by a call to an action method (via a form post set up using Ajax.BeginForm) and then click on a column header, the grid contents disappear. (The action method queries a database using search criteria provided on the form by the user.)
What could be causing this? How can it be resolved?
The partial view starts with:
#model DonationImport.Models.GiftWithSplits
The contents of the partial view are within a form designated by:
#using (Ajax.BeginForm("SearchConstit", "Batch", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "constitSearchArea" }))
The WebGrid is defined as follows:
#{
var constitGrid = new WebGrid(source: Model.SearchResults, rowsPerPage: 100, ajaxUpdateContainerId: "constitGrid");
<div style="overflow-x: scroll; width: 100%;">
<div style="width: 1910px;">
#constitGrid.GetHtml(htmlAttributes: new { id = "constitGrid" },
columns: constitGrid.Columns(
constitGrid.Column(format: #<text><button onclick="selectConstituent('#item.Constituent_ID')" >select</button></text>, style: "searchResultsColumnWidth"),
constitGrid.Column("Constituent_ID", header: "ConstitID", style: "searchResultsColumnWidth", format: #<text>#Html.ActionLink((string)item.Constituent_ID, "PriorGifts", new { constitID = item.Constituent_ID }, new { target = "Prior Payments" })</text>),
constitGrid.Column("IsActive", header: "Active", style: "searchResultsColumnWidth"),
constitGrid.Column("LastName", header: "Last", style: "searchResultsColumnWidth"),
constitGrid.Column("FirstName", header: "First", style: "searchResultsColumnWidth"),
constitGrid.Column("MiddleInitial", header: "M.I.", style: "searchResultsNarrowColumnWidth"),
constitGrid.Column("Spouse", header: "Spouse", style: "searchResultsColumnWidth"),
constitGrid.Column("EmailAddress", header: "E-mail", style: "searchResultsWideColumnWidth"),
constitGrid.Column("AddressLine1", header: "Address Line 1", style: "searchResultsWideColumnWidth"),
constitGrid.Column("City", header: "City", style: "searchResultsWideColumnWidth"),
constitGrid.Column("State", header: "State", style: "searchResultsColumnWidth"),
constitGrid.Column("Zip", header: "Zip", style: "searchResultsWideColumnWidth"),
constitGrid.Column("SearchResultsText", header: "Search Results", style: "searchResultsWideColumnWidth"),
constitGrid.Column("IsActivePledge", header: "Pledge", style: "searchResultsNarrowColumnWidth"),
constitGrid.Column("ReceiptWarning", header: "Receipt Warning", style: "searchResultsWideColumnWidth"),
constitGrid.Column("IsMember", header: "Mbr", style: "searchResultsNarrowColumnWidth")),
alternatingRowStyle: "altrow")
</div>
</div>
}
When one clicks on:
<input type="submit" value="Search" />
within the form, the action method called is as follows:
[HttpPost]
public PartialViewResult SearchConstit(DonationImport.Models.GiftWithSplits g)
{
GiftWithSplits giftWithSplits = new GiftWithSplits(); // model (object) to be returned to the partial view
// send back gift data which we are currently using
giftWithSplits.GiftToVerify = g.GiftToVerify;
// search using provided data
string middleInitial = empty2null(g.GiftToVerify.SourceMiddleName);
if (!string.IsNullOrWhiteSpace(middleInitial))
middleInitial = middleInitial.Substring(0, 1); // just supply the initial, not the entire name
string zip = empty2null(g.GiftToVerify.SourceZip);
if (!String.IsNullOrWhiteSpace(zip))
zip = zip.Substring(0, 5); // we want only the first 5 digits of the zip
giftWithSplits.SearchResults = db.SearchDonor(null, g.GiftToVerify.DonationSourceCode, empty2null(g.SourceAcctMemo), null, empty2null(g.GiftToVerify.SourceLastName),
empty2null(g.GiftToVerify.SourceFirstName), middleInitial, empty2null(g.GiftToVerify.SourceAddress1),
empty2null(g.GiftToVerify.SourceCity), empty2null(g.GiftToVerify.SourceState), zip, empty2null(g.GiftToVerify.SourceCountry),
empty2null(g.GiftToVerify.SourceEmailAddress), empty2null(g.GiftToVerify.SourcePhone)).ToList();
if (giftWithSplits.SearchResults.Count == 0)
{
SearchDonor_Result emptyResult = new SearchDonor_Result();
emptyResult.Constituent_ID = "[None Found]";
giftWithSplits.SearchResults.Add(emptyResult);
}
return PartialView("_ConstitSearch", giftWithSplits);
}
As you can probably tell, I am a beginner in this MVC approach.
Additional thoughts (added later)...
It seems the source of the problem is that the links generated by the WebGrid HTML help for the column headers are based on the URL related to the action method which produced the grid. When the grid is first displayed, the link is: /Batch/Verify/34?sort=FirstName&sortdir=ASC since the grid was build as a part of the entire Verify view (coming out of the Verify action method). But, when one searches for manually-entered search criteria, the grid is build from the SearchConstit action method which populates only a partial view, so the URL in the column header link is now: /Batch/SearchConstit?sort=FirstName&sortdir=ASC.
Also, the "Search" button is associated with a POST because it needs to pass data from the form fields to use as search criteria; whereas, the WebGrid column headers are using a GET, and apparently there is no way to force them to POST. So, the problem seems to boil down to how to pass the search criteria from the form fields without posting the form.
I can think of a possible solution using Session variables, but I'm hesitant to do it that way.
Another option might be to abandon the use of the WebGrid.
Any ideas?
I found your question, when i was searching solution for same problem. I also faced same problem. I have used web grid to display data.
I have used filter/pagination. I used text box for search in grid also.
I am making post call for search. Webgrid was disappearing when i clicked filter and paging button. I google a lot and didn't find any solution. Finally i found solution so thought of posting.
You need to use get ajax call instead of post call that will solve you problem. Do not use beginform post for search.
Index.cshtml is my main view. Here i m rendering partial view (_GridPartialView.cshtml). Index view has one webgrid and search text box.
I am using ajax call to search in webgrid. Ajax code is mention below.
**Index.cshtml:**
#model List<Login>
#{
ViewBag.Title = "User";
}
<h2 style="background-color: grey">User</h2>
<table>
<tr>
<td>
<input type="text" id="txtSearch" placeholder=" Search..." onkeyup="Search()" />
#Html.ActionLink("Create New User", "CreateUser")</td>
</tr>
<tr>
<td>
<div id="divPartialView">
#Html.Partial("~/Views/Shared/_GridPartialView.cshtml", Model)
</div>
</td>
</tr>
</table>
<script type="text/javascript">
function Search() {
var searchVal = $("#txtSearch").val();
$.ajax({
type: "GET",
url: '/User/Search',
data: { searchString: searchVal },
dataType: 'html',
success: function (data) {
$('#divPartialView').html(data);
}
});
}
</script>
_GridUserPArtialView.cshtml: This is partial view used in index view.
#model List<Login>
<script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<style type="text/css">
.webGrid { margin: 4px; border-collapse: collapse; width: 500px; background-color:#FCFCFC;}
.header { background-color: #C1D4E6; font-weight: bold; color: #FFF; }
.webGrid th, .webGrid td { border: 1px solid #C0C0C0; padding: 5px; }
.alt { background-color: #E4E9F5; color: #000; }
.gridHead a:hover {text-decoration:underline;}
.description { width:auto}
.select{background-color: #389DF5}
</style>
#{
var grid = new WebGrid(null, canPage: true, rowsPerPage: 5, selectionFieldName: "selectedRow", ajaxUpdateContainerId: "grid");
grid.Pager(WebGridPagerModes.NextPrevious);
grid.Bind(Model, autoSortAndPage: true, rowCount: Model.Count);}
<div id="grid">
#grid.GetHtml(
tableStyle: "webGrid", mode: WebGridPagerModes.All,
firstText: "<< First",
previousText: "< Prev",
nextText: "Next >",
lastText: "Last >>",
headerStyle: "header",
alternatingRowStyle: "alt",
selectedRowStyle: "select",
columns: grid.Columns(
grid.Column("UserName", "User Name", style: "description"),
grid.Column("FirstName", "First Name"),
grid.Column("LastName", "Last Name"),
grid.Column("Action", format: #<text>
#if (#item.LoginUserName != "administrator"){
#Html.ActionLink("Edit", "Edit", new { id=item.LoginUserName})
#Html.ActionLink("Delete","Delete", new { id = item.LoginUserId},new { onclick = "return confirm('Are you sure you wish to delete this user?');" })
}
</text>, style: "color:Gray;" , canSort: false)
))
</div>
**UserController.cs**: This is Search action method inside. usercontroller. It is HTTPGET.
[HttpGet]
public PartialViewResult Search(string searchString)
{
List<Login> userListCollection = new List<Login_User>();
userListCollection = Login_User_Data.GetAllUsers();
if (Request.IsAjaxRequest())
{
if (!string.IsNullOrEmpty(searchString))
{
Log.Info("UserController: Index() Started");
var searchedlist = (from list in userListCollection
where list.FirstName.IndexOf(searchString,StringComparison.OrdinalIgnoreCase) >=0
|| list.LoginUserName.IndexOf(searchString, StringComparison.OrdinalIgnoreCase) >= 0
|| list.LastName.IndexOf(searchString, StringComparison.OrdinalIgnoreCase) >= 0
select list
).ToList();
return PartialView("~/Views/Shared/_GridPartialView.cshtml", searchedlist);
}
else
{
Log.Info("UserController: Search(Login_User user) Ended");
return PartialView("_GridPartialView", userListCollection);
}
}
else
{
return PartialView("_GridPartialView", userListCollection);
}
Log.Info("UserController: Search() Ended");
}
Hope this will help you. Let me know if you have any concern.
From: www.Dotnetmagics.com
The Solution is pretty simple, you need to do a GET, whenever you sort or page the web gird, it will try to get data and hit the a HttpGet Action, this will work as follows:
[HttpGet]
public ActionResult YourActionMethod()
{
return PartialView("YourView",YourModel);
}
The best part is, upon sorting, the request will send a parameter named as "sortBy" too, you can use this here and decide what you want to do with the binded Model with the grid. You can inspect what URL the Sort header will hit by using the "Developer Tools" in your browser.
Note : By default the action method it would be hitting would be same as the controller name.
I am able to use WebGrid in any controller like:
var grid = new WebGrid(emailsFetched, columnNames);
I had to add a reference in my ASP.NET MVC project to System.Web.Helpers for this.
But when I try to use this web grid in view directly (to avoid instantiation and other settings in controller) it says: The type or namespace 'WebGrid' cannot be found. Ok, I tried to add a reference here too:
#using System.Web.Helpers but this throws another issue:
There is no build provider registered for the extension '.cshtml'. You can register one in the <compilation><buildProviders> section in the machine.config or web.config. Make sure is has a BuildProviderAppliesToAttribute attribute which includes the value 'Web' or 'All'.
This is pretty strange... I've seen enough example on net which are using WebGrid and don't have to declare anything in the cshtml view...
Can you please tell me how to solve this? Or why I encounter this very ugly issue?
Finally I've been able to notice that this:
<assemblies>
<add assembly="System.Web.Helpers, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
</assemblies>
has to be added in web config, under system.web section, withing compilation tags so it will look like:
<system.web>
<compilation debug="true" targetFramework="4.0">
<assemblies>
<add assembly="System.Web.Helpers, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
</assemblies>
</compilation>
</system.web>
Try to follow the steps below that had been tested before in an ASP.NET MVC4 project without any problem.
1) Open NuGet Package Manager in Visual Studio and search “microsoft-web-helper” and install.
2) After installing it open web.config in your solution and change connectionStringName parameter for DefaultMembershipProvider, DefaultRoleProvider ve DefaultSessionProvider (if you do not, you might encounter 'DefaultConnection' was not found in the applications configuration or the connection string is empty.” error.
3) Rebuild your project and then use a smilar definition like below in your razor view.
Note: Change "Title", "Controller" and "Action" names in Html.ActionLinks according to your project.
View:
#{
var grid = new System.Web.Helpers.WebGrid(
source: Model,
columnNames: new List<string>() { "Title" },
ajaxUpdateContainerId: "myGrid",
defaultSort: "Name",
canPage: true,
canSort: true,
rowsPerPage: 5
);
grid.SortDirection = SortDirection.Ascending;
}
#grid.GetHtml(
tableStyle: "table", /*your class name for this property*/
headerStyle: "webgrid-header",/*your class name for this property*/
footerStyle: "webgrid-footer", /*your class name for this property*/
rowStyle: "webgrid-row-style", /*your class name for this property*/
alternatingRowStyle: "webgrid-alternating-row",/*your class name...*/ selectedRowStyle: "webgrid-selected-row",/*your class name for this property*/
firstText: "<<",
lastText: ">>",
mode: WebGridPagerModes.All,
fillEmptyRows: true,
columns: grid.Columns(
grid.Column("ApplicantID", "No", style: "span1", canSort: true),
grid.Column("Name", "Name", style: "span2", canSort: true),
grid.Column("Surname", "Surname", style: "span2", canSort: true),
grid.Column("Organization", "Org.", style: "span2", canSort: true),
grid.Column("MeetingId", "Meeting", style: "span1", canSort: true),
//some format usage samples:
//grid.Column("Email", "e-mail", style: "span1", canSort: true, format: ##item.Email),
//grid.Column("BirthDate", format: p=>p.BirthDate.ToShortDateString()),
//for using multiple Html.ActionLink in a column using Webgrid
grid.Column("Operations", format: (item) =>
new HtmlString(
Html.ActionLink("Show Details", "Edit", "Admin", new
{
applicantId = item.ApplicantID,
title = "Detail",
#class = "icon-link",
style = "background-image: url('../../Content/icons/detail.png')"
}, null).ToString() +
Html.ActionLink("Edit Record", "Edit", "Admin", new
{
applicantId = item.ApplicantID,
title = "Edit",
#class = "icon-link",
style = "background-image: url('../../Content/icons/edit.png')"
}, null).ToString() +
Html.ActionLink("Delete Record", "Edit", "Admin", new
{
applicantId = item.ApplicantID,
title = "Delete",
#class = "icon-link",
style = "background-image: url('../../Content/icons/delete.png')"
}, null).ToString()
)
)
),
numericLinksCount: 5
)
Here are the css classes below used in Razor. If you would like to use your css definitions simply change style properties to that of yours (Some properties are optional as the ones in the Razor View).
<style type="text/css">
.webgrid-operations { /*for limiting the width of Operations
menu used in the WebGrid*/
width: 65px;
}
.webgrid-header td {
text-align: left;
}
.webgrid-header th {
background-color: #EFEFEF;
margin-bottom: 2px;
}
.webgrid td {
padding-right: 15px;
}
.webgrid-footer td {
font-family: 'open_sanssemibold', sans-serif;
font-size: 1em;
text-align: right !important;
padding-right: 21px !important;
color: #000;
background-color: #EFEFEF;
}
.webgrid-footer td a {
text-align: right !important;
padding: 0 .4em 0 .4em;
font-size: .83em;
text-decoration: none;
color: #FFFFFF;
border: 1px solid #C0C0C0;
background-color: #808080;
}
.webgrid-footer td a:hover {
background-color: #6BBEC7;
}
.webgrid-footer td a.selected {
background-color: #f00;
color: #f00;
}
.webgrid a {
color: #fff;
}
.colRowButton {
width: 70px;
text-align: left;
}
.webgrid-row-style {
/*border-bottom: 1px solid #E8EEF4;*/
}
.webgrid-alternating-row td {
/*background-color: #f9f9f9;*/
}
.webgrid-selected-row {
/*font-weight: bold;*/
}
<style type="text/css">
a.icon-link {
background-color: transparent;
background-repeat: no-repeat;
background-position: 0px 0px;
border: none;
cursor: pointer;
width: 16px;
height: 16px;
margin-right: 8px;
vertical-align: middle;
}
.span5 {
width:380px
}
.span4 {
width:300px
}
.span3 {
width:220px
}
.span2 {
width:140px
}
.span1 {
width:60px
}
</style>
}
Ran into this issue. Can't really take credit but I uninstalled earlier version and reinstalled latest version of Microsoft ASP.NET MVC4 from Nuget and things are working for me. Hope this helps someone else. Tried all the solutions, but this was the only thing that worked. http://forums.asp.net/t/1823940.aspx?MVC4+WebGrid+problem+in+View+Razor+