Question

我有一个ASP.NET MVC应用程序，它有一个名为Products的视图。

此产品视图具有使用NavMenuProducts.ascx部分视图实现的左菜单导航。此菜单使用JQuery Treeview实现，因此它具有ProductNames列表作为父节点，并且它是可扩展的（例如：10个产品）。每个产品都有一个ChildNode作为DocTypeName，它是一个超链接（例如：3个DocTypeNames）。

当用户单击ChildNode Hyperlink时，将显示所有匹配的文档，并使用Ajaxy调用实现。这样用户就可以获得更好的UI体验。但问题是url总是静态的（例如：http://DocShare）

但是根据点击的节点，我想要像http://DocShare/Products/Product1/Letter

这样的网址

我想知道如何使用Ajaxy调用来制作这个动态网址。

注意：如果我使用的是HTML.ActionLINK，那么我将获得动态网址。但是这个ActionLink，在页面加载的时候，我们正在获得随机的树视图屏幕。为了避免这种闪烁的树效应，我正在进行Ajax调用以获得更好的UI体验。

任何解决方案都可以通过Ajaxy调用来获取动态网址。

以下是代码：

NavigationProducts.ascx页面

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<MedInfoDS.Controllers.ProductViewModel>" %>


<script type="text/javascript">
$(document).ready(function () {
    $(".docId").click(function () {
        alert("DocTypeName: " + this.id);
        $("#docDetails").load('<%= Url.Action("DocumentDetails") %>', { ProductName: "darbepoetin alfa", DocTypeName: this.id }, function (responseText, status) {

        });

        return false;
    });
});

<div id="treecontrol">
    <a title="Collapse the entire tree below" href="#">Collapse All</a> | <a title="Expand the entire tree below"
        href="#">Expand All</a> | <a title="Toggle the tree below, opening closed branches, closing open branches"
            href="#">Toggle All</a>
</div>

<div id="divByProduct">
    <ul id="red" class="treeview-red">
        <% foreach (var item in Model.Products)
           { %>
        <li><span>
            <%=item.Name%></span>
            <ul>
                <%foreach (var item1 in Model.DocTypes) { %>

                       <li><span>
                            <%= Html.ActionLink(item1.DocTypeName, "Products", new { ProductName = item.Name, DocTypeName = item1.DocTypeName })%>
                            <br />
                            <a class="docId" href="#" id="<%=item1.DocTypeName%>"><%= item1.DocTypeName%></a>
                            <%= Html.Hidden("ProductName", item.Name)%>

                       </span></li>
                <% } %>
            </ul>
        </li>
        <% } %>
    </ul>
</div>

控制器方法：

// Response to AJAXy call to populate details for given ProductName and DocType
        [HttpPost]
        public virtual ActionResult DocumentDetails(string ProductName, string DocTypeName)
        {
            var entities = new MIDSContainer();
            if (ProductName == null) return View();
            int ProductId = (entities.Products.FirstOrDefault(p => p.Name == ProductName)).ProductId;
            int DocTypeId = (entities.DocTypes.FirstOrDefault(d => d.DocTypeName == DocTypeName)).DocTypeId;
            var documents = (from d in entities.Documents.Where(p => p.ProductId == ProductId && p.DocTypeId == DocTypeId && p.AvailableForUse == true && p.Status == "Approved") orderby (d.Description) select d).ToList();
            return View(documents);
        }

Answer 1

这里有一个非常全面的解决方案：http://ajaxpatterns.org/Unique_URLs

Answer 2

我假设您要“更改网址”，以便“后退”按钮在浏览器中工作，以便在不同的产品之间进行导航。如果没有回发，您实际上无法更改URL，但您可以更改URL的哈希值。通过更改哈希值，您将能够支持浏览器后退按钮，就像URL本身已更改但没有任何回发一样。

在以下网址中：

http://site/page#SomeValue

哈希值为“#SomeValue”。

您可以使用JavaScript中的“document.Hash”设置哈希。

为了更容易使用“document.Hash”值并设置一个函数以便在更改时收到通知，我创建了jHash项目。

你可能想看看jHash来帮助你做你正在寻找的事情。

http://jhash.codeplex.com/

我们可以在ASP.NET MVC页面上使用Ajaxy调用动态更改URL吗？

2 个答案: