How to pass the ParentNode Value from the JQuery TreeView to the Controller method on ASP.NET MVC Page?

I have an ASP.NET MVC page that has left Menu Navigation that is built dynamically using JQuery Treeview Control.

This Treeview has the list of ProductNames as the Parent Node(For Example: 10 Products). Each of these Products have a ChildNode as DocTypeName(For Example: 3 DocTypeNames).

Here When the user clicks on ParentNode, it expands and shows DocTypeNames. When the User Clicks on DocTypeName, it loads the partialView by calling the controller ActionResult DocumentDetails through Ajaxy way.

From the below code I am able to read the DocTypeName that is clicked. But I am not able to read the ProductName. It says "Undefined".

Anyone has any idea how to pass the Parent ProductName to the controller?

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);
        alert("ProductName: " + this.ProductName);  //Error throwing here "Undefined"
        $("#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&开发者_Python百科gt;

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

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

Try to add this to the data that you send to the server:

ProductName: $(this).siblings(":hidden").val()

But you shoud definitely avoid generating multiple elements with the same id!

if Html.Hidden("ProductName", item.Name) renders a hidden field with id ProductName then you might have multiple elements with the same ID on one page and therefore the lookup for it might return undefined.

Otherwise the lookup jQuery query is just $("#ProductName").val()