使用AJAX在jquery对话框(C#inside)内的jquery选项卡内加载MVC用户控件

我有一个产品列表索引页。从这个页面我想能够打开一个对话框与下列选项卡。编辑/创建产品、产品图像和品牌选项卡。brands选项卡并不特定于正在编辑/创建的产品,也不需要传递ID。我将所有内容分解为以下部分视图:NewProduct、EditProduct、ProductImages和brands。我当前的实现使用Jquery对话框和选项卡,但是我需要帮助获得正确的行为。

完成产品对话框.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>

完成索引.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>

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);
        }