Passing data from View to Controller using multiple POST methods?

Question

I want to allow the user to check a box next to each item that they consider as "Good" and also allow them to delete the list of items with 2 separate button presses. How do I pass data to the corresponding controller actions?

I have an IEnumerable list of objects that contain a bool field.

Public class fruit
{
    public string Name { get; set;}
    public bool IsGood {get; set:}
}

I am displaying this in a table like so:

@model IEnumerable<Fruit> 

<table>
    <thead>
        <tr>
            <th>Good?</th>
            <th>Name</th>
       </tr>
   </thead>
   @foreach (var item in Model)
   {
   <tbody>
        <tr>
            <td><input type="checkbox" class="checkbox" value="@item.IsGood" /></td>
            <td>Item.Name</td>
       </tr>
   <tbody>
</table>
   }

<input class="btn btn-primary" type="submit" name="Update" id="Update" value="Update" />
<input class="btn btn-danger" type="submit" name="Delete" id="Delete" value="Delete" />

How can this be done?

Use editor templates. Refer [this answer](https://stackoverflow.com/questions/12073088/return-listt-from-view-to-controller-in-mvc-3/12073450#12073450) for sample code — Shyju, Jul 27 '18 at 19:19

Rohit Gupta · Accepted Answer · 2018-07-27T20:19:10.593

@model IEnumerable<Fruit> 

<table class="tblFruitDetail">
    <thead>
        <tr>
            <th>Good?</th>
            <th>Name</th>
       </tr>
   </thead>


 @foreach (var item in Model)
    {
      <tbody>
        <tr>
         <td><input type="checkbox" class="checkbox" value="@item.IsGood" id="@item.FruitId"/></td>
         <td>Item.Name</td>
       </tr>
     <tbody>       
    }
 </table>

<input class="btn btn-primary" type="submit" name="Update" id="btnUpdate" value="Update"/>
<input class="btn btn-danger" type="submit" name="Delete" id="btnDelete" value="Delete"/>

var fruitIds = ",";
var checkboxes = document.querySelectorAll('.tblFruitDetail input[type="checkbox"]')

checkboxes.forEach(function(checkbox) {
  checkbox.addEventListener('change', function(e) {
    fruitIds += e.target.id    
  })
});

$("#btnDelete").click( function(){
 $.ajax({
        type:'POST',
        url:'/HomeController/DeleteFruitsById',
        data: fruitIds,
        dataType:'json',            
        success:function(result){
              // do something on success..
        },
        error: function(err){
          // handle error here..
        }
     });
});

HomeController.cs

[HttpPost]
public JsonResult DeleteFruitsById(string fruitIds)  
{   
  // todo: code to delete fruit details.. 
  // Split fruitIds and make it array of string
     string[] fruits = fruitIds.Split(',');
     .
     .
     .
  return Json(result);  
}

This works great. The only thing I had to change was what was in the data for the ajax call to look something like this {fruitIds: fruitIds} — user3266638, Jul 27 '18 at 21:20

score 1 · Answer 2 · answered Jul 27 '18 at 20:24

The name of the button you click will be posted back to the server. If you find Request["Update"] then the Update button was submitted. If you find Request["Delete"], the Delete button was clicked. You can then just decide whether to delete or update in your action method.

You can do something like

public ActionResult EditFruits(IEnumerable<Fruit> model)
{
    if(this.Request.Form.AllKeys.Contains("Delete"))
         DeleteSelectedFruits(model);
    else if(this.Request.Form.AllKeys.Contains("Update"))
         UpdateSelectedFruits(model);
    return Wherever you want to go.
}

Passing data from View to Controller using multiple POST methods?

2 Answers2