i am developing an asp.net c# application using the twitter bootstrap framework.
i am trying not to add change or add any CSS so wanted to know the following
i have a asp.net gridview, which eventually renders as table. i wanted to know what is the css class to be applied for tables?
ASP.NET
C#
Twitter Bootstrap
<table cellspacing="0" rules="all" border="1" id="VideoList" style="border- collapse:collapse;">
<tr>
<th scope="col"> </th><th scope="col"> </th>
</tr><tr>
<td>Senior Care</td><td>
</td>
</tr><tr>
<td>Cardiac Catheterization Lab</td><td>
</td>
</tr>
</table>
any ideas will be much appreciated.
Well the minimum styling can be added just with the "table" class. That is:
MyGrid.CssClass = "table";
Optionally, you can include additional table formatting such as
MyGrid.CssClass = "table table-striped table-bordered";
To see some more noticeable styling
Related
<table class ="table" cellpadding="0" cellspacing="0">
<tr>
<th>Item Name</th>
<th>Price</th>
<th>Seafood</th>
<th>Has Gluten</th>
<th>Picture</th>
</tr>
#foreach (var items in #Model)
{
<tr>
<td>#items.ItemName</td>
<td>#items.Price</td>
<td>#items.IsSeafood</td>
<td>#items.HasGluten</td>
</tr>
}
I am currently learning how to develop using ASP.NET MVC.
I am trying to insert different images for each of my items. My foreach loop creates the table and items from a mysql database. I want to add the pictures next to the tables unless I'm unable to with the code I have.
You can use an <img src=""/> tag inside your last <td> to embed the image directly into the html.
Something like this, depending on how your image is stored.
<td><img src="#items.Url"/></td>
How can I sort/filter a table using asp.net? I'm not sure exactly how to go about it, do I have to use jquery. Researching but i'm not seeing exactly how to handle this.
<table>
<tr>
<th class="col-lg-3 tablehead">Expense Account</th>
<th class="col-lg-3 tablehead">Description</th>
<th class="col-lg-3 tablehead">Requisition Number</th>
<th class="col-lg-3 tablehead">Item Number</th>
</tr>
#for (int i = 0; i < Model.Count; i++)
{
<tr>
<td>#Html.CheckBoxFor(m => m[i].postTrnx)</td>
#* <td class="label">#Html.DisplayFor(m => m[i].requisitionNumber) </td>*#
#*<td class="label">#Html.DisplayFor(m => m[i].transactionDate)</td>*#
</tr>
foreach (var item in Model[i].items)
{
#Html.HiddenFor(m => item.description)
#Html.HiddenFor(m => item.expense_account)
#Html.HiddenFor(m => item.itemNumber)
<tr>
<td class="col-lg-3 tabledata">#item.expense_account.account_desc</td>
<td class="col-lg-3 tabledata">#item.description</td>
<td class="label">#Html.DisplayFor(m => m[i].requisitionNumber) </td>
<td class="col-lg-3 tabledata">#item.itemNumber</td>
<td class="col-sm-1 tabledata">#item.quantity</td>
<td class="col-sm-1 tabledata">#item.selecteduomtext </td>
<td class="col-sm-1 tabledata">#item.price</td>
<td class="col-sm-1 tabledata">#item.extended_cost</td>
<td class="label">#Html.DisplayFor(m => m[i].transactionDate)</td>
<td>#Html.ActionLink("Edit", "Edit", new { id = #item.lineNum, name = Model[i].docNumber })</td>
</tr>
}
}
</table>
To let the user sort a html table you can use a JQuery plugin. Since I only used datatables so far I'll give you an example with that. Please see the official website for installation instructions. The usage is very easy, all you need to do is call
<script>$('table').DataTable();</script>
At the end of your html file.
Make sure to include DataTable plugin as described in the documentation.
Since you want the user to be able to sort the table by clicking on a column you could use DataTables.net as others have suggested or you could do it yourself with the following general steps:
Add client side javascript click events to each column header element that you want to sort that will call the appropriate controller action.
Add server side controller action event to handle sorting the data on the server.
In the click event do an ajax partial page callback to call the server side action event.
In the controller action event Sort the data as needed.
In the client side ajax response update/load the new table element.
Track the current sort order of each column.
It is probably easier to use DataTables.net since doing it yourself might require much more research.
Some links to help:
partial view with jquery ajax
sorting searching ajax
updating data in table
jquery ajax
jquery load
How do I make the HTML table display 10 records only and whenever it goes beyond 10 it will display a link for pages below? e.g. "1, 2, 3.." And limits up to 7 links like how YouTube displays it (See image below)? I'm using ASP.Net MVC with Bootstrap by the way.
<table id="userTbl" onclick="getTblRec('userTbl,'userBody','0')" class="table-scroll table-striped bootgrid-table">
<thead>
<tr>
<th class="hidden">
#Html.DisplayNameFor(model => model.USR_ID)
</th>
<th class="hidden">
#Html.DisplayNameFor(model => model.USR_FNAME)
</th>
</tr>
</thead>
<tbody id="userBody">
#foreach (var item in Model)
{
<tr>
<td id="userId" class="hidden">
#Html.DisplayFor(modelItem => item.USR_ID)
</td>
<td>
#Html.DisplayFor(modelItem => item.USR_FNAME)
</td>
<td>
</tr>
}
</tbody>
</table>
YouTube sample pic:
There are two ways of implementing pagination, Server and Client side. Firstly server implementation, Load only the set of items that are to be shown for the page from the server along with the page options. Pagination at the client side, load the entire set of items and provide pagination with the support of table and/or other controls. Both the options have pros and cons. These links should get you started on the topic,link1 , link2.
Since you are using ASP.NET MVC, there is an build in helper named WebGrid for scenarios like paging. This is super easy to use and provides almost all the functionality that you may need.
You can also take a look at this beginner level walk through.
WebGrid in asp.net mvc (By Sheo Narayan).
Make a partial view for paging and call that partial view if records you have more than 10. i.e. in this link Paging
Or you can install this nuget also, and your wish style would be able to design this is link for nuget Nuget Packege
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Razor views as email templates
I am sending out an email to the user from within my service of my website.
I want to format this so that it shows nice and a specific way.
Here is what I have:
<table bgcolor="#FFE680" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="100%" height="51" valign="middle"><h1> <strong>[COMPANY] User ID Reminder </strong></h1></td>
<td align="right" valign="top" width="8"><img alt="" width="8" height="8" align="top" /></td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" valign="top" width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td colspan="1" align="left"></td>
</tr>
<tr>
<td align="left" valign="top" width="100%"><p> <br />
Dear [USERNAME], </p>
<p> In response to your request to be reminded of your User ID, please find below the information we have on file for you. If you didn't submit this request, ignore this email. </p>
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>Your User ID is: </td>
<td>[USERNAME]</td>
</tr>
<tr>
<td>Your registered email address is: </td>
<td>[EMAIL]</td>
</tr>
</tbody>
</table>
<p>
If you have forgotten your password, you can request it here.<br />
</p>
<p>
Thank you,<br />[COMPANY]
</p></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
Now my question isn't about the looks of the email but how do I put this as the body of my email while populating the appropriate fields?
I put it in resources as a string and I figured I'd just do a replace of the specific [fields]. This starting becoming tedious and seemed sloppy:
var body = SuburbanHUB.Properties.Resources.ForgotPasswordEmailBody.Replace("[USERNAME]", username).Replace("[EMAIL]")...
I'm sure there is a better way of doing this but I have not the experience.
=== CLARIFICATION ===
I am using razor to call a WCF service written in C#. The service that is being called is where the email is being sent from and not the view. I am using Razor with MVC with C# as the underlying code.
I'm in the middle of trying to do the same thing. We're using Razor templates to generate the email, and passing in a Model which has all the various variables to fill it out. This lets us include everything that Razor and MVC support, including #if and #Html.Partial, which lets us construct an email from pieces.
The answer we just went with involves running an internal MVC webserver, requesting pages from it with the Model as a parameter, and capturing the response text, but there's variants on my question that are more self contained. Take a look and see if any of the other answers or comments help you.
I had similar requirement and I end up using NVelocity and it worked great for me. Please see this article for a workthrough http://www.codeproject.com/Articles/12751/Template-merging-with-NVelocity-and-ASP-NET. You have to modify your fields in the template according to the velocity templating language. Download NVelocity from http://nvelocity.sourceforge.net/.
I am using jtemplate(jquery) , in which i have a htm file as below
<table width="100%" border="0" cellpadding="0" cellspacing="2">
<tr class="dark_color">
<th>
Offer
</th>
</tr>
{#foreach $T.TransList as record}
<tr class="{#if ($T.record$index % 2) == 0} white_left {#else} dark_color {#/if}">
<td class="offer" align="left">
{$T.record.OfferName}
</td>
</tr>
{#/for}
</table>
I am filling data using below code in my aspx page -
$("#jtemplateGrid_" + lastID).setTemplateURL('JTemplate/gridTemplate.htm');
// process the template
$("#jtemplateGrid_" + lastID).processTemplate(data)
;
Now i want to use global variable in my htm page.
How we can done the same.
Thanks in advance
What you could do is to send a get parameter with it and split it using JavaScript or whatever you'd like on the page to check up on it or use it.
Not clear on how it could be done otherwise but it is a possibility.