This snippet is from my admin. I have a description field next to an image, and a demo of how'd that look below it.
Right now it works after a page refresh but i'd like it to work asynchronously using AJAX, so as the user types it updates the demo below the textarea.
#This is where you update the field
<tr><th>Description</th><td><%= f.text_area(:description) %></td></tr>
<tr><th>Demo</th>
<td>
<% if #org.images.present? %>
<table border="0">
<tr>
<td>
<%= featured_image_tag(#org, :type => 'organization') %>
</td>
<td style="vertical-align:top;padding-top:5px;padding-left:5px;">
<span class="font-avebook"><%= #org.description %> </span><br>
</td>
</tr>
</table>
<% else %>
You need to assoicate an image first before seeing the demo!
<% end %>
</td>
</tr>
To get the text to appear directly below at the same time as you're writing you need to use a jQuery Keyup event to submit the data. However, submitting the data after each keyup is not the best idea. If you want to get that effect, why don't you just do the whole thing with jQuery without actually saving the data. You can append the contents of the input to the element beside the image after each keyup. I've made a little demo below.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input type="text" id="copy_text">
<div id="mirror_paragraph"></div>
<script>
$("#copy_text").keyup(function () {
var txt = $("#copy_text").val();
$("#mirror_paragraph").html(txt);
});
</script>
</body>
</html>
Adapted to your code:
<tr>
<th>Description</th>
<td><%= f.text_area(:description), :id => "copy_text" %></td>
</tr>
<tr>
<th>Demo</th>
<td>
<% if #org.images.present? %>
<table border="0">
<tr>
<td>
<%= featured_image_tag(#org, :type => 'organization') %>
</td>
<td style="vertical-align:top;padding-top:5px;padding-left:5px;">
<span class="font-avebook" id="mirror_paragraph"><%= #org.description %> </span><br>
</td>
</tr>
</table>
<% else %>
You need to assoicate an image first before seeing the demo!
<% end %>
</td>
</tr>
<script>
$("#copy_text").keyup(function () {
var txt = $("#copy_text").val();
$("#mirror_paragraph").html(txt);
});
</script>
Related
I am trying to add aspx view in MVC instead of Razor View.
I'm getting error at line <%# Html.DisplayNameFor(model => model.Name) %>
Parser Error Message: The server block is not well formed. <--- In browser
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="List.aspx.cs" Inherits="WebApplication1.Views.EmployeesPart25MVC.List" %> <%# Import Namespace="WebApplication1" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">
<title></title> </head> <body>
<form id="form1" runat="server">
<div>
<h2>
Gomathi
</h2>
<table class="table">
<tr>
<th>
<%# Html.DisplayNameFor(model => model.Name) %>
</th>
<th>
<%# Html.DisplayNameFor(model => model.Gender) %>
</th>
<th>
<%# Html.DisplayNameFor(model => model.City) %>
</th>
<th>
<%# Html.DisplayNameFor(model => model.DepartmentsPart25MVC.Name) %>
</th>
<th></th>
</tr>
<%#foreach (var item in Model)
{ %>
<tr>
<td>
<%# Html.DisplayFor(modelItem => item.Name) %>
</td>
<td>
<%# Html.DisplayFor(modelItem => item.Gender) %>
</td>
<td>
<%# Html.DisplayFor(modelItem => item.City) %>
</td>
<td>
<%# Html.DisplayFor(modelItem => item.DepartmentsPart25MVC.Name) %>
</td>
<td>
<%# Html.ActionLink("Edit", "Edit", new { id=item.EmployeeID }) |
Html.ActionLink("Details", "Details", new { id=item.EmployeeID }) |
Html.ActionLink("Delete", "Delete", new { id=item.EmployeeID }) %>
</td>
</tr>
<%# } %>
</table>
</div>
</form> </body>
</html>
In aspx engine <%# %> is only used for page directives, and cannot be used elsewhere.
For all the HTML output you would normally use <%= %>:
<%= Html.DisplayNameFor(model => model.Name) %>
and for code blocks just <% %>:
<% foreach (var item in Model)
{ %>
There is a "Weekly Monitoring tool" on the intranet I'm working on that displays the following information (supposedly) in a grid : the company, the employee (name), his expected work time, and his current weekly activity.
The Data is saved and filtered week by week, it's all sent to my WeeklyMonitoring.aspx view.
The issue is that I can't seem to find a way to display it as a grid, cleanly, separating each information to make it easier to read.
Here is the relevant part of my View :
<table width="300" border="1" cellpadding="0" cellspacing="0">
<tr>
<th>Company</th>
<th>Employee</th>
<th>Expected Time</th>
<th>Activity</th>
</tr>
<%
int i = 0;
foreach (var name in ViewBag.Names)
{
if ((string)ViewBag.Names[i] != null)
{ %>
<td><%= (string)ViewBag.Company[i]%></td>
<td><%= (string)ViewBag.Names[i]%></td>
<td> --- </td>
<td><%= (string)ViewBag.RecTime[i]%></td>
<%} %>
<%i++; %>
<%
}
%>
</table>
It does display it as a board, separating the information by spaces, how may I create a clean looking grid as it is supposed to be?
JQuery DataTables in an awesome plugin for this and it's very simple to use. First, add the plugin:
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>
then Format the table properly:
<table id ="table_id" class="display">
<thead>
<tr>
<th>Company</th>
<th>Employee</th>
<th>Expected Time</th>
<th>Activity</th>
</tr>
</thead>
<%
int i = 0;
foreach (var name in ViewBag.Names)
{
<tr>
if ((string)ViewBag.Names[i] != null)
{ %>
<td><%= (string)ViewBag.Company[i]%></td>
<td><%= (string)ViewBag.Names[i]%></td>
<td> --- </td>
<td><%= (string)ViewBag.RecTime[i]%></td>
<%} %>
<%i++; %>
</tr>
<% } %>
Now, apply the DataTable properties on the table:
<script>
$(document).ready(function () {
$('#table_id').DataTable();
});
</script>
and see the charm.
<%# Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<%# Import Namespace="PagedList.Mvc" %>
<%# Import Namespace="PagedList" %>
<!DOCTYPE html>`enter code here`
<html>
<head runat="server">
<title>ViewPage1</title>
<link href="../../Public/css/PagedList.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
<table class="tableEmptyStyle">
<tr>
</tr>
</table>
<table>
<tr>
<th>
Code
</th>
<th>
Name
</th>
</tr>
<%
foreach (var item in ViewBag.OnePageDivisions)
{ %>
<tr>
<td>
<%: item.Code %>
</td>
<td>
<%: item.Name %>
</td>
</tr>
<% Html.PagedListPager((IPagedList)ViewBag.OnePageDivisions, page => Url.Action("Index", new { page = page }), PagedListRenderOptions.PageNumbersOnly); %>
<% } %>
</table>
Then from the controller I am getting the list and
ViewBag.OnePageDivisions = allList
I am able to get the list and display it,
the problem is the page numbers below are not showing.
The CSS, "PagedList.css" was taken from the package. Any help is appreciated
I am using MVC 3, PagedList 1.15.0.0 and PagedList.Mvc 3.18.0.0
Change
<% Html.PagedListPager((IPagedList)ViewBag.OnePageDivisions, page => Url.Action("Index", new { page = page }), PagedListRenderOptions.PageNumbersOnly); %>
To
<%: Html.PagedListPager((IPagedList)ViewBag.OnePageDivisions, page => Url.Action("Index", new { page = page }), PagedListRenderOptions.PageNumbersOnly) %>
I have a show page /invoices/show that displays contents of my Invoice
<p id="notice"><%= notice %></p>
<div class="row">
<div class="span7">
<h2 style="text-align:center;"> CONSTRUCTION LTD </h2>
<h3 style="text-align:center;">OHIO</h3>
<address style="text-align:center;"> Plot 10<br/>
</address>
<h3 style="text-decoration:underline; text-align:center;"> UTILITY BILL </h3>
<h4 style="text-decoration:underline; text-align:center;"> TAX INVOICE </h4>
<table>
<td valign="top" align="left">
<div style="float:left; width:450px;">No: <%= #invoice.id %></div>
<div style="float:right"> Date: <%= #invoice.invoice_date %></div>
</td>
</table>
<P></P>
<P></P>
<div>To: <%= #invoice.customer.name%></div>
<p></p>
<table class="table table-bordered table-condensed">
<thead>
<tr class="success">
<th><label class="control-label">Description</label></th>
<th><label class="control-label">Rate</label></th>
<th><label class="control-label">Tax</label></th>
<th><label class="control-label">Amount</label></th>
</tr>
</thead>
<tbody>
<% #invoice.invoice_items.each do | item| %>
<tr class="controls">
<td><%= item.description %></td>
<td><%= item.rate %></td>
<td><%= item.tax_amount %></td>
<td><%= item.amount %></td>
</tr>
<tr>
<td colspan="3" align="left"><strong>TOTAL:</strong></td>
<td colspan="1"><%= item.amount %></td>
</tr>
<% end %>
</tbody>
</table>
<div class="row">
<div class="span3">
<table>
<tbody>
<tr>
<td> <b>For Landlord</b></td></tr>
<tr> <td>Approved by:</td></tr>
<tr> <td>Sign:</td></tr>
</tbody>
</table>
</div>
<div class="span3" style="position: relative; align:left; left:150px;">
<table>
<tbody>
<tr>
<td> <b>For Tenant</b></td></tr>
<tr> <td>Approved by:</td></tr>
<tr> <td>Sign:</td></tr>
</tbody>
</table>
</div>
</div>
<br/>
<br />
<div>
<small><strong>Terms and Conditions</strong></small>
<table>
<tbody>
<tr>
<td><%= Settings.invoice_terms%></td>
</tr>
</tbody>
</table>
</div>
<br />
<div class="form actions">
<p>
<%= link_to t('.edit', :default => t("helpers.links.edit")),
edit_invoice_path, :class => 'btn btn-primary' %>
</p>
</div>
</div>
</div>
In my application.html.erb, I have this for CSS
<%= stylesheet_link_tag "application", :media => "all" %>
More to that, my application file has a nav-bar element.
I am trying to print the Invoices/show.html.erb page by going to the print option in a browser, however, I do not want it to include the nav-bar element in my application.html.erb file and the edit button in invoices/show.html.
I am using Twitter bootstrap, how can i go about this?
Here's one solution I've thought of:
What you can do is, in your show view (or the application layout) add a predicate:
if params[:controller] == "invoice" && params[:action] == "show"
# do or show whatever you want
end
Or you could do add a different layout to your views/layouts folder. Then in your controllers/invoice_controller
def show
# ...
render layout: 'a_different_layout_for_invoices'
end
I'm using Steve Sanderson's BeginCollectionItem helper with ASP.NET MVC 2 to model bind a collection if items.
That works fine, as long as the Model of the collection items does not contain another collection.
I have a model like this:
-Product
--Variants
---IncludedAttributes
Whenever I render and model bind the Variants collection, it works jusst fine. But with the IncludedAttributes collection, I cannot use the BeginCollectionItem helper because the id and names value won't honor the id and names value that was produced for it's parent Variant:
<div class="variant">
<input type="hidden" value="bbd4fdd4-fa22-49f9-8a5e-3ff7e2942126" autocomplete="off" name="Variants.index">
<input type="hidden" value="0" name="Variants[bbd4fdd4-fa22-49f9-8a5e-3ff7e2942126].SlotAmount" id="Variants_bbd4fdd4-fa22-49f9-8a5e-3ff7e2942126__SlotAmount">
<table class="included-attributes">
<input type="hidden" value="0" name="Variants.IncludedAttributes[c5989db5-b1e1-485b-b09d-a9e50dd1d2cb].Id" id="Variants_IncludedAttributes_c5989db5-b1e1-485b-b09d-a9e50dd1d2cb__Id" class="attribute-id">
<tr>
<td>
<input type="hidden" value="0" name="Variants.IncludedAttributes[c5989db5-b1e1-485b-b09d-a9e50dd1d2cb].Id" id="Variants_IncludedAttributes_c5989db5-b1e1-485b-b09d-a9e50dd1d2cb__Id" class="attribute-id">
</td>
</tr>
</table>
</div>
If you look at the name of the first hidden field inside the table, it is Variants.IncludedAttributes - where it should have been Variants[bbd4fdd4-fa22-49f9-8a5e-3ff7e2942126].IncludedAttributes[...]...
That is because when I call BeginCollectionItem the second time (On the IncludedAttributes collection) there's given no information about the item index value of it's parent Variant.
My code for rendering a Variant looks like this:
<div class="product-variant round-content-box grid_6" data-id="<%: Model.AttributeType.Id %>">
<h2><%: Model.AttributeType.AttributeTypeName %></h2>
<div class="box-content">
<% using (Html.BeginCollectionItem("Variants")) { %>
<div class="slot-amount">
<label class="inline" for="slotAmountSelectList"><%: Text.amountOfThisVariant %>:</label>
<select id="slotAmountSelectList"><option value="1">1</option><option value="2">2</option></select>
</div>
<div class="add-values">
<label class="inline" for="txtProductAttributeSearch"><%: Text.addVariantItems %>:</label>
<input type="text" id="txtProductAttributeSearch" class="product-attribute-search" /><span><%: Text.or %> <a class="select-from-list-link" href="#select-from-list" data-id="<%: Model.AttributeType.Id %>"><%: Text.selectFromList.ToLowerInvariant() %></a></span>
<div class="clear"></div>
</div>
<%: Html.HiddenFor(m=>m.SlotAmount) %>
<div class="included-attributes">
<table>
<thead>
<tr>
<th><%: Text.name %></th>
<th style="width: 80px;"><%: Text.price %></th>
<th><%: Text.shipping %></th>
<th style="width: 90px;"><%: Text.image %></th>
</tr>
</thead>
<tbody>
<% for (int i = 0; i < Model.IncludedAttributes.Count; i++) { %>
<tr><%: Html.EditorFor(m => m.IncludedAttributes[i]) %></tr>
<% } %>
</tbody>
</table>
</div>
<% } %>
</div>
</div>
And the code for rendering an IncludedAttribute:
<% using (Html.BeginCollectionItem("Variants.IncludedAttributes")) { %>
<td>
<%: Model.AttributeName %>
<%: Html.HiddenFor(m => m.Id, new { #class = "attribute-id" })%>
<%: Html.HiddenFor(m => m.ProductAttributeTypeId) %>
</td>
<td><%: Model.Price.ToCurrencyString() %></td>
<td><%: Html.DropDownListFor(m => m.RequiredShippingTypeId, AppData.GetShippingTypesSelectListItems(Model.RequiredShippingTypeId)) %></td>
<td><%: Model.ImageId %></td>
<% } %>
As you are using MVC 2 and EditorFor, you shouldn't need to use Steve's solution, which I believe is just a work around for MVC 1. You should just be able to do something like:
<% for (int i = 0; i < Model.Variants.Count; i++) { %>
<%= Html.DisplayFor(m => m.Variants[i].AttributeType.AttributeTypeName) %>
<% for (int j = 0; j < Model.Variants[i].IncludedAttributes.Count; j++) { %>
<%= Html.EditorFor(m => m.Variants[i].IncludedAttributes[j]) %>
<% } %>
<% } %>
Please note that the use of the indexes ...[i]...[j]... is important and is how MVC will know how to render the Id's and names correctly.