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>

Answer 1

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.