How do I convert this gridview in razor syntax, I have curly brackets inside (data => { %>) ?
<%Html.GridView<Employee>(
Model,
data => { %>
<table class="grid" cellpadding="0" cellspacing="0">
<tr>
<th> </th>
<th> </td>
<th> </td>
<th>Name</th>
<th>E-mail</th>
</tr>
<% },
(item, css) => { %>
<tr class="<%=css%>">
<td><%=Html.ActionImage("Edit", "Home", new { Id = item.Id }, "~/Content/edit.gif", "Edit")%></td>
<td><%=Html.ActionImage("Delete", "Home", new { Id = item.Id }, "~/Content/delete.gif", "Delete")%></td>
<td> </td>
<td><%=item.Name%></td>
<td><%=item.Email%></td>
</tr>
<% },
"item",
"item-alternating",
item => { %>
<%using (Html.BeginForm("Save", "Home", new { Id = item.Id }, FormMethod.Post, new { id = "editForm" })) {%>
<tr class="item-edit">
<td><input type="image" runat="server" id="save" src="~/Content/ok.gif" alt="Update" /></td>
<td><%=Html.ActionImage("Index", "Home", null, "~/Content/cancel.gif", "Cancel")%></td>
<td> </td>
<td><%=Html.TextBox("Name", item.Name)%></td>
<td><%=Html.TextBox("Email", item.Email)%></td>
</tr>
<% } %>
<% },
data => { %>
<tr>
<td colspan="5"><hr /></td>
</tr>
<tr class="paging">
<td colspan="5">
<% if (data.PagedList.IsPreviousPage) { %>
<%=Html.ActionImage("Show", "Home", new { page = data.PagedList.PageIndex - 1 }, "~/Content/previous.gif", "Previous page")%>
<% } %>
<%=data.PagedList.TotalCount.ToString()%> records
<% if (data.PagedList.IsNextPage) { %>
<%=Html.ActionImage("Show", "Home", new { page = data.PagedList.PageIndex + 1 }, "~/Content/next.gif", "Next page")%>
<% } %>
</td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<%using (Html.BeginForm("Add", "Home", FormMethod.Post, new { id = "addForm" })) {%>
<tr>
<th> </th>
<th> </td>
<th> </td>
<th>Name</th>
<th>E-mail</th>
</tr>
<tr>
<td><input type="image" runat="server" id="add" src="~/Content/add.gif" alt="Add" /></td>
<td> </td>
<td> </td>
<td><%=Html.TextBox("Name", "")%></td>
<td><%=Html.TextBox("Email", "")%></td>
</tr>
<% } %>
</tr>
</table>
<% });%>
Razor replaces the brackets <% ... %> with just the # symbol. So for example, this line
<%=Html.TextBox("Email", "")%>
becomes
#Html.TextBox("Email", "")
That's basically it. You'll just have to remove ALL of the <% ... %> brackets.
Related
I created view with form that included table with rows that initialize from list, the table designed with jQuery.datatables 1.10.15.
When I tried to send the form then the table not send, I get null in the list parameter in the action controller.
View page:
#model List<SendMails.ViewModels.ViewModelDetailsFile>
#{
ViewBag.Title = "UpdateItems";
}
#using (Html.BeginForm("UpdateItems", "Home", FormMethod.Post)) {
#Html.AntiForgeryToken()
<table id="DetailsExcelChoose">
<thead>
<tr>
<th class="RightToLeft wideIndexCol">IndexRow</th>
<th class="RightToLeft">InvoiceNumber</th>
<th class="RightToLeft wideIndexCol">NumberClient</th>
<th class="RightToLeft ">NameClient</th>
<th class="RightToLeft wideIndexCol">Amount</th>
<th class="RightToLeft wideIndexCol">Email</th>
<th class="RightToLeft wideIndexCol">ContactPerson</th>
<th class="RightToLeft ">Details</th>
</tr>
</thead>
<tbody name="iObjsUpdate">
#if (Model != null)
{
for (var i = 0; i < Model.Count(); i++)
{
<tr>
<td name="IndexRow">#Model[i].IndexRow</td>
<td name="InvoiceNumber">#Model[i].InvoiceNumber</td>
<td name="NumberClient">#Model[i].NumberClient</td>
<td name="NameClient">#Model[i].NameClient</td>
<td name="Amount">#Model[i].Amount</td>
<td name="Email"><input type="email" id="Email" name="Email" value=#Model[i].Email /></td>
<td name="ContactPerson"><input type="text" id="ContactPerson" name="ContactPerson" value=#Model[i].ContactPerson></td>
<td name="Details">#Model[i].Details</td>
</tr>
}
}
</tbody>
</table>
<div class="form-group row">
<button type="submit" class="btn btn-primary">send</button>
</div>
}
JS file:
$(document).ready(function () {
var dataTable = $("#DetailsExcelChoose").DataTable();
});
Controller action:
[HttpPost]
[ValidateAntiForgeryToken]
[Route("UpdateItems")]
public async Task<ActionResult> UpdateItems(List<ViewModelDetailsFile> iObjsUpdate)
{
/// iObjsUpdate is null
}
I read that need to set the name attribute for the asp.net know what the columns are...
But all my searching in google not success.
If I didn't clear what I want so... I want to send the rows details to controller action as list of object (yes I know that I can do this in ajax but I want in this way)
For send or post row details to controller you have to use hidden fields on .cshtml or view page.
try this
for (var i = 0; i < Model.Count(); i++)
{
<tr>
#Html.HiddenFor(x => x.Model[i].IndexRow)
#Html.HiddenFor(x => x.Model[i].InvoiceNumber)
#Html.HiddenFor(x => x.Model[i].NumberClient)
#Html.HiddenFor(x => x.Model[i].NameClient)
#Html.HiddenFor(x => x.Model[i].Amount)
#Html.HiddenFor(x => x.Model[i].Email )
#Html.HiddenFor(x => x.Model[i].ContactPerson)
#Html.HiddenFor(x => x.Model[i].Details)
<td name="IndexRow">#Model[i].IndexRow</td>
<td name="InvoiceNumber">#Model[i].InvoiceNumber</td>
<td name="NumberClient">#Model[i].NumberClient</td>
<td name="NameClient">#Model[i].NameClient</td>
<td name="Amount">#Model[i].Amount</td>
<td name="Email"><input type="email" id="Email" name="Email" value=#Model[i].Email /></td>
<td name="ContactPerson"><input type="text" id="ContactPerson" name="ContactPerson" value=#Model[i].ContactPerson></td>
<td name="Details">#Model[i].Details</td>
</tr>
}
I use the nested forms to add a line of form for multiple data entry.
However all the style is lost on the generated forms using link_to.
Looking at the generated code, all the styles are there, but when I add the fields, it doesn't render the style.
I tried the partial that is being rendered as both table row and div row (bootstrap). The initially generated rows look perfect but the added row are all scrunched up and doesn't align with anything.
Thanks!
In application_helper
def link_to_add_fields(name, f, association, readonly)
new_object = f.object.send(association).klass.new
id=new_object.object_id
fields = f.fields_for(association, new_object, child_index: id) do |builder|
render("my partial form", f: builder, readonly: readonly)
end
link_to(name, "#", class: "add_fields", data: {id: id, fields: fields.gsub("\n", "")})
In my new.html
<table class="table table-bordered">
<thead>
<tr>
<th>Customer</th>
<th>Description</th>
<th>Notes</th>
<th></th>
</tr>
</thead>
<tbody>
<%= f.fields_for :my_association do |builder| %>
<%= render "my_partial", f: builder%>
<% end %>
<%= link_to_add_fields "Add New Line", f, :my_association, :readonly=>false%>
In my_partial
<tr>
<td><%= f.collection_select(:customer_id, #customers, :id, :fullname, :include_blank=>'Select') %>
<%= f.hidden_field(:id)%></td>
<td> <%= f.text_field(:description) %></div>
<td> <%= f.text_area(:note, :size=> "25x1") %></td>
<td> <%= f.hidden_field :_destroy %><%= link_to "remove", "#", class: "remove_fields"%> </td>
</tr>
This seems like a pure HTML/CSS issue.
Its <thead> instead of <theader> and wrap the partial in <tbody>
Try this:
<table class="table table-bordered">
<thead>
<tr>
<th>Customer</th>
<th>Description</th>
<th>Notes</th>
<th></th>
</tr>
</thead>
<tbody>
<%= f.fields_for :my_association do |builder| %>
<%= render "my_partial", f: builder%>
<% end %>
</tbody>
</table>
<div class="container-fluid">
<div class="row-fluid"><td colspan=6><%= link_to_add_fields "Add New Line", f, :my_association, :readonly=>false%></div></td>
</div>
I had to wrap my partial in it's own table and take out the row surrounding my call to the partial. This breaks the table but it's the only way thing will line up.
new.html.erb
<table class="table table-striped">
<thead>
<tr>
<th>Customer</th>
...
<th>Notes</th>
<th>*</th>
</tr>
</thead>
<tbody>
<%= f.fields_for :my_association do |builder| %>
<%= render "my_partial", f: builder%>
<% end %>
<tr>
<td colspan=6>
<%= link_to_add_fields "Add New Line", f, :my_association, :readonly=>false%>
</td></tr>
</tbody>
</table>
In my paritial
<table class="table table-striped">
<tbody>
<tr style="width:100%">
<td><%= f.collection_select(:customer_id, #customers, :id, :fullname, :include_blank=>'Select') %>
...
<td> <%= f.text_area(:note, :size=> "25x1") %></td>
<td> <%= f.hidden_field :_destroy %><%= link_to "remove", "#", class: "remove_fields"%> </td>
</tr>
</tbody>
</table>
I would love a better solution but this will work for now.
I'm rails beginner.
I want to make two button that are placed in a line.
How can I put the button correctly on a line of the table?
Two buttons:
<%= button_to "empty Cart", #cart, method: :delete %>
<%= submit_tag "Delete item" %>
my view
<%= form_tag destroy_multiple_carts_path, method: :delete do %>
<table class="table">
<tbody>
<tr>
<td class = "checkbox_size_sm"><input type="checkbox"></td>
<td class = "image">ITEM</td>
<td class = "title"> </td>
<td>PRICE</td>
</tr>
<% #cart.line_items.order(created_at: :desc).each do |item| %>
<tr>
<td><%= check_box_tag "item_ids[]", item.id %></td>
<td class = "image"><%= image_tag item.product.item, size: "100" %>
</td>
<td class = "title" id = "td_align_middle">
<%= item.product.title %><br>
<%= item.product.brand %>
</td>
<td id = "td_align_middle"><%= item.product.price %></td>
</tr>
<% end %>
</tbody>
<tfoot>
<tr>
<td colspan = "4" class="total_price" >
Total Price <strong> <%= #cart.cart_total_price %> </strong>
</td>
</tr>
<tr>
<td colspan ="4" class="al-r">
<%= button_to "empty Cart", #cart, method: :delete %> <%= submit_tag "Delete item" %>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
Help me..
wrap those buttons in a div, set the div to float left and overflow hidden
add hose two buttons in div with class divname and in css file add below style to
div.divname button { float:left; margin-right:10px; }
I have a page that looks like the following.
Now I am trying to replicate this by using twitter boostrap <div class= hero-unit>. I have the done the following:
<div class="center hero-unit">
<table class="form">
<tr>
<td>
<%= form_for(#user) do |f| %>
<% if #user.errors.any? %>
<div id="error_explanation" xmlns="http://www.w3.org/1999/html">
<h2><%= pluralize(#user.errors.count, "error") %> prohibited this user from being saved:</h2>
<ul>
<% #user.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
</td>
</tr>
<tr>
<td class="th" colspan="2">Login Details</td>
</tr>
<tr>
<% if #user.id %>
<td><%= f.label :id %></td>
<td><%= #user.id %></td>
<% end %>
</tr>
<tr>
<td><%= f.label :current_sign_in_at, "Sign in time" %></td>
<td><%= #user.current_sign_in_at.nil? ? "Not signed in" : #user.current_sign_in_at.strftime('%d-%b-%Y %H:%M:%S') %></td>
</tr>
<tr>
<td> <%= f.label :first_name %>
<br/></td>
<td><%= #user.first_name %></td>
</tr>
<tr>
<td><%= f.label :last_name %>
<br/></td>
<td><%= #user.last_name %></td>
</tr>
<tr>
<td><%= f.label :email %>
<br/></td>
<td><%= #user.email %></td>
</tr>
<% if can? :manage, :all %>
<tr>
<td class="th" colspan=2>Roles and Privileges</td>
</tr>
<tr>
<% for role in Role.all %>
<td><%= role.name %><%= check_box_tag "user[role_ids][]", role.id, #user.roles.include?(role), :disabled => true %></td>
<% end %>
</tr>
<% end %>
<tr>
<td>
<%= link_to 'Edit', edit_user_path(#user), :class => 'btn btn-medium' %> |
<%= link_to 'Back', usermanagement_path, :class => 'btn btn-medium' %>
</td>
</tr>
</table>
<table class="form" >
<% if #user == current_user %>
<caption><b>Previous Orders</b></caption>
<thead>
<tr>
<th>Order No:</th>
<th>Order Date</th>
<th>Quantity</th>
<th>Total</th>
<th>View Order</th>
</tr>
</thead>
<% current_user.orders.each do |order| %>
<tr>
<td style="width: 10px;"><%= order.id %></td>
<td><%= order.created_at.to_s(:short) %></td>
<td><%= order.quantity %></td>
<td><%= number_to_currency(order.total_price, :unit => "£") %></td>
<td><%= link_to 'View Order',(order)%></td>
</tr>
<% end %>
<% if current_user.orders.empty? %>
<tr>
<td>No bookings found</td>
</tr>
<% end %>
</table>
</div>
<% end %>
<% end %>
The above changes output the following:
So what my question is how can I possibly get it to be aligned to the right of the login details. I did attempt to do the following <table style="float: left; margin-left: 20px;"> on the Previous Orders table. Why is this not working!
I have tried to mock the tables you have shown below. Since you are using Bootstrap I will advise you to take a look at Responsive Tables .There are various examples of how you can create and represent tables for smaller screens as well .
Here's the jsfiddle with the same Jsfiddle with tables
<div class="hero-unit">
<div class="row">
<div class="span4">
<table class="table table-condensed">
<thead>
<tr>
<th>Login Details</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>ID</td>
<td>1</td>
</tr>
<tr class="error">
<td>Sign in Time</td>
<td>01/04/2013 11:35am</td>
</tr>
<tr class="warning">
<td>First Name</td>
<td>Jack</td>
</tr>
<tr class="info">
<td>Last Name</td>
<td>Sparrow</td>
</tr>
<tr class="warning">
<td>Email Id</td>
<td>jack#sparrow.com</td>
</tr>
</tbody>
</table>
</div>
<div class="span8">
<table class="table table-condensed">
<thead>
<tr>
<th>Order no</th>
<th>Order Date</th>
<th>Quantity</th>
<th>Total</th>
<th>View order</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>1</td>
<td>TB - Monthly</td>
<td>01/04/2012</td>
<td>Approved</td>
<td>View Order</td>
</tr>
<tr class="error">
<td>2</td>
<td>TB - Monthly</td>
<td>02/04/2012</td>
<td>Declined</td>
</tr>
<tr class="warning">
<td>3</td>
<td>TB - Monthly</td>
<td>03/04/2012</td>
<td>Pending</td>
</tr>
<tr class="info">
<td>4</td>
<td>TB - Monthly</td>
<td>04/04/2012</td>
<td>Call in to confirm</td>
</tr>
</tbody>
</table>
</div>
</div>
I have an asp.net mvc which gets model data from control action. I see that model.genericpassword field is empty string but in view it shows an email address ( in chrome only). This email address comes from the login page which is before this view. Is it cache issue or what ? If I use Html.passwordfor, then it shows empty textbox ( which is what I want). But I want to show password in plain format using html.textboxfor. This issue is not in Firefox or IE. If model has value then it shows correct value.
Controller action is
[Authorize]
public ActionResult EditMyUserDetails()
{
// IMS.ManagerObjects.IUserProfileManager mgr = profilemanager; //Roopa 29 Oct 2012
using (IUserProfileManager profilemanager = new ManagerFactory().GetUserProfileManager())
{ //Roopa 29 Oct 2012
UserProfile profile = profilemanager.GetProfile(CurrentUser.Id, CurrentAccount.Id);
UserModel model = userauthenticationmanager.GetModelWithProfileInfo(CurrentUser, profile);
model.PasswordReminder = model.PasswordReminder != null ? model.PasswordReminder : "";
model.GenericPassword = model.GenericPassword != null ? model.GenericPassword : "";
string[] userTypes = new string[] { "Admin", "Standard User" };
ViewData["userTypes"] = new SelectList(userTypes, model.myRole.RoleName);
using (ICurrencyManager currencyManager = new ManagerFactory().GetCurrencyManager())
{
List<Currency> currencies = currencyManager.GetAll().ToList();
int currencyId = CurrentAccount.Currency.Id;
Currency currency = currencyManager.GetById(currencyId);
ViewData["currencies"] = new SelectList(currencies, "DialPrefix", "CountryDialPrefix", currency.DialPrefix);
}
return View(model);
}
}
and view is:
<%# Page Title="" Language="C#" MasterPageFile="~/Views/Shared/child.Master" Inherits="System.Web.Mvc.ViewPage<IMS.Model.UserModel>" %>
<asp:Content ID="contentHead" ContentPlaceHolderID="PageHead" runat="server">
<script src="../../Content/custom-js/EditMyUserDetails.js" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContainer" runat="server">
<script type="text/javascript">
$(document).ready(function () {
$("#frmEditMyDetails :input").not(":button").change(function () {
IsChanged(true);
});
$("#dialog-confirm").dialog({
autoOpen: false,
resizable: true,
modal: true,
buttons: {
"Yes": function () {
save();
},
No: function () {
document.location.href = $(this).data('Parameter').address;
$(this).dialog("close");
}
}
});
});
</script>
<style type="text/css">
.wide
{
width: 400px;
}
.disabled
{
background-color: #ebebe4;
}
.widetextarea
{
width: 400px;
height: 100px;
}
.normal
{
width: 317px;
}
.small
{
width: 40px;
}
.tiny
{
width: 25px;
}
</style>
<div id="dialog-confirm" title="Do you want to save changes?" style="display: none;">
<p>
<span class="ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>Changes
made to user details are not saved.Do you want to save ?</p>
</div>
<% Html.EnableClientValidation(); %>
<% using (Html.BeginForm("EditMyUserDetails", "Account", FormMethod.Post, new { id = "frmEditMyDetails", name = "frmEditMyDetails" }))
{ %>
<%= Html.ValidationSummary(true)%>
<%= Html.HiddenFor(model => model.id)%>
<table>
<tr>
<td style="width: 710px;">
<table width="100%" border="0" align="center" cellpadding="3" cellspacing="0">
<tr>
<td>
Email :
</td>
<td style="padding-left: 1px">
<%= Html.TextBoxFor(model => model.Email, new { #class = "textarea", #disabled ="disabled", #readonly = "readonly", MaxLength = "50" })%>
</td>
</tr>
<tr>
<td>
Landline :
</td>
<td style="padding-left: 1px">
<%= Html.TextBoxFor(model => model.Landline, new { #class = "textarea", MaxLength = "50" })%>
</td>
</tr>
<tr>
<td>
Mobile :
</td>
<td style="padding-left: 1px">
<%= Html.TextBoxFor(model => model.Mobile, new { #class = "textarea", MaxLength = "50" })%>
</td>
</tr>
<tr>
<td>
Generic Password :
</td>
<td style="padding-left: 1px">
<%= Html.TextBoxFor(model => model.GenericPassword, new { #class = "textarea editable", MaxLength = "50" })%>
</td>
</tr>
<tr>
<td>
Add generic password by default :
</td>
<td style="padding-left: 0px">
<%-- <%= Html.CheckBox("defaultGeneric")%>--%>
<%= Html.CheckBoxFor(model => model.IsGenericDefault )%>
</td>
</tr>
<tr>
<td>
Prompt for unique password by default :
</td>
<td style="padding-left: 0px">
<%--<%= Html.CheckBox("PromptForPass")%>--%>
<%= Html.CheckBoxFor(model => model.IsUniqueDefault )%>
</td>
</tr>
<%-- <tr>
<td>
Do not add a password by default :
</td>
<td style="padding-left: 0px">
<%= Html.CheckBox("Defaultpass")%>
</td>
</tr>--%>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td>
Login Password :
</td>
<td>
<%=Html.PasswordFor(model => model.Password, new { #class = "textarea editable" })%>
<%=Html.HiddenFor(model => model.HiddenPassword)%>
</td>
</tr>
<tr>
<td>
New Password :
</td>
<td>
<%=Html.PasswordFor(model => model.NewPassword, new { #class = "textarea editable" })%>
</td>
</tr>
<tr>
<td>
Confirm Password :
</td>
<td>
<%=Html.PasswordFor(model => model.ConfirmPassword, new { #class = "textarea editable" })%>
</td>
</tr>
<tr style="height: 10px;">
<td colspan="2">
</td>
</tr>
<tr>
<td colspan="2">
<b>Please enter some text which will help you remember your password</b>
</td>
</tr>
<tr>
<td>
Password Reminder :
</td>
<td>
<%=Html.TextBoxFor(model => model.PasswordReminder, new { #class = "textarea editable" })%>
</td>
</tr>
</table>
</td>
</tr>
</table>
<% } %>
</asp:Content>
There are other textboxes on this page which work fine.