如何使用 Jquery 为 MVC ActionLink 中的参数动态设置值？

Question

我有一个索引页面，其中列出了表格中的一些记录。

现在在每条记录中，我添加了一个 DropDownList，我想要的是当您使用侧面的 ActionLink 选择记录时，不仅发送记录的 ID，而且从 DropDownList 中发送所选值的 ID 作为好吧。

您能建议吗？

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

Answer 1

您需要使用 javascript 来响应客户端事件。

将您的 @Html.ActionLink() 代码替换为

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

另外，你生成的html无效（重复id属性），所以把生成<select>的代码改成

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

您可以使用额外的 loan 类名来设置宽度样式。

然后添加一个脚本来处理链接的.click()事件，并根据关联的<select>元素的值构建url

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

请注意，以上假设您有 Create 方法的路由定义（即您想生成 ../Documents/Create/1/1 如果没有，并且您生成查询字符串值，那么它将是

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

这将生成../Documents/Create?TemplateId=1&LoanId=1

Answer 2

任何 Razor 元素 - 包括 ActionLink 在发送到客户端之前都在服务器上构建。

Javascript - 或者 jQuery，当然，在客户端上运行。

客户端只会看到“ActionLink”的结果，这将是一个链接，带有一些计算字符串。

您可以完全避免 ActionLink 并使用 javascript。也许是这样的：

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

（是的，它很难看，但有时需要将服务器变量传递给客户端。）

现在你有了一个 js 中的链接，你可以随意调整

或者，试试更丑的：

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

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

Answer 3

更新我刚刚注意到您有多个贷款选择列表， 现在方法将是相同的，您现在必须删除所有列表的重复 ID，而是使用类侦听器而不是更新所有链接（作为我的示例，因为我认为它是一个列表和多个链接），现在您只需要更新一个将使用closest 或sibling 的链接，而不是获取所有链接，检索值也不应该是id，您应该使用this 选择器来获取值使用 class 而不是 id 因为有很多选择列表，而不仅仅是一个。

我会在我的下拉列表中使用更改侦听器，并且在更改时，我将为我的所有操作链接指定一个特定的类，例如 LinkClass，我还将使用 data attribute 在每个项目的每个链接中保留我的 ID ，然后在值更改时，更新我所有的操作链接 href 属性

首先将 id 添加到您的原始链接中

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