CODEWITHSUNDEEP
asp.net-mvc
Greg Gum
Greg Gum

Reputation: 37909

How to send Id to Controller from Ajax Input Button

I have this grid which has an edit button. How do I add code to the input button so that the value of the Id is sent to the Controller?

@using (Ajax.BeginForm("EditLineItem", "OrderSummary", new AjaxOptions() { InsertionMode = InsertionMode.Replace, UpdateTargetId = "content" })) {
<div id="summaryGrid">
    <table >
        <tr>
            <th>Report Type</th>
            <th>Borrower Name</th>
            <th>Property Address</th>
            <th>Est Comp Date</th>
            <th>Report Price</th>
            <th>Exp Fee</th>
            <th>Disc.</th>
            <th>Total Price</th>
        </tr>
        @{
            foreach (var item in Model) {
                <tr>
                    <td >@item.ReportName</td>
                    <td >@item.BorrowerName</td>
                    <td >@item.Address</td>
                    <td >@item.EstimatedCompletionDate</td>
                    <td >@item.ReportPrice</td>
                    <td >@item.ExpediteFee</td>
                    <td >@item.Discount</td>
                    <td >@item.TotalPrice</td>
                    <td >@item.Id</td>
                    <td ><input type="submit" value="Edit" /></td>
                </tr>
            }
        }
    </table> 

</div>

}

Upvotes: 0

Views: 1219

Answers (3)

Greg Gum
Greg Gum

Reputation: 37909

I have since found an even easier way of doing this:

Use the <button> element instead of <input>

With <button> you can do this:

 <button type="submit" value="@item.Id" name="id">Edit</button>

and then in the controller, all you need is this:

 public ActionResult EditLineItem(int id)
 { //Do something with id}

Note that this does not work with IE6.

Upvotes: 0

Greg Gum
Greg Gum

Reputation: 37909

To add to Khalid's answer: I tested with this form:

 <form method="get">
    <input type="submit" name="Id1" value="Edit" id="id1" />
    <input type="submit" name="Id2" value="Edit" id="id2" />
     <input type="submit" name="Id3" value="Edit" id="id3" />
</form>

The post looks like this when clicking on the third button:

http://localhost:34605/HtmlPage.html?Id3=Edit

In other words, the browser passes the name of whichever button is clicked.

This is an example of getting the Id in the controller:

if (Request.QueryString.HasKeys()) {
            string key = Request.QueryString.GetKey(0);

            int id;
            int.TryParse(key.Substring(2, 1), out id);

            Response.Write("You selected id: " + id);
        }

Upvotes: 1

Khalid Abuhakmeh
Khalid Abuhakmeh

Reputation: 10839

just put a name on your input button.

<input type="submit" name="id" value="edit" />

Then on your action, you should be able to get the value for id.

If you want more complexity then you are going to have to rethink the way you are doing it. Most likely by writing your own JQuery methods.

$('input.edit').on('click', function (evt) {
   evt.preventDefault(); 
   var values = $(this).data();
   $.post($(this).attr('href'), values, function (result) { /*do something*/ });
 });

Html :

  <a href="/edit/1" class="edit" type="submit" data-id="1" data-method="edit" />

That's a start, but you could probably tweak it to fit your needs. At that point, you don't need to wrap the whole table with the Ajax.BeginForm.

Upvotes: 1

Related Questions