Utilisation d'AJAX pour charger un contrôle utilisateur MVC dans un onglet jquery à l'intérieur d'une boîte de dialogue jquery (C# Inside)

Question

J'ai une page d'index pour la liste des produits. À partir de cette page, j'aimerais pouvoir ouvrir une boîte de dialogue avec les onglets suivants. Modifier/Créer un produit, des images de produits et un onglet pour les marques. L'onglet Marques n'est pas spécifique au produit en cours de modification/création et ne nécessite pas de passer un identifiant. J'ai tout brisé dans les vues partielles suivantes: NewProduct, EditProduct, ProductImages et Brands. Ma mise en œuvre actuelle utilise des boîtes de dialogue et des onglets Jquery, mais j'ai besoin d'aide pour obtenir le bon comportement.

Actuellement - j'utilise un Ajax.ActionLink pour appeler NewProductDialog, qui prépare un viewmodel avec un ProductEditMode booléen à false et le renvoie avec la vue partielle. La requête Ajax prend la vue renvoyée et remplit une avec l'ID "ProductDialog". Cependant, la vue partielle du chargement contient le javascript pour l'initialisation du dialogue et des onglets, et ne semble pas fonctionner. Je suis perdu ici, et peut-être que je me trompe terriblement, alors j'ai pensé que je demanderais d'abord ici. C'est ma première véritable tentative d'utilisation d'AJAX.

complet 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> 

complet 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 connexes 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

Cette résolu mon problème:

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

ne peux pas utiliser Microsoft Ajax et Jquery en même temps, apparemment (même si ils sont emballés avec MVC2) je devais réécrire mon ajax appelle avec Jquery, et maintenant les dialogues fonctionnent bien, je les ai partout.