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>元素的值

构建网址

$('.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，当然，在客户端上运行。

客户只会看到＆＃34; ActionLink＆＃34;的结果。这将是一个链接，带有一些计算字符串。

您可以完全避免使用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，你应该使用{{1选择器因为你将使用类而不是id，因为有很多选择列表，而不仅仅是一个。

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

首先将ID添加到原始链接

LinkClass

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

3 个答案: