Can we dynamically change the URL with Ajaxy call on ASP.NET MVC page?

问题

I have an ASP.NET MVC application that has a view called Products.

This Products View has a Left Menu Navigation that is implemented using NavMenuProducts.ascx Partial View. This Menu is implemented using JQuery Treeview so that it has the list of ProductNames as the Parent Node and it is expandable(For Example: 10 Products). Each of these Products have a ChildNode as DocTypeName and it is a hyperlink(For Example: 3 DocTypeNames).

When the user clicks ChildNode Hyperlink all the matching Documents are displayed and is implemented using Ajaxy call. So that the user has better UI experience. But the problem with this is the url always is static(Example: http://DocShare )

But based on the Node that is clicked, I want the url like http://DocShare/Products/Product1/Letter

I am wondering how to make this dynamic url using Ajaxy call.

NOTE: If I am using HTML.ActionLINK, then I am getting dynamic URL. But this ActionLink, while the Page is loading, we are getting random treeview screen. TO avoid that flickering tree effect, I am making Ajax call for better UI experience.

Any solution would be appreciated for getting dynamic url with Ajaxy call.

Here is the Code:

NavigationProducts.ascx Page:

<%@ 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>

Controller Method:

// 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);
        }

回答1:

There's a pretty comprehensive solution here: http://ajaxpatterns.org/Unique_URLs

回答2:

I assume you want to "change the url" so that the Back button works in the browser to navigate between the different products. You can't actually change the URL without a postback, but you can change the url's Hash value. By changing the Hash value you will be able to support the browsers Back button just like the URL itself was changed but without any postbacks.

In the following URL: