Develop Reference

ASP-routing from tavlerow instead of anchor

I'm trying to learn asp.net and I'm trying to use the ASP routing directly from the tablerow (tr), instead of for each anchor point inside the cell.
Below code, I'm able to click the "Case ID" in my table, but this leaves some unclickable area around the actual text. I basically want to be able to simply select the row and pass the #sc.ID for a database query in the ViewCase-page.I want end-user to click "category" (and several columns in the future), without having to define tags everyhwere.
#foreach (var sc in Model.Cases)
{
<tr asp-area="" asp-page="ViewCase" asp-route-ID="#sc.ID">
<td>
<a asp-area="" asp-page="ViewCase" asp-route-ID="#sc.ID">
Case #Html.DisplayFor(Moldel => #sc.ID)
</a>
</td>
<td>
#Html.DisplayFor(Moldel => #sc.Category)
</td>
</tr>
}

It seems you do not want not want to specify the a tag every where. Tag helper does not work for table element, you just add js in the tr element like below:
<table class="table">
#foreach (var sc in Model.Cases)
{
<tr onclick="window.location.href='/ViewCase?ID=#sc.ID'">
<td>
Case #Html.DisplayFor(Moldel => #sc.ID)
</td>
<td>
#Html.DisplayFor(Moldel => #sc.Category)
</td>
</tr>
}
</table>

Multiplying a textbox with a cell in a dynamically created table with JQuery

I have a dynamically created table with id called "editTable" that looks as follows:
<tbody>
#{var i = 0;}
#foreach (var item in Model)
{
<tr>
<td width="25%">
#Html.DisplayFor(modelItem => item.Product.Name)
</td>
<td width="25%">
#Html.DisplayFor(modelItem => item.Quantity)
</td>
<td width="25%">
<div class="editor-field">
#Html.EditorFor(modelItem => item.UnitPrice)
#Html.ValidationMessageFor(model => item.UnitPrice)
</div>
</td>
<td width="25%" id="total"></td>
</td>
</tr>
}
</tbody>
The 3th td-element consists of a C# textbox that is turned into a element in html.
Now I want to multiply the quantity by the unit price to display this value in the 4th td element next to it. This value should update every time the value in the textbox is adjusted. I am a newbie at JQuery / JavaScript and came up with the following code:
// Calculating quantity*unitprice
$('#editTable tr td:nth-child(3) input').each( function (event) {
var $quant = $('#editTable tr td:nth-child(2)', this).val();
var $unitPrice = $('#editTable tr td:nth-child(3) input', this).val();
$('#editTable tr td:nth-child(4)').text($quant * $unitPrice);
});
This doesn't work and only displays NaN in the 4th element. Can anyone help me updating this code to a working version? Any help would be very much appreciated.

