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

Question

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

目前 - 我使用 Ajax.ActionLink 调用 NewProductDialog，它准备了一个将 bool ProductEditMode 设置为 false 的 View 模型，并将其与部分 View 一起返回。 Ajax 请求获取返回的 View 并使用 ID“ProductDialog”填充 a。但是，正在加载的部分 View 包含用于初始化对话框和选项卡的 javascript，并且似乎无法正常工作。我在这里不知所措，也许我做错了，所以我想我会先在这里问。这是我第一次真正尝试使用 AJAX。

完成 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>

完整的 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>

相关 ProductController.cs 片段

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

这解决了我的问题:

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

不能同时使用 Microsoft Ajax 和 Jquery，显然(即使它们与 mvc2 打包在一起)我不得不用 Jquery 重写我的 ajax 调用，现在对话框工作正常，我到处都有它们。