html.actionlinks using an hidden value as a parameter

Question

I am using html.actionlinks with parameters.... I have the easy case where the values are coming from the Model working....

However, for one actionLink I am getting the value dynamically from a devexpress grid.

For another form I have it working where I get the value dynamically and pass it on the HTML.BeginForm

Given these two examples I don't understand what I am doing wrong below...

This WORKS:

@using EtracsWeb.Areas.IO.Models;
@model VoyageInputModel


<script type="text/javascript">
    //var voyage_ids;
    function OnSelectionChanged(s, e) {
        s.GetSelectedFieldValues("VoyageID", GetSelectedFieldValuesCallback);
    }
    function GetSelectedFieldValuesCallback(values) {
        //  voyage_ids = values;
        //alert(voyage_ids);
        document.getElementById('VoyageIDS').value = values;
    }
</script>




@using (Html.BeginForm("Index", "Voyage",
              new { VoyageID = 0, Model.VoyageIDS, Model.ShowReceivedVoyages, Model.ETADate, Model.VoyageReceivedDate }))
 {

  <div class="divTable"  >
       <div class="divTableRow">
            <div class="divTableCell"> <input type="submit"  value="Receive"   name="ReceiveVoyage"    />  </div>
            <div class="divTableCell">  @Html.TextBoxFor(model => model.VoyageReceivedDate,  new{ @class = "date" }) </div>

       </div>

    </div>

    @* Gets the selected values from the grid and stores it in HTML so that beginForm can access*@
    @Html.Hidden("VoyageIDS", Model.VoyageIDS)


 }

Note...I am not show the devExpress Grid, but it is calling the OnSelectionChanged javascript...

Here is my second code example, now using ActionLinks. In this example I have it working for passing the Model.VIN, which is being set on Get action....but I am getting a zero on the invocation of the Manage WorkOrder Action link which is trying to use the Model.WorkOrderID which is being set in the same way I set the Model value in the first example....

@using EtracsWeb.Areas.Vehicle.Models
@model VehicleVinInquiryData


@{
    ViewBag.Title = "VinInquiry";
    Layout = "~/Views/Shared/_LayoutMenu.cshtml";
}

@* MUST go here and NOT at end or code won't work *@
<script type="text/javascript">
    //var wo_id;
    function OnSelectionChanged(s, e) {
        s.GetSelectedFieldValues("WorkOrderID", GetSelectedFieldValuesCallback);
    }
    function GetSelectedFieldValuesCallback(values) {
       // alert(values);
      //  wo_id = values;
        document.getElementById('xWorkOrderID').value = values;
        // document.getElementById('xxID').value = values;
        alert(document.getElementById('xWorkOrderID').value);
    }
</script>