I geussed you accidentally switched units and price because it has more logic to change the number of units then the price. I took your html and javascript and tried to change as little as possible to make it work (I'm not saying the solution is perfect, I just don't want to give you a totaly different example of how to do it).
The html (The C# is irrelevant for this problem):
<table id="editTable">
<tbody>
<tr>
<td width="25%">
Product name
</td>
<td width="25%">
5
</td>
<td width="25%">
<div class="editor-field">
<input id="UnitPrice" name="UnitPrice" type="number" value="2" style="width:40px" />
</div>
</td>
<td width="25%" id="total"></td>
</tr>
</tbody>
</table>
The javascript/jquery (which should run on load):
$('#editTable tr td:nth-child(3) input').each(updateTotal);
$('#editTable tr td:nth-child(3) input').change(updateTotal);
var element;
function updateTotal(element)
{
var quantity = $(this).closest('tr').find('td:nth-child(2)').text();
var price = $(this).closest('tr').find('td:nth-child(3) input').val();
$(this).closest('tr').find('td:nth-child(4)').text(quantity * price);
}
The problem you had were with jquery. I've created a function that recieves an element (in our case it's your UnitPrice input), then it grabs the closest ancestor of type tr (the row it's in) and from there it does what you've tried to do.
You've used jquery selector to get all 2nd cells in all table rows, the closest('tr').find limits it to the current row.
You've tried to use .val() on a td element, you should use either .text() or .html(). Instead, You can also add a data-val="<%=value%>" on the td and then use .data('val').
It will be better to take the units directly from $(element).val() and no going to the tr and then back into the td and the input.
To see it working: http://jsfiddle.net/Ynsgf/1/
I hope I didn't caused you any confusion with my explanation and the options I gave you.

Here is another way to write the jquery part.
$('#editTable tr').each(function (i, row) {
var $quant = $(row).find('.editor-field input').val();
var $unitPrice = $(row).find('.editor-field input').val();
$(row).find('td:nth-child(4)').text($quant * $unitPrice);
});

JavaScript How Can I achive this in delete dialog

OK So I have view with data in table and i made delete option like in this tutorial
http://ricardocovo.com/2010/09/02/asp-mvc-delete-confirmation-with-ajax-jquery-ui-dialog/
But Now I have a question How Can I get a Name from the correct line to write something like this
Do you really want to delete "Product Name"

I think he asked about ASP.NET MVC, not Web forms, so the code will be as below
The view will be
<table id="table">
<tr>
<td>Id</td>
<td>Name</td>
<td> </td>
</tr>
#foreach(var item in Mode.Items) {
<tr>
<td>#item.Id</td>
<td>#item.Name</td>
<td><button class="deleted-link" value="Delete">delete</button></td>
</tr>
}
</table>
<div id="delete-dialog" title="Confirmation">
</div>
and the Jquery script on the view should be
$(function(){
//alert($('.deleted-link'));
$('.deleted-link').each(function(){
$(this).click(function(data){
var id = $(this).parent().parent().find('td :first').html();
$('#delete-dialog').html('<p>Are you sure you want to delete the item with id = {' + id + '} ?</p>');
$('#delete-dialog').dialog('open');
});
});
$('#delete-dialog').dialog({
autoOpen: false, width: 400, resizable: false, modal: true, //Dialog options
buttons: {
"Continue": function () {
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
});
You can see the code example at http://jsfiddle.net/SVgEL/
Hope this help.

You can try some thing Like this
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
ImageButton imb = (ImageButton)e.Row.FindControl("deleteButton");
string recordName = e.Row.Cells[3].Text;
imb.OnClientClick = "return confirm('Are You sure Want to Delete the record:- "+ recordName.ToUpper()+" ? ');";
}
}
Normal click Event with button
Delete

What about passing the model to the view and displaying the name?
Cant add comments, sorry for posting here in answers space.
If you dont want to pass the model you can always just pass the name as a parameter to the delete function from the table view.

Assuming that you are already using jQuery, check this out:
<script type="text/javascript">
function removeCar(theLink) {
var theTR = $(theLink).parents('tr');
var model = $(theTR).children('td._model').html();
var theConfirm = confirm("Are you sure you want to remove " + model + "?");
if (theConfirm == true)
$(theTR).remove();
}
</script>
<table>
<thead>
<tr>
<th>Make</th>
<th>Model</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Audi</td>
<td class="_model">A3</td>
<td>Remove</td>
</tr>
<tr>
<td>Audi</td>
<td class="_model">A4</td>
<td>Remove</td>
</tr>
<tr>
<td>Audi</td>
<td class="_model">A5</td>
<td>Remove</td>
</tr>
</tbody>
</table>

A checkbox to select / unselect them all

I want to create a checkbox that will have the "power" to check / uncheck a checkboxfor for each items presents in a list.
Here is part of the view as I built it right now (please bear with the false names and convention):
<p>
#using (Html.BeginForm("SendObj", "Manager"))
{
<p>
Select / UnSelet All Items #Html.CheckBox("selectAll", true)
</p>
<table id="objToSend">
<tr>
<th>Obj Name</th>
<th>Number In Stock</th>
(...)
</tr>
#for (int i = 0; i < Model.Count(); i++)
{
<tr>
<td>#Html.DisplayFor(x => x[i].m_OthObj.m_ObjName)</td>
<td>#Html.DisplayFor(x => x[i].m_NbInStock)#Html.HiddenFor(x => x[i].m_NbInStock)</td>
(...)
<div id="divChckBox">
<td>
#Html.CheckBoxFor(x => x[i].m_IsSelected)
</td>
</div>
</tr>
}
</table>
<input type="submit" value="Send"/>
}
</p>
As for the "how", well, I have searched a bit around and I have tried this jquery script, but to no avail:
**** EDIT ****
Here's a new jQuery based on the comments people posted below. The alerts are there on debug purpose, and both appears when needed:
<script type="text/javascript">
$(document).ready(function() {
alert("The document is ready");
$("#selectAll").click(function() {
alert("The case has been clicked");
var chkValue = $(this).is(":checked");
$("#divChckBox").attr("checked", "checked");
});
});
</script>
I do not mind using jquery, far from it, I just do not know how it works yet. Maybe that's why what I have in mind does not work.
Can anyone help me out? Thank you!
* EDIT *
I will add here what the rendered page gives out for the checkboxes:
<td><input checked="checked" class="chckBoxList" data-val="true" data-val-required="The m_IsSelected field is required." name="[0].m_IsSelected" type="checkbox" value="true" /><input name="[0].m_IsSelected" type="hidden" value="false" /></td>
Maybe that will give out more informations on what's going on.

#Html.CheckBox("TheOneCheckBoxToRuleThemAll")
Change your current checkbox code to:
<td>#Html.CheckBoxFor(x => x[i].m_IsSelected, new{ #class = "checkGroup1"})</td>
The easiest Jquery ever (make sure to put it in document.ready like shown):
<script type="text/javascript">
$(document).ready(function () {
//alert("the document is ready");
$("#TheOneCheckBoxToRuleThemAll").click(function () {
//alert("inside my click event");
var chkValue = $(this).is(":checked");
$(".checkGroup1").prop("checked", chkValue);
});
});
</script>
EDIT:
My previous answer used the .attr() attribute. After testing, I had all sorts of trouble getting that to work. After referring to this SO post, I switched to using .prop() and everything magically began to function correctly.
Jquery .Attr()
Jquery .Prop()
EDIT:
In the example I've provided, your checkboxes MUST look like this:
<input name='itdoesnotmatter' id='donotcare' class='checkGroup1' />
also, do not use that stupid name that I put on there, use something easy like
#Html.CheckBox("MasterCheck")

I stand corrected: CheckBoxFor does NOT allow class setting
In your Helper
<div id="divChckBox">
#Html.CheckBoxFor(x => x[i].m_IsSelected)
</div>
And then make your selector group by the class:
$("#divChckBox :checkbox").attr("checked", "checked");

As there are MANY comments around and many answers, here's my current code (which works!):
<script type="text/javascript">
$(document).ready(function() {
//alert("The document is ready");
$("#selectAll").click(function() {
//alert("The case has been clicked");
var chkValue = $(this).is(":checked");
$(".divChckBox").prop("checked", chkValue);
});
});
</script>
<p>
#using (Html.BeginForm("SendObj", "Manager"))
{
<p>
Select / UnSelet All Items #Html.CheckBox("selectAll", true)
</p>
<table>
<tr>
<th>Card Name</th>
<th>Number In Stock</th>
(...)
</tr>
#for (int i = 0; i < Model.Count(); i++)
{
<tr>
<td>#Html.DisplayFor(x => x[i].m_OthObj.m_ObjName)</td>
<td>#Html.DisplayFor(x => x[i].m_NbInStock)#Html.HiddenFor(x => x[i].m_NbInStock)</td>
(...)
<td>
<input type="checkbox" name="itdoesnotmatter" class="divChckBox" checked="true"/>
</td>
</tr>
}
</table>
<input type="submit" value="Send"/>
}
</p>
Now every checkboxes are checked or not depending on the state of the select all checkboxes! Thank you everyone.
Now I need to solve the problem of "unlinking" the result of the checkbox in my controller because a behavior was linked to this. But it's another problem.

ASP.NET MVC 3 NOT showing appropriate view, action called using jquery

I have a small problem.
My action is :
public ViewResult SearchForRooms(int HotelDDL)
{
List<Room> roomsInHotel = bl.ReturnRoomsPerHotel(HotelDDL);
return View(roomsInHotel);
}
Here is the jquery that is calling the action:
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#HotelDDL").change(function () {
var text = $("#HotelDDL option:selected").text();
var value = $("#HotelDDL option:selected").val();
alert("Selected text=" + text + " Selected value= " + value);
$.post("/Home/SearchForRooms",
{
HotelDDL: $("#HotelDDL option:selected").val()
});
});
});
</script>
And finally, here is the View that should be called:
#model IEnumerable<RoomReservation.Entities.Entities.Room>
#{
ViewBag.Title = "Search";
}
<h2>Result</h2>
<table>
<tr>
<th>
City
</th>
<th>
Hotel
</th>
<th>
Room label
</th>
<th>
Number of beds
</th>
<th>
Price per night
</th>
<th></th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelitem=>item.Hotel.City.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.Hotel.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.NumberOfBeds)
</td>
<td>
#Html.DisplayFor(modelItem => item.PricePerNight)
</td>
</tr>
}
</table>
Everthing is working ok (databse return all rooms correctly) except final view rendering.
I have tried Phil's tool but it doesn't give me any suspicious hints:
RouteDebug.RouteDebugger.RewriteRoutesForTesting(RouteTable.Routes);
So, why is it not showing after jscript send it's post method to SearchForRooms()?
Thank you
P.S. If you need any other piece of code please just say so.

