У меня есть страница индекса для перечисления продуктов. На этой странице я хотел бы иметь возможность открыть диалог со следующими вкладками. Редактировать / Создать продукт, Изображения продуктов и вкладку для брендов. Вкладка брендов не относится к продукту, который редактируется / создается, и не требует идентификации. У меня все разбито на следующие частичные представления: NewProduct, EditProduct, ProductImages и Brands. Моя текущая реализация использует Jquery диалоги и вкладки, но мне нужна помощь, чтобы получить правильное поведение.
В настоящее время - я использую Ajax.ActionLink для вызова NewProductDialog, который подготавливает модель представления с логическим значением ProductEditMode, равным false, и возвращает его вместе с частичным представлением. Запрос Ajax принимает возвращенное представление и заполняет его идентификатором «ProductDialog». Тем не менее, частичное представление, которое загружает, содержит 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);
}