We Keep Coding

Get table cell value and submit to a delete function

I have a table which displays data from my database. I want to provide a button which will delete data from a table based on the row selected. Specifically based on the value of a specific cell of that table.
I've tried wrapping a button inside a form element as an extra element inside of each row, but this doesn't seem to work for 2 reasons. 1, it triggers the OnGet() function in my controller and 2 it doesn't seem to bind the cell data value to my 'SourceTable' property.
The following is my front-end table:
<table class="table">
<thead>
<tr>
<td>OrderIdentifier</td>
<td>Step Number</td>
<td>CreateDate</td>
<td>Step Status</td>
<td>Source Table</td>
</tr>
</thead>
#foreach (var order in Model.order.Steps)
{
<tr>
<td>#order.OrderIdenfitier</td>
<td>#order.Name</td>
<td>#order.CreateDate</td>
<td>#order.StepStatus</td>
<td>#order.SourceTable</td>
<td>
<a class="btn btn-dark"
asp-page="./OrderDetail"
asp-route-orderId="#order.OrderIdenfitier">
<i class="glyphicon glyphicon-zoom-in"></i>
Details
</a>
</td>
<td>
<form method="delete">
<input type="hidden" class="form-control" asp-for="SourceTable" />
<button type="submit" class="btn btn-dark">
<i class="glyphicon glyphicon-zoom-in"></i>
Delete
</button>
</form>
</td>
</tr>
}
And on the backend, I'd like to be passing in the SourceTable cell value of whatever row the button is clicked on into this function:
public IActionResult OnDelete(string SourceTable)
{
//Take SourceTable parameter, pass to data access layer, and delete from database.
return Page();
}
I would like to have the value of the SourceTable cell passed to my OnDelete function, but this doesn't occur. Additionally, my 'OnGet()' function is triggered when I click my delete button, not the 'OnDelete()' function. The I form I embedded the button in has action="delete", so I would think that it would go to the OnDelete() function, but that doesn't seem to be the case.

HTTP DELETE method is currently not supported by <form> element. That's why you hit OnGet() in your Razor page. You are still able to use OnPost() for that purpose with binding form values (e.g. hidden inputs) to action method parameters.
The second issue is with your asp-for input tag helper. By default it evaluates its expression against PageModel. You can use # to override that behaviour, especially when you're in a foreach loop. Your form then could look like this:
<form method="post">
<input type="hidden" asp-for="#order.SourceTable"/>
<input type="submit" vaue="Delete"/>
</form>
and action method:
public IActionResult OnPost(string SourceTable)
{
// delete record here
return RedirectToPage();
}
Maybe you don't like the idea to delete records in OnPost handler, which you would like to reserve for some other action.Then you can use named handler method like OnPostDelete(string SourceTable). All you have to do is to add attribute asp-page-handler="delete" to the <form> element:
<form asp-page-handler="delete" method="post">
<input type="hidden" asp-for="#order.SourceTable"/>
<input type="submit" value="Delete"/>
</form>
And maybe you don't like the idea of having a separate form for each row in the table. Then wrap the form around the table and use asp-route- prefix on each delete button to specify parameter binding:
<form method="post">
<table class="table">
<thead>
<!-- ... -->
</thead>
<tbody>
#foreach (var order in Model.order.Steps)
{
<tr>
<!-- ... -->
<td>
<input type="submit" value="delete" asp-page-handler="delete" asp-route-sourcetable="#order.SourceTable" />
</td>
</tr>
}
</tbody>
</table>
</form>
You can find more valuable information in artice Introduction to Razor Pages in ASP.NET Core.

Get input value on server side

I'm having some trouble and not sure what's going on.
I have a form with input value and want to be able to get that input value and send it back to my controller (server side).
My html code
<form action="/Home/Search" method="get">
<button class="search-btn-widget"></button>
<input class="search-field" id="sub" type="text" onblur="if(this.value=='')this.value='Search';" onfocus="if(this.value=='Search')this.value='';" value="Search" />
</form>
Then in my controller I have
string sub = Request["sub"];
However it ends up being null and not sure what's going on. Any ideas?

Just to make it work: add the name attribute
<input class="search-field" id="sub" name="sub" ...
but check this.

You need to add the name attribute to the input tag.
If you pull up the developer console and take a look at the HTTP GET request that is being sent, you will see that no query string is being associated with the request. This will let you know that the issue on the HTML side and not the ASP.Net MVC side.
Update input tag:
<input class="search-field" id="sub" name="sub" type="text" onblur="if(this.value=='')this.value='Search';" onfocus="if(this.value=='Search')this.value='';" value="Search" />
Update Controller Action to:
public ActionResult Search(string sub)

1) If you wanna see your input into the Request you must send your Form as POST:
<form action="/Home/Search" method="POST">
2) Make sure that input has a name:
<input class="search-field" id="sub" name="name"
type="text"
onblur="if(this.value=='')this.value='Search';"
onfocus="if(this.value=='Search')this.value='';"
value="Search" />
Then you will be able so see It in the request

