Develop Reference

Datalist not displaying items ASP.NET

I have a serious problem with data list I HATE IT so much. I have a list of data that displays cart items in a table.. basic right?
Sure, but not for data list! its like data list says I MUST DESTROY YOU. The data list does not show any items that I should display!
Here are some screenshots that will let you understand my issue here.
So basically the items are displayed in VS, but in the web application it doesn't.
PLEASE HELP :(
Here is the code:
<div class="container-sm cart-page">
<table>
<tr>
<th>المنتج</th>
<th>الكمية</th>
<th>السعر الفرعي</th>
</tr>
<asp:DataList ID="DataList1" runat="server" RepeatColumns="1" RepeatLayout="Flow">
<ItemTemplate>
<tr>
<td>
<div class="cart-info">
<img src="http://bestjquery.com/tutorial/product-grid/demo8/images/img-1.jpg" alt="camera">
<div>
<p>Camera 211</p>
<small>السعر: 50 ر.س.</small>
<br>
حذف
</div>
</div>
</td>
<td>
<input type="number" value="1" min="1" max="10"></td>
<td>50 ر.س.</td>
</tr>
</ItemTemplate>
</asp:DataList>
</table>
<div class="total-price">
<table>
<tr>
<td class="titles">السعر الفرعي</td>
<td>150 ر.س.</td>
</tr>
<tr>
<td class="titles">VAT</td>
<td>22.50 ر.س.</td>
</tr>
<tr>
<td class="titles">المجموع</td>
<td>172.50 ر.س.</td>
</tr>
<tr>
<td>
<a href="store.aspx">
<button type="submit" class="btn btn-primary btn-continue-shopping">إكمال التسوق</button>
</a>
</td>
<td>
<a href="checkout.aspx">
<button type="submit" class="btn btn-primary btn-checkout">إكمال الدفع</button>
</a>
</td>
</tr>
</table>
</div>
</div>

You need to set the DataSource property with some list or table of data.
Here is a link to the MSDN article: https://learn.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.basedatalist.datasource?view=netframework-4.8#System_Web_UI_WebControls_BaseDataList_DataSource
What is your data source? Are you using a database?
If you do not have a database you can mockup a dataset in XML, JSON, or CSV and then deserialize into your code.
I believe that you can bind anything that implements IList.

MVC: Displaying table after button pressed

Hi I have a question is that possible to have function to display my table after the button was pressed, because now it's always on? I've tried with some IF functions but they weren't working.
My code:
#using (Html.BeginForm("Search", "Home", FormMethod.Post))
{
<br />
<span style="font-weight: bold">Tytuł filmu:</span> #Html.TextBox("VideoName")
<input type="submit" value="Szukaj" class="btn-primary" />
<br />
<br />
<table cellpadding="0" cellspacing="0">
<tr>
<th>
#Html.DisplayNameFor(model => model.ImageUrl)
</th>
<th>
#Html.DisplayNameFor(model => model.VideoName)
</th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.ImageUrl)
</td>
<td>
#Html.DisplayFor(modelItem => item.VideoName)
</td>
</tr>
}
</table>
}

If you put your markup inside a conditional block as follows:
#if (true)
{
#* PUT MARKUP HERE *#
}
Then the markup will only appear when the if condition is true.
Alternatively, you can use client-side code to simply hide the markup. I don't know which is best, because you haven't provided any details about what you are doing.
Instead of saying THE button, perhaps you should've talked about what kind of button you have and what is it supposed to do. If it works server side, use my first suggestion. If it needs to work client side, use my second suggestion.

You can do that in number of ways,
Javascript:
document.getElementById('mytable').style.display = 'block';
Give your table an ID and set its display to none; initially, then using javascript on the button click switch the table display to block;
function buttonClick(){
document.getElementById('myTable').style.display = 'block';
}
<table id='myTable' style='display:none;'>...</table>
<input type="submit" value="Szukaj" class="btn-primary" onclick='buttonClick()' />
Notes:
- It can be much easier if you are using jquery
- You can use event listener for the button click
Server side code:
On your action method set a TempData or ViewBag variable and then in the html check if this value exist, if true show the table
I am sure there are many other ways to do that but most of them will be around both ideas I listed.