@using (Html.BeginForm("VinInquiry", "Info"))
{    
    <div class="divTable"  >
        <div class="divTableRow">
            <div class="divTableCell">  <label>VIN</label> </div>        
            <div class="divTableCell">  @Html.TextBoxFor(m => m.VIN)  </div>
             <div class="divTableCell"> <input type="submit"  value="Display"  />  </div>
            <div class="divTableCell">  <input type="submit"  value="Clear"  />  </div>

            <div class="divTableCell">             
                <ul id="nav">
                    <li>
                        <a href="#">Actions</a>
                        <ul>
                            <li>@Html.ActionLink("Send an Email"                         , "Index"             , "Email"              , new { Area = "IO"        } , null)</li>                      
                            <li>@Html.ActionLink("Attach a File"                         , "AttachFile"        , "Management"         , new { Area = "Vehicle"   } , null)</li>
                            <li>@Html.ActionLink("Add a Comment"                         , "Create"            , "Comment"            , new { Area = "Vehicle"   } , null)</li>
                            <li>@Html.ActionLink("Add Allocation"                        , "Create"            , "Allocation"         , new { Area = "Vehicle"   } , null)</li>
                            <li>@Html.ActionLink("Change Allocation"                     , "Edit"              , "Allocation"         , new { Area = "Vehicle"   } , null)</li>
                            <li>@Html.ActionLink("Delete/Cancel Allocation"              , "Delete"            , "Allocation"         , new { Area = "Vehicle"   } , null)</li>
                            <li>@Html.ActionLink("View Dealers"                          , "List"              , "Dealer"             , new { Area = "Vehicle"   } , null)</li>
                            <li>@Html.ActionLink("Change HotRush Status"                 , "EditHotRushStatus" , "Management"         , new { Area = "Vehicle"   } , null)</li>
                            <li>@Html.ActionLink("Relocate Vehicle (Pass VehicleID)"     , "RelocateVehicle"   , "Location"           , new { Area = "Vehicle" ,VIN=Model.VIN } , null)</li>
                            <li>@Html.ActionLink("View Service Requests (Pass VehicleID" , "Index"             , "ServiceRequest"     , new { Area = "Vehicle" ,VIN=Model.VIN } , null)</li>
                            <li>@Html.ActionLink("Create a Voyage-Ship Entry"            , "AddVoyageShipEntry", "Voyage"             , new { Area = "IO"        } , null)</li>
                            <li>@Html.ActionLink("Process Manager"                       , "ProcessManager"    , "Management"         , new { Area = "IO"        } , null)</li>
                            <li>@Html.ActionLink("Manage WorkOrder (pass WorkOrderID)"   , "Index"             , "WorkOrderManagement", new { Area = "WorkOrder" , WorkOrderID=Model.WorkOrderID } , null)</li>
                        </ul>
                    </li>
                </ul>
           </div>
        </div>      
    </div>

   @* <input type="text" value="xxID" name="xxID" />  *@
    @Html.Hidden("xWorkOrderID" , Model.WorkOrderID)



}

The alert is working so I know the value is getting into the hidden variable...

As an alternative I can get the whole actionLink generated in the javascript using the following:

<script type="text/javascript">
    var wo_id;

    function OnSelectionChanged(s, e) {
        s.GetSelectedFieldValues("WorkOrderID", GetSelectedFieldValuesCallback);
    }
    function GetSelectedFieldValuesCallback(values) {
        // alert(values);
        wo_id = values;
        document.getElementById('sWorkOrderID').value = values;  
        alert(document.getElementById('sWorkOrderID').value);

        var atext = '@Html.ActionLink("Manage WorkOrder", "Index", "WorkOrderManagement", new { Area = "WorkOrder" , WorkOrderID="xxx" } , null)'.replace('xxx', wo_id);
        alert(atext);
        $("#myTag") = atext;
    }

</script>

But I can't figure out how to get this value of new actionlink back to the html.... I know this is basic javascript .... but what tag do I use??? My actionlink is inside an

tag....I can't figure out how to do this:

<li> create the action link here </li>  

Upvotes: 1

Views: 5658

Answer 1

You can't use the server-side helper Html.ActionLink() with the hidden value. You are attempting to update the link markup on the client-side after the page had been first rendered.

You're almost there with your last attempt. Try this instead:

<ul>
    <li><!-- initially this is just a placeholder link -->
    @Html.ActionLink("Manage WorkOrder", "Index", "WorkOrderManagement",
        routeValues: new { Area = "WorkOrder" , WorkOrderID=Model.WorkOrderID },
        htmlAttributes: new { id="workorderlink" })
    </li>
</ul>

function GetSelectedFieldValuesCallback(values) {
    var wo_id = values;
    $("#xWorkOrderID").val(values);  // update hidden input
    var link = $("#workorderlink");
    var oldhref = link.attr("href");
    var newhref = oldhref.substring(0, oldhref.lastIndexOf('/')) + "/" + wo_id;
    link.attr("href", newhref);  // update the link
}

The callback grabs the original href then replaces the WorkOrderId value in the url with the new dynamically obtained value.

Note: It appears you are using jquery so I'm being consistent and using jquery style instead of getElementById.