Können wir die URL mit Ajaxy-Aufruf auf der ASP.NET MVC-Seite dynamisch ändern?

Question

Ich habe eine ASP.NET MVC-Anwendung, die eine Ansicht namens Produkte hat.

Diese Produktansicht verfügt über eine Navigation im linken Menü, die mit der Teilansicht NavMenuProducts.ascx implementiert wird. Dieses Menü wird mithilfe von JQuery Treeview implementiert, sodass es über die Liste der ProductNames als übergeordneter Knoten verfügt und erweiterbar ist (z. B. 10 Produkte). Jedes dieser Produkte hat einen ChildNode als DocTypeName und es ist ein Hyperlink (zum Beispiel: 3 DocTypeNames).

Wenn der Benutzer auf ChildNode Hyperlink klickt, werden alle übereinstimmenden Dokumente angezeigt und mithilfe von Ajaxy-Aufruf implementiert. Damit hat der Benutzer bessere Benutzeroberflächenerfahrung. Aber das Problem dabei ist die URL immer statisch ist (Beispiel: http://DocShare)

Aber basierend auf dem Knoten, auf den geklickt wird, möchte ich die URL wie http://DocShare/Products/Product1/Letter

Ich frage mich, wie diese dynamische URL machen mit Ajaxy Anruf.

HINWEIS: Wenn ich HTML.ActionLINK verwende, dann bekomme ich dynamische URL. Aber dieser ActionLink, während die Seite geladen wird, bekommen wir zufällige Baumansicht Bildschirm. Um diesen flackernden Baumeffekt zu vermeiden, mache ich Ajax Call für bessere Benutzeroberflächenerfahrung.

Jede Lösung würde geschätzt werden, um dynamische URL mit Ajaxy-Aufruf zu erhalten. Hier

ist der Code:

NavigationProducts.ascx Seite:

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

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

Ich nehme an, Sie möchten "die URL ändern", so dass die Zurück-Schaltfläche im Browser funktioniert, um zwischen den verschiedenen Produkten zu navigieren. Sie können die URL nicht ohne Postback ändern, aber Sie können den Hash-Wert der URL ändern. Indem Sie den Hash-Wert ändern, können Sie die Zurück-Schaltfläche des Browsers genauso wie die URL selbst ohne Postbacks unterstützen.

In der folgenden URL:

http://site/page#SomeValue 

Der Hash-Wert ist "#SomeValue".

Sie können den Hash mit "document.Hash" in JavaScript festlegen.

Um es viel einfacher zu machen mit dem „document.Hash“ Wert und das Setup eine Funktion informiert werden, zu arbeiten, wenn er sich verändert, ich das jHash Projekt.

Sie werden sich wahrscheinlich jHash ansehen wollen, um Ihnen zu helfen, das zu tun, wonach Sie suchen.

http://jhash.codeplex.com/

Answer 2

Es ist eine ziemlich umfassende Lösung hier: http://ajaxpatterns.org/Unique_URLs