Note that doing an ajax post will not refresh or redirect the page like a classic post would.
The view is not showing because there is no where to place it. You post successfully, and return a view successfully but then do nothing with it. If you want to show the returned view, then you have to append it to the dom somehow. Here is a common method:
<div id="successDiv"></div>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#HotelDDL").change(function () {
var text = $("#HotelDDL option:selected").text();
var value = $("#HotelDDL option:selected").val();
alert("Selected text=" + text + " Selected value= " + value);
$.post("/Home/SearchForRooms",
{
HotelDDL: $("#HotelDDL option:selected").val()
}, function(result){//add callback for success - result is the returned view
$("#successDiv").html(result);//place the view inside of the div
});
});
});
</script>
Comment Response
#TunAntun - You should use a classic post if you want the view to have its own page. There is no way to accomplish this from ajax. You could do this with javascript though
$.post("/Home/SearchForRooms",
{
HotelDDL: $("#HotelDDL option:selected").val()
}, function(result){//add callback for success - result is the returned view
$("#successDiv").html(result);//place the view inside of the div
});
would become
var postForm = document.createElement("form");
postForm.setAttribute("method","post");
postForm.setAttribute("action","/Home/SearchForRooms");
var postVal = document.createElement("input");
postVal.setAttribute("type","hidden");
postVal.setAttribute("name","HotelDDL");
postVal.setAttribute("value",$("#HotelDDL option:selected").val() );
postForm.appendChild(postVal);
document.body.appendChild(postForm);
$(postForm).submit();
This will dynamically issue the post you wanted. Then in your controller it will properly redirect or return a view. It is highly suggested that when returning a view from a [HttpPost] that you use RedirectToAction and then return the view from a [HttpGet] method in order to prevent refresh from reposting old data.