Column-Span in ASP.NET MVC View - asp.net-mvc

#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>

Related

How to calculate total value from razor view with javascript? MVC project

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)
}

asp.net mvc displaying contents in view on condition

I have a following view in my project where i have one dropdown and one textbox and submit button.I want to execute following scenario.
On click of submit only,I want to display the table contents.So if there is data,it will display data or else it will display "No records found".Is it possible?
My view is as follows:
model mvclearn.Models.Employee
#{
ViewBag.Title = "menu";
}
#{
Layout = null;
}
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<style>
.error {
color: red;
}
</style>
<div class="container">
<div class="container"style="width:30%">
#using (Html.BeginForm("save", "Test", FormMethod.Post))
{
#Html.DropDownListFor(m => m.Service_Code, Model.ser_code, "--select--", new { #class = "form-control", #placeholder = "Enter Service code" })
#Html.ValidationMessageFor(m => m.Service_Code, "", new { #class = "error" })
#Html.TextBoxFor(m => m.Service_Name, new { #class = "form-control", #placeholder = "Service Name" })
#Html.ValidationMessageFor(m => m.Service_Name, "", new { #class = "error" })
<input type="submit" value="submit" class="btn-block" />
}
<table class="table">
#{
if (Model.data!=null && Model.data.Count() > 0)
{
<tr>
<th>
#Html.DisplayName("Service_Code")
</th>
<th>
#Html.DisplayName("Service_Name")
</th>
</tr>
foreach (mvclearn.Models.Employee item in Model.data)
{
<tr>
<td>
#item.Service_Code
</td>
<td>
#item.Service_Name
</td>
</tr>
}
}
else
{
<p>No records found</p>
}
}
</table>
</div>
In your case, you have done a nice job but the way you are dealing with the model seems to be incorrect.You cannot use Model.data!= null statement,instead,I suggest you to do something like this.Check whether the Model's attributes are null or not!
if (Model.EmployeeName!=null ){
//your code here
}
Another possible reason for your problem is the model returns null values so check whether the model's attributes has the values when it is in the view.
Hope it helped.
You Can Embed Table tag in the If condition like this ...
#if(Model.data!=null && Model.data.Count() > 0)
{
<table>
<tr>
<td></td>
</tr>
</table>
}else{
<p>There is no records</p>
}

Wrap column Table to new row on small screens using bootstrap

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>

MVC - Select ALL checkbox

I have a model and i have implemented in the view. The data is passed to the controller and i retrieve the values using the form collection in the controller. I have 50 records totally and display 10 per page. Problem is, when i tried to select the check all Check box,all the 50 records are selected. But when i submit, in the controller, form collection has only current page 10 record ids. rest of the records are not passed. Please help me to find a solution or provide an alternate to the problem.
--Controller code
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult AssignLibrarian(FormCollection FC, string command)
{
foreach (string key in FC.AllKeys)
{
// Process Id Key values
if (key == "item.Id")
{
string IdValues = FC[key];
string[] PartIdArray = IdValues.Split(',');
foreach (string str in PartIdArray)
PartIdDictionary.Add(i++, str);
}
if (key == "item.IsSelected")
{
string SelectedIdValues = FC[key];
string[] PartSelectedIdArray = SelectedIdValues.Split(',');
for (int PartId = 0; PartId < PartSelectedIdArray.Length; PartId++)
{
if (PartSelectedIdArray[PartId] == "true")
{
PartSelectedIdDictionary.Add(j++, PartSelectedIdArray[PartId]);
PartId++;
}
else
PartSelectedIdDictionary.Add(j++, PartSelectedIdArray[PartId]);
}
}
}
}
View
#model IEnumerable<DFM.CMS.Model.PartRequest>
#foreach (var item in Model)
{
<tr>
<td style="width: 30px; word-wrap: break-word">
#Html.DisplayFor(model => item.CPN)
#Html.HiddenFor(model => item.Id)
</td>
<td style="width: 50px; word-wrap: break-word">
#Html.DisplayFor(modelItem => item.Manufacturer)
</td>
<td style="width: 50px; word-wrap: break-word">
#Html.DisplayFor(modelItem => item.MPN)
</td>
<td style="width: 70px; word-wrap: break-word">
#Html.DisplayFor(modelItem => item.VPLManufacturer)
</td>
<td style="width: 100px; word-wrap: break-word">
#* #Html.DisplayFor(modelItem => item.PartDescription)*#
#if (item.PartDescription != "" & item.PartDescription != null)
{
if (item.PartDescription.Length > 50)
{
#:#Html.LabelFor(modelItem => item.PartDescription, (item.PartDescription.Substring(0, 50) + "..."), new { title = item.PartDescription})
}
else
{
#:#Html.LabelFor(modelItem => item.PartDescription, item.PartDescription, new { title = item.PartDescription})
}
}
else
{
#:#Html.DisplayFor(modelItem => item.PartDescription, new { title = item.PartDescription})
}
</td>
<td style="width: 50px; word-wrap: break-word">
#Html.DisplayFor(modelItem => item.VPLPackage)
</td>
<td style="width: 50px; text-align: center">
#Html.DisplayFor(modelItem => item.RefDesQuantity)
</td>
<td style="width: 40px; word-wrap: break-word">
#Html.DisplayFor(modelItem => item.Librarian.Name)
</td>
<td style="width: 35px; word-wrap: break-word">
#Html.DisplayFor(modelItem => item.Status)
</td>
<td style="width: 85px">
#if (item.Status == DFM.CMS.Model.PartRequestStatus.Completed)
{
#Html.TextAreaFor(modelItem => item.Comments, new { rows = 3, cols = 1, disabled = "disabled" })
}
else
{
#Html.TextAreaFor(modelItem => item.Comments, new { rows = 3, cols = 1 })
}
</td>
<td style="width: 30px; text-align: center">
#if (item.Status == DFM.CMS.Model.PartRequestStatus.Completed)
{
#Html.CheckBoxFor(modelItem => item.IsSelected, new { disabled = "disabled" })
}
else
{
#Html.CheckBoxFor(modelItem => item.IsSelected,new {#class = "SubCheckBox" })
}
</td>
</tr>
}

How to pass a list of objects to a [HTTPPost]controller parameter, in ASP.Net MVC?

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.

Resources