You should add the name attribute to the input element.

Can't get input type="text" value in action on form submit?

In a Razor view I have input type="text", a hidden field and a button. I can access hidden field from Form collection but its weird I cant access input type="text" value inside my action. I am not sure if my understanding is correct or not but I was thinking as all fields inside form should be available inside action.
Below is my code please:
#using (Html.BeginForm())
{
<div style="margin-top: 40px;">
<input id="txtDateFrom" class="span2" size="16" value="#Model.StartDate.ToString("dd/MM/yyyy") " readonly="readonly" type="text">
#Html.Hidden("currencyCode", (object)ViewBag.currencyCode)
</div>
<button onclick="#Url.Action("ExchangeRateDetails", "ExchangeRate")" class="btn btn-lg span2 ARML50px">
}
I highly appreciate your time, guidance and help.

The reason your hidden input works is that you render this with help from the Html helper #Html.Hidden. This helper render the input field with the name attribute.
Your <input type="text"> is missing the name attribute. So try writing like this:
<input id="txtDateFrom" name="txtDateFrom" class="span2" size="16" value="#Model.StartDate.ToString("dd/MM/yyyy") " readonly="readonly" type="text" />
The name="txtDateFrom" will make the value appear in your FormCollection.

Try this way
You don't need onclick="#Url.Action("ExchangeRateDetails", "ExchangeRate")" to the button
Change your button for below way
<button type="submit" class="btn btn-lg span2 ARML50px">
And Now your controller can get the input text
[HttpPost]
Public ActionResult ExchangeRateDetails(YourmodelClass xxx)
{
string dates=Model.StartDate;
}
This website have lot and lot of answers for how to send a model values from view to controllers by see the Related discussion on this page right corner .

Model binding nested collections in editor templates

I have an editor template that I use for a view model, EditFeeContentViewModel. This view model holds a collection that's added/removed through JavaScript. I'm adding the following HTML via microtemplating for whenever a new item is added so the model binding will work:
<script id="feeContentTemplate" type="text/html">
<tr id='RowContentId<%= ContentId%>'>
<td>
<input type="hidden" name="ContentFeeViewModels.Index" value="<%= ContentId%>"/>
<input type="hidden" name="ContentFeeViewModels[<%= ContentId%>].ContentId" value="<%= ContentId%>" />
<%= ContentId%>
</td>
<td><input type="hidden" name="ContentFeeViewModels[<%= ContentId%>].ContentName" value="<%= ContentName%>" />
<%= ContentName%>
</td>
<td><input type="text" name="ContentFeeViewModels[<%= ContentId%>].Allocation" value="<%= Allocation%>" /></td>
<td><input type="text" name="ContentFeeViewModels[<%= ContentId%>].Comments" value="<%= Comments%>"/></td>
<td>Remove</td>
</tr>
</script>
Now, this works fine for when my view model isn't nested. It submits to the controller, has all of the data intact, etc.
However, when it's nested, obviously the name is no longer correct and the model binding fails. Instead of ContentFeeViewModels.Index, I might need FeeContents.ContentFeeViewModels.Index.
Since this is being done through JavaScript, I don't know how I could use the HTML helpers to generate the names correctly. How can I find out if/where the view model is nested and generate a string to represent its location so the modelbinding happens correctly?
I thought about manually setting a string in EditFeeContentViewModel that a parent view model could set to represent the property name, but that seems cumbersome and error prone. Is there a better approach to this?

I figured out that you could use ViewData.TemplateInfo.HtmlFieldPrefix to get the path value.
So my code now looks like:
var contentFeeModelPrefix = "";
if ("#ViewData.TemplateInfo.HtmlFieldPrefix" != "") {
contentFeeModelPrefix = "#ViewData.TemplateInfo.HtmlFieldPrefix" + ".";
}
I can then use that variable in my JavaScript as the prefix to the various fields.

Can I pass a different value as a input from using button but display something else in MVC3

I have a list of button which has to display the number of comments as the value of the button. But when I click the button I want to send/pass the comment Id to the method that is submitted. Is there a way to achieve this kind of thing?
Edited:
What I did was, In the table That I have list of buttons
#foreach(var s in Model.List)
{
<tr>
<td style="text-align:left;">#s.ID</td>
<td style="text-align:center;">#s.CD</td>
<td style="text-align:center;">#s.DE</td>
<td style="text-align:center;">
<input class="xxxxx" style="text-align:center;" type="submit" name="count" value ="#s.k" />
<input type="hidden" name="SupportID" value="#s.ID" />
</td>
</tr>
}
This is passing the S.ID to the controller method, But it is not intuitive and I feel that is not the best method to do it.

Do you need to pass anything else apart from the ID ?
If not then you can just use a simple anchor and set the URL to be something like
href="/Page/Method/#s.ID"
and create the method that accepts the ID.
Alternatively you can use jQuery to do an AJAX call to the method, you will then have access to any attributes on the button element to then use in the AJAX Call.