how to call action method from modal popup

Question

_{Saturday, September 12, 2015 11:06 AM}

i have following code

  <button type="button" class="btn btn-primary btn-xs active" data-toggle="modal" data-target="#confirmation" >Delete</button>
                         


                            <div class="modal fade bs-example-modal-sm" id="confirmation" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        
        <h4 class="modal-title" id="myModalLabel2">Do you want to delete?</h4>
        
      </div>
      <div class="modal-body">

          

      <button type="submit" class="btn btn-success btn-sm" id="yes">Yes</button> 
      <button type="submit" class="btn btn-danger btn-sm" data-dismiss="modal">Cancel</button>
      </div>
      
    </div>
  </div>
</div>

and have too following

<script type="text/javascript">

    $(document).ready(function () {
        $('.close-alert').click(function (e) {
            $(".close-alert").alert('close')
        })
    })

    $(document).ready(function () {


        $('#yes').click(function (e) {
            e.preventDefault()
            alert('You have successfully deleted');
            $('#confirmation').modal('hide');//hide the modal when click yes
        })


    })


</script>

can any tell me how to call action mthod delete when yes press from above

All replies (10)

_{Saturday, September 12, 2015 11:31 AM ✅Answered}

Let's say you wanted to delete a certain element when the "Yes" element in your modal was clicked. You could perform a jQuery-based POST call that would pass in the value that you wanted to delete as seen below :

$('#yes').click(function (e) {
      // Prevent your default behavior
      e.preventDefault();
      // Get the key for the element you want to delete (perhaps reading from a hidden field etc.)
      var keyToDelete = $('#YourKey').val();
      // Perform your POST to delete the element
      $.post('@Url.Action("Delete","Controller")', { 'keyToDelete' : keyToDelete }, function(){
            alert('You have successfully deleted');
            $('#confirmation').modal('hide');
      });           
})

You would just need to have a Controller Action that corresponds to the method you are posting to decorated with the [HttpPost] attribute so that it could accept POST calls :

[HttpPost]
public void Delete(string keyToDelete)
{
       // Logic to delete your specific key here
}

_{Monday, September 14, 2015 5:25 AM ✅Answered}

Hi erum,

<h4 class="modal-title" > @Html.HiddenFor( modelItem => item.StudentID,new { @id = "hdnBool" })

Accoording to your code, I suppose perhaps the issue is related to the above code. Please modify your code as below:

<h4 class="modal-title" > @Html.HiddenFor( modelItem => modelItem.StudentID,new { @id = "hdnBool" })

Besides, I suggest you could use Using F12 Developer Tools to check the hidden field, and make sure it contains value.

Best regards,
Dillion

_{Monday, September 14, 2015 8:30 AM ✅Answered}

erum

Thanks for ur reply..and how to pass selected id to script tag from boostrp modal..i mean how to checkbwhich need to delete

You would likely want to store a hidden field within your actual modal window and each time that you would trigger it, use the triggering element to update that hidden field. For example, you might consider setting a data attribute on your Delete button for each of the elements that you wanted to delete :

<button type="button" class="btn btn-primary btn-xs active" data-toggle="modal" data-target="#confirmation" data-element-to-delete="@YourElementToDelete">Delete</button>

So then when this element is clicked to present the modal, it could read the data attribute and use it to set the hidden field within your modal :

$('[data-element-to-delete]').click(function(){
     // Read the element to delete and set the hidden field to it
     $("#YourHiddenField").val($(this).data('element-to-delete'));
});

Then you would just need to read from that hidden field when you confirmed your deletion :

$.post('@Url.Action("Delete","Controller")', { 'keyToDelete' : $("#YourHiddenField").val() }, function(){
            alert('You have successfully deleted');
            $('#confirmation').modal('hide');
});

_{Saturday, September 12, 2015 12:10 PM}

Thanks for ur reply..and how to pass selected id to script tag from boostrp modal..i mean how to checkbwhich need to delete

_{Saturday, September 12, 2015 1:58 PM}

lets suupose i have code

<div class="modal fade bs-example-modal-sm" id="confirmation_@i" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
          
         <h4 class="modal-title" > @Html.HiddenFor( modelItem => item.StudentID,new { @id = "hdnBool" })

 </h4>
        <h4 class="modal-title" id="myModalLabel2">Do you want to delete?</h4>
        
      </div>
      <div class="modal-body">

          

      <button type="submit" class="btn btn-success btn-sm" id="yes">Yes</button> 
      <button type="submit" class="btn btn-danger btn-sm" data-dismiss="modal">Cancel</button>
      </div>
      
    </div>
  </div>
</div>

<script type="text/javascript">

    $(document).ready(function () {
        $('.close-alert').click(function (e) {
            $(".close-alert").alert('close')
        })
    })

    $(document).ready(function () {


        $('#yes').click(function (e) {
            e.preventDefault()
            alert($('#hdnBool').val());

            alert('You have successfully deleted');
            $('#confirmation').modal('hide');//hide the modal when click yes
        })


    })


</script>

but it does show alert for first vlaue when click on yes ..and not showing value of hidden field for other records

_{Saturday, September 12, 2015 3:00 PM}

If you using HiddenFor you don't want to change the Id, (i am not sure you can), try

alert($('StudentID').val());

If not check the source code to see what is being product for the hidden tags.

_{Sunday, September 13, 2015 6:54 AM}

undefined in alert box

_{Sunday, September 13, 2015 11:42 AM}

any help

_{Monday, September 14, 2015 5:08 AM}

you need to look at your source code to see what Id it has and then apply it, you also need to make sure its unique.

_{Monday, September 14, 2015 7:34 AM}

here is viewsource

<h4 class="modal-title" > <input data-val="true" data-val-number="The field StudentID must be a number." data-val-required="The StudentID field is required." id="hdnBool" name="item.StudentID" type="hidden" value="1" />
 </h4>
        <h4 class="modal-title" id="myModalLabel2">Do you want to delete?</h4>
        
      </div>
      <div class="modal-body">

Last updated on 2015-09-12

Share via

how to call action method from modal popup

Question

All replies (10)

erum

Additional resources