You can have a button that toggles the visibility of the table, call the below function on the button onclick event to show or hide the table.
function toggleTable() {
var lTable = document.getElementById("YourTableId");
lTable.style.display = (lTable.style.display == "table") ? "none" : "table";
}

You have several good answers but it depends on exactly what you are trying to accomplish. I've used a variety of what has been provided. You mention showing table on button click. Do you also need to hide table if said button is clicked again? If so, client side jQuery and .toggle() could help.
$(document).ready(function(){
$("button").click(function(){
$("#myTable").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button>Toggle</button>
<table id="myTable" style="border: 1px solid black; display: none">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>

using runat="server" gives Validation of viewstate MAC failed

Javascript
var form = document.getElementById('date_budget');
pop('', 'exp_upd', '95', '80');
form.action = "test.aspx";
form.target = 'exp_upd';
form.submit();
HTML
<form id="date_budget" name="date_budget" method="post">
<table>
<tr>
<!--#include file="zone.inc" -->
<td id='mlodg_loc'><select name="loc" id="loc">
<option value="Select Location">Select Location</option>
</select></td>
<td>
<select name="month" id="month">
<option value="1">1</option>
</select>
</td>
<td>
<select name="year" id="year">
<option value="2013">2013</option>
</select>
</td>
</tr>
</table>
</form>
The above code opens a popup window, but when I change the html by adding the runat attribute, I am getting “Validation of viewstate MAC failed”, and some extra junk. the modified html is below
<form id="date_budget" name="date_budget" method="post" runat="server">
<table>
<tr>
<!--#include file="zone.inc" -->
<td id='mlodg_loc'><select name="loc" id="loc" runat="server">
<option value="Select Location">Select Location</option>
</select></td>
<td>
<select name="month" id="month" runat="server">
<option value="1">1</option>
</select>
</td>
<td>
<select name="year" id="year" runat="server">
<option value="2013">2013</option>
</select>
</td>
</tr>
</table>
</form>
Is there any workaround to use both the runat server and using the same element in JS, without using those asp tags something like <%= hidBT.ClientID %> I don't want that any other way.

Try to add this <pages enableViewStateMac="false"> in your web.config (or)
Try to Change this <form id="date_budget" name="date_budget" method="post"> to
this <form id="date_budget" name="date_budget" runat="server">
It shouldn't specify method or action

You can try setting the ClientIDMode="Static" on the control or in the #Page directive. That will keep the id of the form as "date_budget".
Otherwise if you don't need the ViewState on the page, then you can disable it in the #Page directive using EnableViewState="false".

file upload in asp.net mvc 4 razor

I am using ASP .Net MVC 4.0 and VS10. I am a newbie in web application.
I have designed a page with html razor view. Here is some code of Index.cshtml:
#{
ViewBag.Title = "BAP Automation";
}
#section featured {
<section class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h1>#ViewBag.Title.</h1>
<h2>#ViewBag.Message</h2>
</hgroup>
<form action="Index">
<table> **//EDITED BELLOW**
<tr><form action="" method="post">
<td>Upload Excel File: </td>
<td><input type="text" name="NAMEtxtFileName"/></td>
<td><input type="button" value="Upload" id="IDbtnUpload" name="NAMEbtnUpload"/></td>
</form>
</tr>
<tr>
<td>Company Name: </td>
<td><input type="text" /></td>
<td></td>
</tr>
<tr>
<td></td>
<td align="right"><input type="submit" value="Process" /></td>
<td></td>
</tr>
</table>
</form>
</div>
</section>
}
I am trying to upload an excel file in NAMEbtnUpload's click event. clicking on this button we will be in this page, just a file upload dialog will open and selecting the file, the file location will be shown in the NAMEtxtFileName textbox.
EDIT 1:
I have written some code from the suggested code:
[HttpPost]
public ActionResult Index(HttpPostedFileBase NAMEbtnUpload)
{
if (NAMEbtnUpload.ContentLength > 0)
{
var fileName = Path.GetFileName(NAMEbtnUpload.FileName);
var path = Path.Combine(Server.MapPath("~/App_Data/Given Excel's"), fileName);
NAMEbtnUpload.SaveAs(path);
}
return RedirectToAction("Index");
}
but this shows following error:
Server Error in '/' Application.
The resource cannot be found.
Description: HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable. Please review the following URL and make sure that it is spelled correctly.
Requested URL: /

Try adding the "EncType" attribute to your form.
#using (Html.BeginForm("ACTION", "CONTROLLER", FormMethod.Post, new { EncType="multipart/form-data"})){
//FORM MARKUP HERE
}

Phil Haack shows you how to handle file uploads with his blog post Uploading a File (Or Files) With ASP.NET MVC.
There is quite a bit of stuff you are missing so reading that post will get you further than any answer here.
** UPDATE FOR EDIT 1 **
A couple issues
<form action="index" > - this should be <form action="/ControllerName/Index">
You have multiple form tags that are nested. You can have multiple form tags but they can't be nested. In your case your only need one. Most of the time you only need 1.
<input type="button" value="Upload" id="IDbtnUpload" name="NAMEbtnUpload"/> should be
It is more conventional to use #using(Html.BeginForm()) as opposed to manually writing form tags. See below.
#using(Html.BeginForm("Index"))
{
<table>
<tr>
<td>Upload Excel File: </td>
<td><input type="text" name="NAMEtxtFileName"/></td>
<td><input type="file" id="IDbtnUpload" name="NAMEbtnUpload"/></td>
</tr>
<tr>
<td>Company Name: </td>
<td><input type="text" /></td>
<td></td>
</tr>
<tr>
<td></td>
<td align="right"><input type="submit" value="Process" /></td>
<td></td>
</tr>
</table>
}

clicking on [the upload] button we will be in this page, just a file upload dialog will open and selecting the file, the file location will be shown in the NAMEtxtFileName textbox.
That is not possible because a file upload element is not accessible programatically, anymore. "Back in the days" it was, and malicious sites silently uploaded sensitive information by setting the file upload control's value to well known password file locations and so on.
You'll just have to put an <input type="file" /> on your form and handle the upload serverside, as suggested in the link on #Bretts answer.

Set the name of file control in controller class.
for example in above code
public ActionResult Index(HttpPostedFileBase NAMEbtnUpload)
change NAMEbtnUpload to NAMEtxtFileName
this resolve your problem.

This code displays an number of li inside an ol

This is what I should have posted in the first place.
This code displays an number of li inside an ol. Each li is represented on the page with a number(1 thru ...). Is there any way that I can access the current li number value with HTML, C#, Razor or JavaScript so that I can display it myself elsewhere on the page?
<div id="movieslist">
<ol>
#foreach(var row in data)
{
<li>
<table>
<tr>
<td width="950px" valign="baseline">#row.Name, #row.ReleaseYear, #row.Genre</td>
<td align="right" width="50px">
#{displayCount++;#displayCount;}
</td>
<td>
<select style="background-color:ThreeDFace">
<option>Choose Action</option>
<option onclick="window.location='dataMovies.cshtml?id=#row.id'">Google it</option>
<option onclick="window.location='EditMovie.cshtml?id=#row.id'">Edit Movie</option>
<option onclick="window.location='DeleteMovie.cshtml?id=#row.id'">Delete Movie</option>
</select>
</td>
</tr>
</table>
</li>
}
</ol>

I assume you mean the numbering that is automatically allied by the browser when ol or Ordered List is used.
With JQuery you could use .index()
In CSS3 you can use the nth-child pseudo-selector to style specific elements:-
http://reference.sitepoint.com/css/pseudoclass-nthchild

If you want to display it yourself, use ul and a counter. However, you can slightly modify the automatically displayed numbers as well.

This post will help you to achieve this.