Use two buttons to pass content to one modal in partial view

Question

Displaying product names in a view, with each row of the table having the product name, an edit button, and a delete button; there is also a button to add a new product. Instead of having the controller actions redirect to a different view when the 'Add' or 'Edit' buttons are clicked, can I have a modal pop up instead? I tried this solution from @Shane Courtrille and this one from @Darin Dimitrov, but haven't been able to get it to work; nothing shows up when I click either button. Here's my code:

Views > Products > Index:

<button id="add" class="btn btn-primary modalButton" data-url="@Url.Action("New")">Add Product</button>

<td>
     <a href="#" data-url="@Url.Action("Edit", "Products", new {id = p.Name})" class="glyphicon glyphicon-pencil modalButton" id="edit"></a>
</td> //This is within for loop to display products

<div id="productModal" class="modal hide fade in">
    <div id="productContainer"></div>
</div>
<script>
    $(document)
        .ready(function() {
            $('.modalButton').click(function() {
                    var url = $(this).data('url');                    
                    $.get(url, function(data) {
                            $('#productContainer').html(data);
                            $('#productModal').removeClass('hide');
                        });
                });
        });
</script>

Within ProductsController:

[HttpGet]
public ActionResult New()
{
     var vm = new MyViewModel();    
     return PartialView("_MyModal", vm);
}

[HttpGet]
public ActionResult Edit(decimal id)
{
     var product = _db.Product.SingleOrDefault(p => p.Id == id);
     if(product == null)
          return HttpNotFound();

     var vm = new MyViewModel(product);        
     return PartialView("_MyModal", vm);
}

Finally, within _MyModal.cshtml

@model MyProject.ViewModels.MyViewModel
<div class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button data-dismiss="modal" class="close"><span>&times;</span></button>
                <div class="modal-title">@Model.Title</div>
            </div>
            <div class="modal-body">
                This is my test modal
            </div>
            <div>
                <button name="Modify" class="btn btn-primary" onclick="if (confirm('Are you sure you want to save?')) return @Url.Action("Save");">Save</button>
                <button class="btn btn-default" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>

@Stephen Muecke, the modal is not showing up. I added in some `console.log` statements in the jQuery to make sure I was getting the right element and controller action path (I am), but nothing shows up. — user3517375, Jan 31 '17 at 17:20
First its a bit unclear why its `$('.modalButton')` instead of `$('#add')` since the button has an `id` attribute. Second, you will probably need to add `type="button"` to the ` — , Jan 31 '17 at 23:22
But its unnecessary to be calling a controller method each time to return your modal. Just include the html for the modal in the main view (hidden) and for the 'Add' action, display it, and for the 'Edit' action, get the values that you already have in the view, or if your table does not include all values of the model, call a server method that returns a `JsonResult` with the values. Refer [this fiddle](http://jsfiddle.net/9madrh7g/2/) for a simple example — , Jan 31 '17 at 23:27

score 0 · Accepted Answer · answered Feb 03 '17 at 18:23

Thanks @Stephen Muecke, I was able to get it working. Here's what I ended up doing (started with the fiddle Stephen provided and changed it to use AJAX):

<div class="modal fade" id="plantModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button data-dismiss="modal" class="close"><span>&times;</span></button>
                <div class="modal-title"><h2 id="modalTitle"></h2></div>
            </div>
            <div class="modal-body">
                <label id="plantLabel">Plant Name</label>
                <input type="text" id="plantName"/>
            </div>
            <div>
                <button type="submit" name="Modify" class="btn btn-primary" onclick="if (confirm('Are you sure you want to save?')) return @Url.Action("Save");">Save</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>
<script>
    var button;
    var id;
    var productName = $('#productName');
    var title = $('#modalTitle');
    var modal = $('#productModal');
    $(document).on('click', '.edit',function() {
        button = $(this);
        id = $(this).attr('id');
        $.ajax({
            dataType: 'json',
            url: '/Product/Edit/' + id,
            success: function(data) {
                productName.val(data.Name);
                title.text(data.Title); //Displays 'Edit Product' for modal title
                modal.modal('show').find('input').first().focus();
            }
        });
    });
    $('#productAdd').click(function() {
        button = null;
        id = 0;
        title.text('New Product');
        modal.modal('show').find('input').first().focus();
    });
</script>

And the controller method:

public ActionResult Edit(decimal id){
     var product = _db.Products.Single(p => p.Id == id);
     if(product == null)
          return HttpNotFound();

     return Json(product, JsonRequestBehavior.AllowGet);
}

I also needed to add a reference to "~/Scripts/jquery-ui-{version}.js" to get it to work. Thanks again for the help @Stephen Muecke.

Use two buttons to pass content to one modal in partial view

1 Answers1