I am developing a shopping cart website in MVC3 with razor. Below code is view code, in which I am showing multiple products, each product has quantity text box and one submit button. So, in controller how would I know which submit button is called by user and how to read text from Label?
<table>
<tr>
#foreach (System.Data.DataRow i in Model.dt.Rows )
{
using (#Html.BeginForm("addtocart", "Chocolatier",FormMethod.Post,null))
{
<tr><td> <img src=" #Url.Content("~/Content/abc.gif") " alt="Imge" height ="40" width ="40"/></td></tr>
foreach (System.Data.DataColumn j in Model.dt.Columns)
{
lbl = "lbl";
lbl = lbl+#cnt.ToString();
if(j.ToString().ToLower ().Equals ("name"))
{
<tr> <td style="width : 200px"><h5>#j.ToString()</h5><label id="#lbl" >#i[j].ToString()</label></td></tr>
}
if(j.ToString().ToLower ().Equals ("description"))
{
<tr> <td style="width : 200px"><h5>#j.ToString()</h5>#i[j].ToString())</td></tr>
}
if(j.ToString().ToLower ().Equals ("price"))
{
<tr> <td style="width : 200px"><h5>#j.ToString()</h5>#Html.LabelFor(m=>m.prod_price,i[j].ToString())</td></tr>
}
}
cnt += 1;
<td>Enter quantity : #Html.TextBoxFor(m=>m.prod_quantity)</td>
<tr><td><input type ="submit" value="Add to cart" id="#cnt"/></td></tr>
<tr> <td>__________________________________________________________________________</td></tr>
}
}
</tr>
</table>
Related
I have make table scrollable inside div and everything is working fine but table header is too scrolling.I want to make table header fixed. And this table is rendered within a div. I have used PahingHelper model for paging.I have tried to use scrollable in table but it too is not working.So, am here to make scrollable-table. Is there any way to make table scrollable?
// here is my sample code for scrolling
#model ShresthaTrade.Helper.PagingHelper
<table >
<tr>
<th>Brand</th>
<th>Machine Type</th>
<th>Machine Model</th>
<th>Machine Serial</th>
<th>Mac Address</th>
</tr>
</table>
<div style=" overflow:auto; height: 340px;">
<table >
<tbody>
#if (Model.Datatable.Rows.Count > 0)
{
foreach (System.Data.DataRow row in Model.Datatable.Rows)
{
<tr>
<td>#row["brand_name"]</td>
<td>#row["machine_type_name"]</td>
<td>#row["MachineModel"]</td>
<td>#row["MachineSerial"]</td>
<td>#row["MacAddress"]</td>
</tr>
}
}
else
{
<tr>
<td colspan="4">No records are found</td>
</tr>
}
</tbody>
</table>
</div>
I am trying to create a grid that contains Events on the x axis and Requirements on the y axis and is filled with solutions.
Event1 Event2
Req1 Sol1
Req2 Sol2
My Model contains a list of Events, which contains their related Requirements, which contain their related Solutions. Every Event can have 0 or more Requirements and each Requirement can have 0 or more solutions.
How can I accurately show this grid in razor?
Here is my attempt:
<table border="1">
<tr>
<td class="span-6"></td>
#foreach(var events in Model.Events)
{
<td colspan="3">
#events.Name
</td>
requirementsList.AddRange(events.Requirements);
}
</tr>
#foreach(var req in requirementsList)
{
<tr>
<td>
#req.Name
</td>
<!--Insert logic to align solution with Event-->
<td>
#req.Solution
</td>
</tr>
}
</table>
Of course this is only showing all solutions in the first event column.
I've done a similar thing in PHP for my timesheet system, I want hours worked for each employee on each day (between 2 dates):
| 1 May | 2 May | ... May
Fred | 6 |
George | | 4 |
I used 3 foreach loops, first I outputted the dates, the I went rond each employee, and inside the employee loop, I looped round the dates again.
So for you it would be:
<table border="1">
<tr>
<td class="span-6"></td>
#foreach(var events in Model.Events)
{
<td colspan="3">
#events.Name
</td>
requirementsList.AddRange(events.Requirements);
}
</tr>
#foreach(var req in requirementsList)
{
<tr>
<td>
#req.Name
</td>
#foreach(var events in Model.Events)
{
#curRec = events.Requirements
#if (curRec.HasSolution) // If has a solution.
// Very important so solutions can be aligned properly
{ // Output the solution
<td>
#curRec.Solution
</td>
} else { // Output a empty cell
<td></td>
}
}
</tr>
}
</table>
I am trying to use a partial view to represent rows of a table in my project. I currently have
<table>
<thead>
<tr>
<th >
Column 1
</th>
<th >
Column 2
</th>
<th >
Column 3
</th>
</tr>
</thead>
<tbody>
#foreach(var item in Model.Items)
{
#Html.Action("ItemCalculatedView", new { Id = item.Id})
}
</tbody>
</table>
In my partial view I have this
#using (Ajax.BeginForm("SaveStuff", "Whatever",
new { id = #Model.Id }, new AjaxOptions()
{
HttpMethod = "Post",
OnSuccess = "Success"
}))
{
#Html.HiddenFor(m => m.Id)
<tr>
<td>
#Html.Label("Col1", Model.Col1)
</td>
<td>
#Html.TextBox("Number", Model.Number)
</td>
<td>
<input type="submit" id='submit-#Model.Id'/>
</td>
</tr>
}
How can I make this work?
You can put a form inside a table cell, but you can't have the form inside a tbody element, or spanning multiple columns. So there are three options:
Use a CSS layout instead of a table, or use divs with CSS display set to "table". (for example)
Put the entire form (TextBox and Submit) inside a td
Put another table inside the td element
I'd recommend #1 -- use a CSS layout to construct the table, since it's difficult to style table tags:
Main
<div class="table">
<div class="header-row">
<div class="header-cell">Column 1</th>
<div class="header-cell">Column 2</th>
<div class="header-cell">Column 3</th>
</div>
#foreach(var item in Model.Items)
{
#Html.Action("ItemCalculatedView", new { Id = item.Id})
}
</div>
Partial
#using (Ajax.BeginForm(
actionName: "SaveStuff",
controllerName: "Whatever",
routeValues: new { id = #Model.Id },
ajaxOptions: new AjaxOptions
{
HttpMethod = "Post",
OnSuccess = "Success"
},
htmlAttributes: new { #class = "row" }
))
{
<div class="cell">
#Html.HiddenFor(m => m.Id)
</div>
<div class="cell">
#Html.Label("Col1", Model.Col1)
</div>
<div class="cell">
#Html.TextBox("Number", Model.Number)
</div>
<div class="cell">
<input type="submit" id='submit-#Model.Id'/>
</div>
}
CSS
.table { display: table; }
.header-row, row { display: table-row; }
.header-cell, cell { display: table-cell; }
You have several issues here. First, as dbaseman mentions, you can't place forms within the structure of a table and have it be legal HTML. It may work, or it might not, and even if it does work, you can't guarantee it will continue to work.
I would instead wrap your table in the form, and then on the post figure out which button was pressed based on its value and/or index.
I would strongly advise against using css tables for tabular data. It's just not semantically correct.
Another possible solution is, instead of using the Ajax.BeginForm, instead use jQuery $.ajax and then you can select a row of data in javascript to post to the server.
I have a view that attempts to build a table off of the passed in Model. I'd like to generate an image with a source that is changed based on the iteration of a loop but can't seem to get it to work. I can do this in JQuery but I would like to do it with razor. I have the following table body:
<tbody>
#{for (var ix = 0; ix <= Model.Value.Count - 1; ix++)
{
<tr>
<td style="width: 10%"><img src="http://gmap.com/marker" + #ix + 1 + ".png" /></td>
<td style="width: 75%">#Model("fullname")</td>
</tr>
}
<tbody>
That first TD is the problem area. I attempted it but... Thanks for the help.
Since it is razor you do not need to add the rendered output to your url. Try this:
#{for (var ix = 0; ix <= Model.Value.Count - 1; ix++)
{
<tr>
<td style="width: 10%"><img src="http://gmap.com/marker#(ix + 1).png" /></td>
<td style="width: 75%">#Model("fullname")</td>
</tr>
}
I haven't tested it but I believe it will fix your issue.
I am having issues with displaying (rather NOT displaying) plain text in an else block.
if (Model.CareerFields != null && ViewBag.CFCount > 0)
{
<h3>Careerfields Listing</h3>
<table>
<tr>
<th></th>
<th>Careerfield Name</th>
</tr>
#foreach (var item in Model.CareerFields)
{
<tr>
<td>
#Html.ActionLink("Select", "Index", new { careerFieldID = item.CareerFieldId })
</td>
<td>
#item.CareerFieldName
</td>
</tr>
}
</table>
}
else
{
No Careerfields associated with #ViewBag.SelectedDivisionTitle
}
The if blocks works fine. The text only renders when true. However, the else block text renders when the page loads, not if it evaluates to false only.
I've tried using
Hmtl.Raw("No Careerfields associated with ")
<text>No Careerfields associated with #ViewBag.SelectedDivisionTitle</text>
#:No Careerfields associated with #ViewBag.SelectedDivisionTitle
But it still renders the plaintext before evaluation.
Any suggestions?
Put your "plain text" inside of a naked <span> tag:
else
{
<span>No Careerfields associated with #ViewBag.SelectedDivisionTitle</span>
}
The browser shouldn't render it special (unless you have css selecting every span) and it'll help razor sense the end of the C# and print your HTML.
The following code worked perfectly for me:
#if (false) {
<h3>
Careerfields Listing
</h3>
<table>
<tr>
<th>
</th>
<th>
Careerfield Name
</th>
</tr>
</table>
}
else
{
#:No Careerfields associated with #ViewBag.SelectedDivisionTitle
}
You can see that the contents of if are rendered when you change condition to true.
Looks like you've forgotten the # sign before your if statement. Try this:
#if (Model.CareerFields != null && ViewBag.CFCount > 0)
{
<h3>Careerfields Listing</h3>
<table>
<tr>
<th></th>
<th>Careerfield Name</th>
</tr>
#foreach (var item in Model.CareerFields)
{
<tr>
<td>
#Html.ActionLink("Select", "Index", new { careerFieldID = item.CareerFieldId })
</td>
<td>#item.CareerFieldName</td>
</tr>
}
</table>
}
else
{
<text>No Careerfields associated with #ViewBag.SelectedDivisionTitle</text>
}
The most concise and correct answer is:
Prepend #: before the text.
(note the : after the #)
This still allows to embed variables in the text by prepending an # to the variable name:
#if (someCondition)
{
#:Some text you want to see.
}
else
{
#:Some other text, with a variable #someVariable included in the text.
}