使用AJAX在jQuery对话框内的jQuery选项卡内加载MVC用户控件（C＃内部）

Question

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

Answer 1

This solved my issue:

missing ) after argument list error when using Ajax.ActionLink mvc2

Cant use Microsoft Ajax and Jquery at the same time, apparently(even though they come packaged together with mvc2) I had to rewrite my ajax calls with Jquery, and now the dialogs work fine, I've got them everywhere.