I have a table on one of my pages using bootstrap for my responsive design. When on a small screen I want to move one of the columns below the other two. Is this possible?
as you can see there are 5 columns below when on desktop. While on small screens I want the note column to go below the other columns.
#foreach (var item in Model.TicketNotes.OrderBy(m => m.TicketNoteDate).Reverse())
{
<tr>
<td style="text-align: center">
#Html.DisplayFor(modelItem => item.TicketNoteDate)
</td>
<td>
#Html.DisplayFor(modelItem => item.UserNote.FullName)
</td>
<td style="text-align: center" class="hidden-xs">
#if (item.PublicFlag == true)
{
<span>Public</span>
}
else
{
<span>Private</span>
}
</td>
<td>
#Html.DisplayFor(modelItem => item.Note)
</td>
<td>
<div>
#if (item.AttachmentName != null)
{
string path = System.Configuration.ConfigurationManager.AppSettings["MediaFolder"] + "/Tickets/" + ViewBag.ticketNumber + "/" + item.AttachmentName;
if (System.IO.File.Exists(path))
{
#Html.ActionLink(item.AttachmentName, "ViewAttachment", new { controller = "File", filePath = path, fileName = item.AttachmentName }, new { target = "_blank" });
}
}
</div>
</td>
#*<td>
#Html.ActionLink("Edit", "EditTicketNote", "TicketNote", null,
new { id = item.TicketNoteId, ticketNumber = Model.TicketNumber, returnUrl = Model.ReturnUrl, SearchCategory = Model.SearchCategory, SearchStatus = Model.SearchStatus,
SearchTechnician = Model.SearchTechnician, SearchUser = Model.SearchUser, page = ViewBag.page })
</td>*#
</tr>
Related
I got a .Net project using MVC and Razor.
I pass to the view a list containing products, where I have ProdutoValor( product value) with a TextboxFor for QuantidaVenda (Number os itens sold) for each iten. I want to get the value "QuantidadeVenda * ProdutoValor" for each item and show in a textbox the total value. How can I manage to do that with javascript?
I wanto to calculate the total as soon as the user enters the quantity
here is my view :
#for (int i = 0; i < Model.Produtos.Count; i++)
{
<tr>
<td>
#Html.HiddenFor(model => model.Produtos[i].ProdutoId)
#Html.HiddenFor(model => model.Produtos[i].ProdutoDescricao)
#Html.DisplayFor(model => model.Produtos[i].ProdutoNome)#Html.HiddenFor(model => model.Produtos[i].ProdutoNome)
</td>
<td>
#Html.DisplayFor(p => p.Produtos[i].ProdutoValor, new { #class = "form-control", Value = Model.Produtos[i].ProdutoValor }) #Html.HiddenFor(model => model.Produtos[i].ProdutoValor)
</td>
<td>
#Html.DisplayFor(p => p.Produtos[i].ProdutoEstoque, new { #class = "form-control", Value = Model.Produtos[i].ProdutoEstoque })#Html.HiddenFor(model => model.Produtos[i].ProdutoEstoque)
</td>
<td>
#if (Model.Produtos[i].ProdutoEstoque < 1)
{
#Html.TextBoxFor(p => p.Produtos[i].QuantidadeVenda, new { value = 0, disabled = "disabled" })
}
else
{
#Html.TextBoxFor(p => p.Produtos[i].QuantidadeVenda, new { value = 0, #id = "quantidade" })
if (Model.Produtos[i].ProdutoEstoque < Model.Produtos[i].QuantidadeVenda)
{<p>valor invalido</p>}
}
</td>
</tr>
}
[enter image description here][1]
how the list looks like
For Javascript:
Onchange Event for QuantidadeVenda(quantity):
function onchange()
{
var total= document.getElementById("name of total textbox").Value*
document.getElementById("name of quantity textbox").value
document.getElementById("name of total textbox").innerHTML=total
}
Jquery:
on change or LostFocus Event
$("input").change(function(){
var total= $("#name of total textbox").val()*
$("#name of quantity textbox").val()
$("#name of total textbox").val=total
});
Updated Code
HTML:
<table border="1">
<tr>
<td>product</td>
<td>quantity</td>
<td>total</td>
</tr>
<tr>
<td>
10
</td>
<td>
<input type="text" name="txt" value="" onchange="myFunction(this)">
</td>
<td><label>_</label></td>
</tr>
<tr>
<td>
10
</td>
<td>
<input type="text" name="txt" value="" onchange="myFunction(this)">
</td>
<td><label>_</label></td>
</tr>
</table>
Javascript:
function myFunction($this) {
debugger $($this).parent().siblings(":last").find('label').text($($this).parent().siblings().first().text().trim() * $this.value)
}
Im using MVC razor view
How do I group by my index view basen on Month in TrDate ??
My Index Controller:
private InvoiceMasterEntities db = new InvoiceMasterEntities();
public ActionResult Index(int compID, string searchBy, string search, int? page, string sortBy)
{
ViewBag.SortDateParam = string.IsNullOrEmpty(sortBy) ? "Date desc" : "";
ViewBag.SortStatusParam = sortBy == "Status" ? "Status desc" : "Status";
var detail = db.DetailPengirimen.AsQueryable();
if (searchBy == "CustID")
{
detail = detail.Where(b => b.CustID.Contains(search) || search == null);
}
else
{
detail = detail.Where(a => a.Customer.Fullname.Contains(search) || search == null);
}
detail = detail.Where(a => a.CompID == compID);
switch (sortBy)
{
case "Date desc":
detail = detail.OrderByDescending(a => a.TrDate);
break;
case "Status desc":
detail = detail.OrderByDescending(a => a.Status.Status1);
break;
case "Status":
detail = detail.OrderBy(a => a.Status.Status1);
break;
default:
detail = detail.OrderBy(a => a.TrDate);
break;
}
return View(detail.ToPagedList(page ?? 1, 10));
}
My Index View:
#using PagedList;
#using PagedList.Mvc;
#model IPagedList<InvoiceTracker.Models.DetailPengiriman>
<h2>Couriers List</h2>
<p>
#Html.ActionLink("Insert Data", "Create", new { compID = Request.QueryString["compID"] })
</p>
<p>
#using (Html.BeginForm("Index", "DetailPengiriman", new { compID = Request.QueryString["compID"] }, FormMethod.Post))
{
<b>Search By:</b>
#Html.RadioButton("searchBy", "CustID", true) <text>CustomerID</text>
#Html.RadioButton("searchBy", "Fullname") <text>Customer Name</text>
<br />
#Html.TextBox("search")
<input type="submit" value="Search" />
}
</p>
<table class="table">
<tr>
<th>
#Html.ActionLink("Transaction Date", "Index", new
{
sortBy = ViewBag.SortDateParam,
searchBy = Request.QueryString["searchBy"],
search = Request["search"],
compID = Request["compID"]
})
</th>
<th>
CustomerID
</th>
<th>
Customer Name
</th>
<th>
Invoice
</th>
<th>
Nama Penerima
</th>
<th>
Status Penerima
</th>
<th>
#Html.ActionLink("Status", "Index", new
{
sortBy = ViewBag.SortStatusParam,
searchBy = Request.QueryString["searchBy"],
search = Request["search"],
compID = Request["compID"]
})
</th>
<th>
Status Date
</th>
<th>
Image
</th>
<th>Actions</th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.TrDate)
</td>
<td>
#Html.DisplayFor(modelItem => item.Customer.CustID)
</td>
<td>
#Html.DisplayFor(modelItem => item.Customer.Fullname)
</td>
<td>
#Html.DisplayFor(modelItem => item.InvoiceNo)
</td>
<td>
#Html.DisplayFor(modelItem => item.NamaPenerima)
</td>
<td>
#Html.DisplayFor(modelItem => item.StatusPenerima)
</td>
<td>
#Html.DisplayFor(modelItem => item.Status.Status1)
</td>
<td>
#Html.DisplayFor(modelItem => item.Status.StatDate)
</td>
<td>
#if (item.Image.Image1 != null)
{
var base64 = Convert.ToBase64String(item.Image.Image1);
var imgSrc = ($"data:image/png;base64,{base64}");
<img src="#imgSrc" width="50" height="50"
onMouseOut="zoomtoggle('50','50px','50px','50px',this);"
onMouseOver="zoomtoggle('400px','200px','400px','200px',this);"/>
}
else
{
<text> No Image Available</text>
}
</td>
<td>
#Html.ActionLink("Edit", "Edit", new
{
id = item.TransID,
custID = item.CustID,
statID = item.StatusID,
imgID = item.ImageID,
invoNo = item.InvoiceNo
}) |
#Html.ActionLink("Delete", "Delete", new
{
id = item.TransID,
custID = item.CustID,
statID = item.StatusID,
imgID = item.ImageID,
invoNo = item.InvoiceNo
})
</td>
</tr>
}
</table>
#Html.PagedListPager(Model, page => Url.Action("Index", new
{
page,
searchBy = Request.QueryString["searchBy"],
search = Request.QueryString["search"],
sortBy = Request["sortBy"],
compID = Request["compID"]
}),
new PagedListRenderOptions() { Display = PagedListDisplayMode.IfNeeded })
I want the view listed the data from database group by month in TrDate attribute
TrDate data are from datetime.now
TrDate data type is DateTime
#foreach (var item in Model) {
#if(ViewData["dropDown_"+item.Code] != null){
if (item.Code == "1" || item.Code == "4")
{
<td>
#Html.DropDownList("dropDown_"+item.Code+"_ListName", (IEnumerable<SelectListItem>)ViewData["dropDown_"+item.Code] ,new { style = "width: 100px; column-span: 2;" })
</td>
}else{
<td>
#Html.DropDownList("dropDown_"+item.Code+"_ListName", (IEnumerable<SelectListItem>)ViewData["dropDown_"+item.Code] ,new { style = "width: 100px;" })
</td>
<td>
Owner Preference: GREEN
</td>
}
}
}
From the above code, there will be 4 rows of dropdownlist be generated. The question is how to make the first one and the last one to column span. Note that I've included column-span:2 in the style list, but it has no effect nor giving any errors. Please help.
You need to set the colspan for the TD
<td colspan="2">
#Html.DropDownList("dropDown_"+item.Code+"_ListName", (IEnumerable<SelectListItem>)ViewData["dropDown_"+item.Code] ,new { style = "width: 100px;" })
</td>
I'm building a mobile webiste using ASP.NET MVC4.
One of the pages in my solution contains a table where all the rows in the table can be edited and saved in one batch. To do this I am using FormCollection in the Action in the Controller. This works as expected for most of the fields, exept one: item.IsPercent. This field is a boolean, and FormCollection.GetValues("item.IsPercent") returns twice the number of rows in the table and the list always alternates between true and false, no matter what the actual values are.
How can I collect the right value for the Percent checkboxes?
An Example
My View
#using (Html.BeginForm()) {
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
foreach (var group in Model.GroupBy(i => i.Exercise.Name)) {
<table>
<tr>
<th colspan="4">#Html.Label(group.Key)</th>
</tr>
<tr>
<td>Load</td>
<td>Percent</td>
<td> </td>
<td>Reps</td>
</tr>
#foreach (var item in group.OrderBy(i => i.Order))
{
#Html.HiddenFor(modelItem => item.Id)
<tr>
<td>
#Html.EditorFor(modelItem => item.Load)
#Html.ValidationMessageFor(modelItem => item.Load)
</td>
<td>
#Html.EditorFor(modelItem => item.IsPercent)
</td>
<td>
x
</td>
<td>
#Html.EditorFor(modelItem => item.Repetitions)
#Html.ValidationMessageFor(modelItem => item.Repetitions)
</td>
</tr>
}
</table>
<br />
}
<p>
<input type="submit" value="Save" />
</p>
}
My Controller
[HttpPost]
public ActionResult EditProgramTemplateLines(FormCollection c)
{
int i = 0;
int ptId = 0;
if (ModelState.IsValid)
{
var ptIdArray = c.GetValues("item.id"); // [1,2,3,4]
var ptLoadArray = c.GetValues("item.Load"); // [50, 55, 60, 80]
var ptPercentArray = c.GetValues("item.IsPercent"); // [true, false, true, false, true, false, true, false]
var ptRepsArray = c.GetValues("item.Repetitions"); // [13, 10, 5, 2]
for (i = 0; i < ptIdArray.Count(); i++) {
var ptLine = factory.GetProgramTemplateLine(Convert.ToInt32(ptIdArray[i]));
if(ptId == 0)
ptId = ptLine.ProgramTemplateId;
ptLine.Load = ConvertToDouble(ptLoadArray[i]);
ptLine.IsPercent = Convert.ToBoolean(ptPercentArray[i]);
ptLine.Repetitions = ConvertToInt(ptRepsArray[i]);
factory.SetEntryAsModified(ptLine);
}
factory.SaveChanges();
return RedirectToAction("Details", new { id = ptId });
}
return View();
}
Updated solution
Considering the link posted in comment below FormCollection for a checkbox my solution is to loop throug the array like this:
var percentId = 0;
for(i = 0;i<ptIdArray.Count();i++){
if(ptPercentArray[percentId] == true){
item.IsPercent = true;
percentId = percentId + 2;
}
else{
item.IsPercent = false;
percentId++;
}
}
Take a look at the HTML generated for the Html.EditorFor! The helpers create one checkbox and one hidden field for each checkbox to make state management easily at server side! Thats the problem! Using FormCollection as parameter you need to differentiate the hidden from the real checkbox to get the value!
Hopes this help you!
i have the next view:
#model IEnumerable<L5ERP.Model.BLL.BusinessObjects.MTR_MonthlyTransfer>
#using (Html.BeginForm("ExpenseMonthlyTransferProcessing", "BudgetTransfer", Model.ToList())){
<table class ="divTable">
<tr>
<th>Transferir</th>
<th>
Clave
</th>
<th>
Monto
</th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
#Html.CheckBoxFor(x => item.MTR_Bool, new { #class = "checkMTR", #checked = "checked" })
</td>
<td>
#Html.TextBoxFor(x => item.MTR_Key, new {#class = "longInput" })
</td>
<td>
#String.Format("{0:F}", item.MTR_Amount)
</td>
</tr>
}
</table>
}
and my controller like this
[HttpPost]
public ActionResult ExpenseMonthlyTransferProcessing(List<MTR_MonthlyTransfer> lstMtr)
{ return View(lstMTR); }
But when i do the post my list is null, how can i send my list through the submit button ?
You should change the #model to an array (L5ERP.Model.BLL.BusinessObjects.MTR_MonthlyTransfer[]) or something else that implements IList<>:
#model L5ERP.Model.BLL.BusinessObjects.MTR_MonthlyTransfer[]
#for (var i = 0; i < Model.Length; i ++) {
<tr>
<td>
#Html.CheckBoxFor(x => Model[i].MTR_Bool, new { #class = "checkMTR", #checked = "checked" })
</td>
<td>
#Html.TextBoxFor(x => Model[i].MTR_Key, new {#class = "longInput" })
</td>
<td>
#String.Format("{0:F}", item.MTR_Amount)
</td>
</tr>
receive a FormCollection and parse the items in it manually
Use F12 to check the post in your navigator to see if it are sending the content you expected.