How to pass iteration variable to bootstrap modal popup in partial view asp.net mvc

Question

i have a delete button after the confirmation i want to call method. but right now after model up is opened method can not be call from view to controller. i want to call delete method after the confirmation on model popup click.if anyone has a solution please help me and if any other method for this gives an example.

here is my popup model

<div class="modal fade" id="confirmDelete" role="dialog" aria-labelledby="confirmDeleteLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title">Delete Parmanently</h4>
        </div>
        <div class="modal-body">
            <p>Are you sure about this ?</p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            <button type="button" class="btn btn-danger" id="confirm">Delete</button>
        </div>
    </div>
</div>

here is my jquery on same partial view page

<script type="text/javascript">
    $('#confirmDelete').on('show.bs.modal', function (e) {
        $message = $(e.relatedTarget).attr('data-message');
        $(this).find('.modal-body p').text($message);
        $title = $(e.relatedTarget).attr('data-title');
        $(this).find('.modal-title').text($title);
    });

    $('#confirmDelete').find('.modal-footer #confirm').on('click', function(){
    });
</script>

here is my view

<section class="content">
<div class="row">
    <div class="col-md-12">
        <div class="box box-primary" style="overflow-x:scroll;">
            <div class="box-header">
                <h3 class="box-title">Unit Detail</h3>
                <div class="box_top_botton">
                    <a class="btn btn-md btn-primary" href="@Url.Action("AddUnit", "UnitMasters")">
                        <i class="glyphicon glyphicon-plus-sign"></i> Add Unit
                    </a>
                </div>
            </div><!-- /.box-header -->
            <div class="box-body table-responsive">
                <table class="table table-bordered table-striped example1">
                    <thead>
                        <tr>
                            <th></th>
                            <th>
                                @Html.DisplayNameFor(model => model.UnitId)
                            </th>
                            <th>
                                @Html.DisplayNameFor(model => model.UnitName)
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var item in Model)
                        {
                            <tr>
                                <td nowrap style="font-size:14px !important;text-align:center !important;">
                                    <a class="btn btn-xs btn-primary" href="@Url.Action("AddUnit", "UnitMasters", new { id = item.UnitId })">
                                        <i class="glyphicon glyphicon-pencil"></i>
                                    </a>
                                    &nbsp;&nbsp;|&nbsp;&nbsp;
                                    <a class="btn btn-xs btn-danger" href="@Url.Action("Delete", "UnitMasters", new { id = item.UnitId })" data-toggle="modal" data-target="#confirmDelete" data-title="Delete User" data-message="Are you sure you want to delete this user ?">
                                        <i class="glyphicon glyphicon-trash"></i>
                                    </a>
                                </td>
                                <td>
                                    @Html.DisplayFor(modelItem => item.UnitId)
                                </td>
                                <td>
                                    @Html.DisplayFor(modelItem => item.UnitName)
                                </td>
                            </tr>
                        }
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@Html.Partial("DialogBox", "Home")

here is my controller

public ActionResult DeleteConfirmed(int id)
    {
        UnitMaster unitMaster = db.UnitMasters.Find(id);
        db.UnitMasters.Remove(unitMaster);
        db.SaveChanges();
        return RedirectToAction("Index");
    }

could you please simplify your post description so we can help you on exact what you want? — er-sho, Aug 20 '18 at 12:22
@ ershoaib ... simply i want controller and action name when click on delete button so that i delete that record — NiharikaJagani, Aug 20 '18 at 12:29
try this in you partial view `@{ var controller = ViewContext.RouteData.GetRequiredString("controller"); var action = ViewContext.RouteData.GetRequiredString("action"); }` — er-sho, Aug 20 '18 at 12:45
and pass `controller` and `action` variable to click event of delete button and let me know it work or not — er-sho, Aug 20 '18 at 12:46
Possible duplicate of [Getting controller name from razor](https://stackoverflow.com/questions/26415875/getting-controller-name-from-razor) — freedomn-m, Aug 20 '18 at 12:46
https://stackoverflow.com/questions/4412310/how-to-get-current-controller-and-action-from-inside-child-action — freedomn-m, Aug 20 '18 at 12:47
And many others: https://stackoverflow.com/search?q=mvc+razor+controller+action+name — freedomn-m, Aug 20 '18 at 12:47
when you click onclick function of you delete button of modal popup you want to go respective controller and `DeleteConfirmed` action right with id to delete specific user? — er-sho, Aug 20 '18 at 13:05
if you press `glyphicon-trash` button on your view then you open modal popup and as well as specify `href` to it, if you want to open popup then why you make href ? — er-sho, Aug 20 '18 at 13:08
do you want this `$('#confirmDelete').find('.modal-footer #confirm').on('click', function () { var urlToDelete = @Url.Action("DeleteConfirmed", "ControllerName", new { id = 123 }); //Here is your ajax delete call with above url });` — er-sho, Aug 20 '18 at 13:26
Is code in above comment is working for you? so I'll add this as a answer and you accept the same — er-sho, Aug 21 '18 at 06:10
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/178413/discussion-between-ershoaib-and-niharika-jagani). — er-sho, Aug 21 '18 at 06:11

er-sho · Accepted Answer · 2018-08-21T07:59:10.000

1) Make sure you have referenced to all of below jquery.js, bootstrap.css and bootstrap.js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css" rel="stylesheet" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

2) Add pass your @item.UnitId to data-id data attribute to your glyphicon-trash link like

<a class="btn btn-xs btn-danger" href="#" data-toggle="modal" data-id="@item.UnitId" data-target="#confirmDelete" data-title="Delete User" data-message="Are you sure you want to delete this user ?">
    <i class="glyphicon glyphicon-trash"></i>
</a>

3) Make changes to your script like below

<script type="text/javascript">

var unitId = 0;

$('#confirmDelete').on('show.bs.modal', function (e) {

    var message = $(e.relatedTarget).data('message');
    $(this).find('.modal-body p').text(message);

    var title = $(e.relatedTarget).data('title');
    $(this).find('.modal-title').text(title);

    unitId = $(e.relatedTarget).data('id');
    console.log(unitId);
});


$('#confirmDelete').find('.modal-footer #confirm').on('click', function () {
    var urlToDelete = '@Url.Action("DeleteConfirmed", "ControllerName")/' + unitId;
    console.log(urlToDelete);
    //Here is your ajax delete call with above url 
});

4) Your modal popup will remain same no any changes

Output:

@Niharika Jagani, view the answer might be it help you :) – er-sho Aug 21 '18 at 07:56 — er-sho, Aug 21 '18 at 07:56
glad to hear that you have get rid from your problem :) – er-sho Aug 21 '18 at 09:26 — er-sho, Aug 21 '18 at 09:26

How to pass iteration variable to bootstrap modal popup in partial view asp.net mvc

1 Answers1