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

Question

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

当前 - 我使用Ajax.ActionLink调用NewProductDialog，它准备一个布尔型ProductEditMode设置为false的视图模型并将其与部分视图一起返回。 Ajax请求获取返回的视图并填充ID为“ProductDialog”的ID。但是，加载的部分视图包含用于初始化对话框和制表符的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

不能使用微软的Ajax和jQuery的同时，显然（尽管他们与MVC2打包在一起），我不得不重写我的阿贾克斯与jQuery调用，现在对话框工作正常，我到处都有。