I have a shopping cart form with any number of items (products). For each item, there is a delete-button. At the bottom of the form, there is an update-quantities-button. Each of the delete-buttons should post "delete" and Id. The update-button should post "update" and the entire array of values from the input fields.
I have spent some time googling for answers, but every mention of "multiple submit buttons in one form" I could find, refers to different actions per button. I want to point to the same action, but with a different Id for each button. That means I cannot use asp-action="someAction" asp-route-id="someId" in the FORM-tag.
My questions:
1) How to send action and Id to the controller (for delete item)? If I put the Id inside value="" in the button-tag, the Id will be displayed on the button. I don't want that.
2) How to send the array of values from all the item's quantity input-field, and how to match each value to the appropriate Id (in the action method)?
This is my cart:
<form>
<table>
#foreach (var item in Model.ShoppingCartItems)
{
<tr>
<td nowrap>
<a asp-action="Details" asp-route-id="#item.ProductId">
#item.ProductTitle
</a>
</td>
<td nowrap>
#Html.DisplayFor(Model => item.ProductPrice)
</td>
<td nowrap>
<input asp-for="#item.Quantity" value="#item.Quantity" />
</td>
<td nowrap>
#Html.DisplayFor(modelItem => item.LineSum)
</td>
<td>
<button type="submit" formaction="Delete">Delete</button>
</td>
</tr>
}
<tr>
<td colspan="3"><strong>Sum</strong></td>
<td nowrap><strong>#Html.DisplayFor(model => model.TotalSum)</strong></td>
<td></td>
</tr>
<tr>
<td colspan="3">
<button type="submit" formaction="Update">Update quantities</button>
</td>
<td colspan="2">
<a asp-action="Checkout">Go to checkout</a>
</td>
</tr>
</table>
</form>
The action methods haven't been written yet. I'm not expecting anyone to code for me, I just need a nudge in the right direction. :)
You don't have to make it type="submit". you can make it normal Ajax request.
(1) you can add id in attr (ex: data-id = "#Id") and make javascript ajax call when press delete call this function and read attr value.
(2) you can pass an array in JSON format
read more from here
https://www.codeproject.com/Questions/834557/Pass-an-array-to-MVC-Controller-from-ajax
How to pass Array to MVC Controller with Jquery?
Related
I need to call the show button via code but in page we have multiple show buttons without id. How to hit a particular "show" button suppose 3rd show?
Assuming there is no way of uniquely identifying each submit (far, far from ideal) - you can simply reference the index:
document.querySelectorAll('[type="submit"]')[2]
If you have jQuery on the page you may also write:
$('[type="submit"]')[2]
Again, to reiterate, this is not a great way of achieving this at all - but given restrictions you have over the mark-up, it answers the question you're asking.
As an aside, the documents themselves may not have id attributes, but try and see if there is something uniquely identifiable about one of the parent elements perhaps, and traverse from there.
You can use jquery selector $('input[type=submit]') to get all input which has type=submit. More over you need to get 3rd submit button then use :nth(2) like $('input[type=submit]:nth(2)'). :nth will return element based on starting index with 0.
Learn more about jquery selector here
You can check it below. You should be using submitButton.click() instead of submitButton.val(). I have used submitButton.val() for just display purpose.
function getThirdSubmitButton() {
var submitButton = $('input[type=submit]:nth(2)');
alert(submitButton.val())
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="submit" value="Show 1" />
</td>
</tr>
<tr>
<td>
<input type="submit" value="Show 2" />
</td>
</tr>
<tr>
<td>
<input type="submit" value="Show 3" />
</td>
</tr>
<tr>
<td>
<input type="submit" value="Show 4" />
</td>
</tr>
</table>
<input type="button" value="Get 3rd submit button" onclick="getThirdSubmitButton()" />
I use visual studio 2010 with framework2.0
I design a page use c# ,now ,just called A.aspx.
the page have a table to layout,
like
<table> <tr>
<td>
Name
</td>
<td>
<asp:TextBox .../>
<div id="div1" style="vertical-align: bottom;">
<img.. />
</div>
<div><img ../></div>
<asp:Label .../>
<asp:Label .../>
</td>
</tr>
</table>
Now ,I want to let second<td></td> layout one row. how to set up?
I try <td style ="float:left"> but not worked,it always show two row.
can somebody help me with this?
First understand your layout, here is an example with borders
If you want to float elements try a layout using div and css
A layout with tables is very hard to work with and nobody is doing it anymore. You can use tables for specific situation only if you like but most of the time try to use div layout and the other elements to organize content.
HTML
<table class="borde">
<tr class="borde">
<td class="borde">
Name
</td>
<td class="borde">
fffff
<div class="divRojo"></div>
fffff
</td>
</tr>
</table>
CSS
.borde { border:1px solid black; }
.divRojo { border:1px solid red; }
With one more row and the div
<table class="borde">
<tr class="borde">
<td class="borde">
Name
</td>
<td class="borde">
fffff
<div class="divRojo"></div>
fffff
</td>
</tr>
<tr>
<td colspan="2">
<div>Content in one column in a new row</div>
</td>
</tr>
</table>
You want your second <td> in one row? So, create another <tr>?
<table>
<tbody>
<tr>
<td>
Name
</td>
</tr>
<tr>
<td>
<textarea></textarea>
</td>
</tr>
</tbody>
</table>
http://jsbin.com/uJenUVOx/1/edit
I have fix this question ,the second <td> use <table> then can solve that question.
I'm working on a project that is in ASP.NET WebForms on .NET 2.0 and am running into a problem I can't seem to find a cause for. I have the following code in my aspx file:
<table>
<tr>
<td>
<asp:HyperLink ID="supportLink" runat="server">Customer Support Docket</asp:HyperLink>
</td>
</tr>
<tr>
<td>
<asp:HyperLink ID="entitlementsLink" runat="server">Edit Entitlements</asp:HyperLink>
</td>
</tr>
</table>
And when I run locally in debug mode, it works great. The links appear and the HTML is rendered properly as such:
Local Rendered HTML
<table>
<tr>
<td>
<a id="ctl00_ContentMain_supportLink" href="ViewCustomer.aspx?customerid=659">Customer Support Docket</a>
</td>
</tr>
<tr>
<td>
<a id="ctl00_ContentMain_entitlementsLink" href="EditEntitlements.aspx?customerid=659">Edit Entitlements</a>
</td>
</tr>
</table>
However, when I run it on my server in production, I get the following HTML generated:
Server Rendered HTML
<table>
<tr>
<td>
<a id="ctl00_ContentMain_supportLink">Customer Support Docket</a>
</td>
</tr>
<tr>
<td>
<a id="ctl00_ContentMain_entitlementsLink">Edit Entitlements</a>
</td>
</tr>
</table>
As you can see, the href is missing from both. In my code behind I am adding the URLs since I was having a hard time getting them to render properly in the aspx file:
Code Behind File
protected void Page_Load(object sender, EventArgs e)
{
supportLink.NavigateUrl = string.Format("ViewCustomer.aspx?customerid={0}",
Request.QueryString["customerid"]);
entitlementsLink.NavigateUrl = string.Format("EditEntitlements.aspx?customerid={0}",
Request.QueryString["customerid"]);
}
At this point I'm not sure what I can do. My plan was to re-write this site in the next few weeks in MVC4 but seeing as this is an internal site and not generating money it is low on my priorities list and won't get much more attention for awhile, which means I need to fix this issue.
The server environment is IIS 6 on Windows Server 2003 and the HTML renders this way in both IE9 as well as Chrome 24.0.1312.57. I have cleared the cache in both browsers to no avail and I know that the page is getting updated after a publish because other features that I added with the same change are actually working in production.
EDIT
Rezalas was wondering where I got the customerid from. It is from the query string. To show that a blank query string wouldn't cause this here is the local and production HTML with no query string:
Local Rendered With No Query String
<table>
<tr>
<td>
<a id="ctl00_ContentMain_supportLink" href="ViewCustomer.aspx?customerid=">Customer Support Docket</a>
</td>
</tr>
<tr>
<td>
<a id="ctl00_ContentMain_entitlementsLink" href="EditEntitlements.aspx?customerid=">Edit Entitlements</a>
</td>
</tr>
</table>
Production HTML With No Query String
<table>
<tr>
<td>
<a id="ctl00_ContentMain_supportLink">Customer Support Docket</a>
</td>
</tr>
<tr>
<td>
<a id="ctl00_ContentMain_entitlementsLink">Edit Entitlements</a>
</td>
</tr>
</table>
For clarification, where is the customerid value coming from? Are you certain that the value when ran on the server is being properly pulled? I say this because it looks as though the ID isn't being provided, and as such the string isn't being built and the navigate url is being excluded because it doesn't have a value.
Here i am a dragging a table(1) row and dropping it in another table(2) using asp.net mvc similar to this one http://www.redips.net/javascript/drag-and-drop-table-row/ and the values are from database .It is working fine and what i need is the html table values (i.e the values inside the td) of the table(2).how can i get those values and save it in dataset in asp.net MVC.Here is my code
<div id="drag">
<table class="tbl1">
<tr>
<th colspan="2">
Table 1
</th>
</tr>
<% foreach (var item1 in Model)
{ %>
<tr class="rl">
<td class="rowhandler">
<div class="drag row">
<%= Html.Encode(item1.Id) %>
</div>
</td>
<td class="rowhandler">
<div class="drag row">
<%= Html.Encode(item1.Title) %>
</div>
</td>
</tr>
<% } %>
<tr style="display: none;">
<td colspan="2">
<span>Message line</span>
</td>
</tr>
</table>
<table id="tab" runat="server">
<tr>
<th colspan="2" class="mark">
Table 2
</th>
</tr>
<tr class="rd">
<td>
</td>
<td>
</td>
</tr>
<tr style="display: none;">
<td colspan="2">
<span>Message line</span>
</td>
</tr>
</table>
</div>
Any suggesion?I am new to MVC
Use jQuery ajax to save the data in server. You can make a call to a controller action from your jquery with your data and it can save the data to your tables.
var mydata=""; /// read your table cells values and store it in this string
$.post("yourcontroller/action/", { data : mydata} ,function(response){
//do something with the response from action
});
As Brian already suggested, traversing the DOM maybe a bad idea. A better way would be to store the table2 data in a javascript array (whenever a drop event occurs add to the array, or remove from the array when cells are dragged off the table). Then have an ajax call to submit the whole array in one go.
If I am understanding this correctly when the page loads you have the data for both tables in the database. You can just keep a working set of the changes being made to the table and update those records accordingly. Add logic to the "drop" event in your JS to store the item's ID and it's new position.
This saves you from having to update unaffected records and also from traversing the entirety of both tables on submit.
I have a table with text box asking for Name and Address for reference. If need be, I would like the user to have the ability to add more and not be restricted to just one. How would I add a new table to a form by clicking on my "getMore" button?
<table style="width:50%;">
<tr>
<th colspan="2">Reference</th>
</tr>
<tr>
<td>Name</td>
<td><input id="txtRefName" type="text" /></td>
</tr>
<tr>
<td>Address</td>
<td><input id="txtRefAddress" type="text" /></td>
</tr>
<tr>
<td>City</td>
<td><input id="txtRefCity" type="text" /></td>
</tr>
<tr>
<td>State</td>
<td><input id="txtRefState" type="text" /></td>
</tr>
<tr>
<td>Zip</td>
<td><input id="txtRefZip" type="text" /></td>
</tr>
<tr>
<td>Phone</td>
<td>(H)<input id="txtOtherHPhone" type="text" /><br />
(W)<input id="txtOtherWPhone" type="text" />
</td>
</tr>
</table>
<br />
<asp:Label ID="Label1" runat="server" Width="30%"></asp:Label>
<input type="button" name="getPrev" value="Prev" onclick="history.back(-1)" />
<asp:Label ID="Label2" runat="server" Width="10%"></asp:Label>
<input type="submit" name="getMore" value="More..." />
<asp:Label ID="Label3" runat="server" Width="10%"></asp:Label>
Just check this article. You can bind to a list of references without any pain. All you need now is to modify your controller a bit and to add another table to html using javascript and update the identifier on a click on the button. And it's very easy to do using jQuery.
One way is to setup your action method to accept the posted controls, submit the data to the database, and recreate the view with the added table (similar to postbacks in web forms). The postback can be wrapped in an AJAXForm to help make it a rich ui.
You can also create the table programmatically with javascript by using the DOM to create a table, row, cell, and control elements.
Lastly, JQuery can stream a partial view to the client via AJAX. You could setup the table as a partial view, stream it to the client when the link is clicked.
Any of these options appeal to you? I can give you more details then.
EDIT: To use JQUery, you can add an action method to a controller like:
public class TestController {
public ActionResult GetAsync()
{
return PartialView("MyView");
}
}
In the view, using jquery, you can do this:
$.get("/Test/GetAsync", function(data) {
//Data is html so we just need to clear the previous result (if needed)
//And add the new data
$("#paneltoshow").html(data);
//or use an alternate approach like:
$("<div/>").html(data).appendTo("#paneltoappendto");
});
Check out JQuery.com, documentation tab for more information (manipulation tab, don't have the link handy, sorry).