How to dynamically set a value to a parameter in an MVC ActionLink using Jquery?

Question

I have an Index page which lists some records in a table.

Now in each of these records I have added a DropDownList and what I want is when you select the record using the ActionLink on the side to send not only the ID of the record but the ID of the selected Value from the DropDownList as well.

Could you please advise?

<script type="text/javascript">
    $(document).ready(function () {
        $("#LoanId").change(function () {
            var selectedLoan = $("#LoanId option:selected").val();                              
            });
        });

</script>

@model IEnumerable<Project.ViewModels.BrowseTemplates>

@{
    ViewBag.Title = "Index";
}

    <h2>Available Templates </h2>

<script src="~/Scripts/jquery-3.1.1.js"></script>

<table class="table">
    <tr>

        <th>
            @Html.DisplayNameFor(model => model.TemplateLanguage.TemplateType.TemplateTypeName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.TemplateLanguage.Language.LanguageName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.TemplateName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.TemplateLanguage.TemplateType.Category.CategoryName)
        </th>
        <th><label>Loan</label></th>
        <th></th>
    </tr>

    @foreach (var item in Model)
    {

        <tr>

            <td>
                @Html.DisplayFor(modelItem => item.TemplateLanguage.TemplateType.TemplateTypeName)

            </td>        
            <td>
                @Html.DisplayFor(modelItem => item.TemplateLanguage.Language.LanguageName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.TemplateName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.TemplateLanguage.TemplateType.Category.CategoryName)
            </td>
            <td>
                @Html.DropDownList("Loans", null, "Please Select",  htmlAttributes: new { @class = "form-control", style = "width:200px", @id="LoanId" })
            </td>

            <td>
                <div id="LinkDiv">
                    @Html.ActionLink("Generate Document", "Create", "Documents", new { TemplateId = item.ID, LoanId = item.LoanId }, null)
                </div>
            </td>
        </tr>
    }

</table>

You need to use javascript to respond to client side events and build the url based on the selected value — user3559349
– user3559349, Commented Aug 18, 2017 at 8:16
Note also you generating invalid html (duplicate id attributes in your <select>) — user3559349
– user3559349, Commented Aug 18, 2017 at 8:18

score 1 · Accepted Answer · 2017-08-18 09:48:03Z

You need to use javascript to respond to client side events.

Replace your @Html.ActionLink() code with

<a href="#" data-url="@Url.Action("Create", "Documents", new { TemplateId = item.ID })" class="create">Generate Document</a>

In addition, you generating invalid html (duplicate id attributes), so change the code for generating the <select> to

@Html.DropDownList("Loans", null, "Please Select", new { @class = "form-control loan", id="" })

You can use the additional loan class name to style the width.

Then add a script to handle the .click() event of the link and build the url based on the value of the associated <select> element

$('.create').click(function() {
    var selectedLoan = $(this).closest('tr').find('.loan').val();
    var url = $(this).data('url') + '/' + selectedLoan;
    location.href = url; // redirect
});

Note the above assumes you have a route definition for the Create method (i.e. you want to generate ../Documents/Create/1/1 If not, and your generating query string values, then it would be

var url = $(this).data('url') + '&LoanId=' + selectedLoan;

which will generate ../Documents/Create?TemplateId=1&LoanId=1

thanks for the answer but nothing happens when i click on the link, neither i get any errors to report
it works!!! - sorry i copy pasted and the closing quotes were missing from the link
As a side note, you could consider creating just one dropdownlist element (depending on how many actual rows you have, your generating a lot of extra html)
You also have no validation, and the user can post back a null value (if the "Please Select" option is selected)

mtbnunu · Accepted Answer · 2017-08-18 08:43:08Z

0

Any Razor element - including ActionLink is built on server before it's sent to client.

Javascript -or jQuery, sure, runs on client.

Client will only see the result of "ActionLink" which will be a link, with some computed string.

You can avoid ActionLink altogether and use javascript. Maybe something like this:

<script>
    var mylink = "@Url.Action("blah","Blah")/something_else?querystring=" + someVariable
</script>

(yes, its ugly, but sometimes necessary to pass on server variables to client.)

now you have a link in js that you can tweak as you want

Or, try something more ugly:

@Html.ActionLink("Generate Document", "Create", "Documents", new { something = "{{magic}}" })

<script>
   var newUrl = $element.attr("href").replace("{{magic}}",value);
</script>

edited Aug 18, 2017 at 8:43

answered Aug 18, 2017 at 8:20

mtbnunu

3004 silver badges11 bronze badges

3 Comments

Wizeman1986 Over a year ago

it doesn't appear to actually replace the "{{magic}}" part at all

mtbnunu Over a year ago

well, you need your jquery to select the element and set the new url. $element and value are samples.

Wizeman1986 Over a year ago

Hi , so i gave my action link and ID and i used it in jquery to select the element but still magic is not being replaced : @Html.ActionLink("Generate Document", "Create", "Documents", new { TemplateId = item.ID, LoanId = "{{magic}}" }, new { @id = "GenerateLink" }) ----------- $("#GenerateLink").attr("href").replace("{{magic}}", selectedLoan);

Munzer · Accepted Answer · 2017-08-18 08:46:48Z

Update I just noticed that you have multiple Loan Select List, Now the approach will be the same, you just now have to remove your duplicate id for all your lists, and instead use class listener and instead of updating all links (as my example, because i thought it is one list and multiple links), now you need to update one link only which will be using closest or sibling and instead of getting all the links, also the value retrieve shouldn't be by id, you should get value using this selector as you will be using class and not id since there are so many select lists, and not only one.

I would use a change listener to my dropdown list and on change, I will give all my action Links a specific class for example LinkClass, I will also use data attribute to keep my id in each link for each item, then on value change, update all my action links href attribute

first add the id to your original link

 @Html.ActionLink("Generate Document", "Create", "Documents", new { TemplateId = item.ID, LoanId = item.LoanId }, new {@Class="LinkClass" , data_theid=item.ID})

 //on change 
$("#LoanId").change(function () {
 // get value
var theloanID =  $("#LoanId").val();
// Loop all links 
$(".LinkClass").each(function() {
// this is coming from data-theid at your link 
var theid = $(this).data("theid");
// the new href, the original action/id?loanid=value
var theHref = "@Url.Action("Generate Document", "Create", "Documents")/"+theid+"?LoanId=theloanID";
//Update href Attribute
$(this).attr("href", theHref);
});                             
});

I am getting a syntax error at this part : @data - theid = item.ID
CS0746: Invalid anonymous type member declarator. Anonymous type members must be declared with a member assignment, simple name or member access.
if you read my update carefully, it should work. at least you should know how to debug and tell us what went wrong.
Updating every link is unnecessary extra overhead - just handle the click event of the link and get the associated selected option

Collectives™ on Stack Overflow

How to dynamically set a value to a parameter in an MVC ActionLink using Jquery?

3 Answers 3

4 Comments

3 Comments

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

3 Comments

6 Comments

Related