I have an index page for listing products. From this page I would like to be able to open a dialog with the following tabs. Edit/Create Product, Product Images, and a tab for Brands. The brands tab isn't specific to the product being edited/created, and doesn't require being passed an ID. I have everything broken up into the following partial views: NewProduct, EditProduct, ProductImages, and Brands. My current implementation uses Jquery dialogs and tabs, but I need help getting the correct behavior.
Currently - I use an Ajax.ActionLink to call NewProductDialog, which prepares a viewmodel with a boolean ProductEditMode set to false and returns it along with the partial view. The Ajax request takes the returned view and populates a with the ID "ProductDialog". However, the partial view thats loading contains the javascript for initializing the dialog and tabs, and doesn't appear to be working. I'm at a loss here, and perhaps I'm doing this horribly wrong, so I figured I would ask here first. This is my first real attempt at using AJAX.
Complete productDialog.ascx
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<MHNHub.Areas.Admin.ViewModels.ProductViewModel>" %>
<div id="dialog" title="Edit Product">
<div id="tabContainer">
<ul>
<% if (Model.ProductEditMode) {%>
<li><%:Html.ActionLink("Edit Product", "EditProduct", "Product", new { id = Model.Product.Id }, null)%></li>
<li><%:Html.ActionLink("Product Images", "Images", "Product", new { id = Model.Product.Id }, null)%></li>
<% } else { %>
<li><%:Html.ActionLink("New Product", "NewProduct", "Product")%></li>
<%} %>
<li><%:Html.ActionLink("Brands", "Brands", "Product")%></li>
</ul>
</div>
</div>
<script type="text/javascript">
$(function () {
$("#dialog").dialog({
bgiframe: false,
height: 600,
width: 900,
padding: 0,
modal: true,
autoOpen: true,
resizable: true
}),
$("#tabContainer").tabs()
});
</script>
Complete Index.aspx
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MHNHub.Areas.Admin.ViewModels.ProductViewModel>" %>
<%@ Import Namespace="MHNHub.Helpers" %>
<%@ Import Namespace="MHNHub.Models" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Index
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="HeaderContent" runat="server">
<strong>Product</strong> Management
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<script type="text/javascript">
$(document).ready(function () {
$("#products").dataTable();
});
</script>
<div id="productDialog">
</div>
<h2>Products</h2>
<%:Ajax.ActionLink("Create New Product", "NewProductDialog", "Product", null, new AjaxOptions { UpdateTargetId = "productDialog", InsertionMode = InsertionMode.Replace })%>
<br />
<hr />
<table id="products" class="display" cellpadding="0" cellspacing="0" border="0" style="width: 900px;">
<thead>
<tr>
<th>
</th>
<th>
Product Description
</th>
<th>
MSRP
</th>
<th>
Is Active
</th>
<th>
Price A
</th>
<th>
Price B
</th>
<th>
Price C
</th>
</tr>
</thead>
<tbody>
<%foreach (var item in Model.ProductList)
{ %>
<tr>
<td>
<%:Ajax.ActionLink(" ", "EditProductDialog", new { id = item.Id }, new AjaxOptions { UpdateTargetId = "productDialog", InsertionMode = InsertionMode.Replace }, new { Class="edit"})%>
<%: Html.ActionLink(" ", "DeleteProduct", new { id = item.Id }, new { Class = "delete" })%>
</td>
<td>
<%: item.Description %>
</td>
<td>
<%: String.Format("{0:C}", item.MSRP) %>
</td>
<td>
<%: item.IsActive %>
</td>
<td>
<%: String.Format("{0:C}", item.PriceA )%>
</td>
<td>
<%: String.Format("{0:C}", item.PriceB) %>
</td>
<td>
<%:String.Format("{0:C}", item.PriceC) %>
</td>
</tr>
<% } %>
</tbody>
</table>
<br />
<%: Html.ActionLink(" ", "Index", "Menu", null, new{id = "backToAdmin"}) %>
</asp:Content>
Related ProductController.cs snippets
public ActionResult NewProductDialog()
{
var viewModel = new ProductViewModel()
{
ProductEditMode = false
};
return PartialView("ProductDialog", viewModel);
}
public ActionResult EditProductDialog(int id)
{
var product = _entities.Products.Where(p => p.Id == id).Single();
var viewModel = new ProductViewModel()
{
ProductEditMode = true,
Product = product
};
return PartialView("ProductDialog", viewModel);
}
public ActionResult NewProduct()
{
var productCategories = _entities.ProductCategories.Where(p => p.ParentId != 0).OrderBy(p => p.CategoryName).ToList();
var brands = _entities.Brands.ToList();
var viewModel = new ProductViewModel()
{
Product = new Product(),
ProductCategories = productCategories,
Brands = brands
};
return PartialView("NewProduct", viewModel);
}