为 asp-route-parameter 使用 hiddenfield-value答案

【问题标题】：Use hiddenfield-value for asp-route-parameter为 asp-route-parameter 使用 hiddenfield-value
【发布时间】：2019-07-22 10:54:19
【问题描述】：

我在 _PartialView 中有一个隐藏字段，其中包含我想要的值（jQuery 填充它）我需要在（foreach）asp-route-parameter 中使用相同的值

<div class="js-products-list">
 <input id="cropIdForProdBaseJQ" type="hidden" value="" />
  @foreach (var product in Model.Products)
  {
    <a asp-controller="XXX" asp-action="YYY" asp-route-language="@Model.CurrentLanguage" asp-route-cropId="" id="productCard">
  }

因此，asp-route-cropId 应该从隐藏字段中获取值，并将其作为参数传递

我尝试使用像

这样的 jQuery 函数（没有任何运气）

var neededValue = the value I got from another jQfunction
$('#productCard').attr("asp-route-cropId", neededValue);

可以吗？
我将如何处理这个问题？谢谢！

【问题讨论】：

如果我在 Console.log $('#productCard').attr("asp-route-cropId"); 之前和之后 $('#productCard').attr("asp-route-cropId", neededValue); 我确实在我的脚本中得到了正确和更新的值.. 但不是在 asp-route-cropId 本身虽然

标签： c# jquery asp.net-core-mvc

【解决方案1】：

通过在 a-tag 中添加 data-producttypeId 解决了这个问题；将 productCard 从 'id' 更改为 'class'

@foreach (var product in Model.Products)

{
<a asp-controller="XXX" asp-action="YYY" asp-route-language="@Model.CurrentLanguage" asp-route-cropId="" class="productCard" 
data-producttypeId="@product.ProductTypeId">
}

我添加了一个jQuery函数：

$('.productCard').click(function(e) {    
var cropId = $('#croptype-filter-From-ProductType').val();

var clickedCard = $(this);
var baseUrl = clickedCard.attr("href");

var newUrl = baseUrl.replace("crop-ID", cropId);
window.location.href = newUrl;
});

对字符串的替换会创建一个新字符串，而不是实际替换它。将新创建的字符串放入 href 中后，一切都很好！谢谢你们的投入，给了我一些好的线索！

【讨论】：

【解决方案2】：

生成 html 时会使用 razor 属性。如果您从 javascript 引用它，则需要一个在页面编译后仍然存在的属性。这在您的情况下很棘手，因为您正在尝试在请求完成后实现路由。

相反，将输入值传递给动作的良好语义方式是使用表单，而不是尝试动态构建锚点。

<form method="get" asp-controller="XXX" asp-action="YYY" asp-route-language="@Model.CurrentLanguage">
    <input id="cropIdForProdBaseJQ" type="hidden" value="" />
    @foreach (var product in Model.Products)
    {
        @* Assuming you are doing something useful with "product" here *@
        <button name="PassThisId" value="@product.ProductId">Press me!</button>
    }
</form>

【讨论】：

【解决方案3】：

razor 视图中的标签助手在服务器上执行，其结果（HTML 标记）将发送到浏览器，浏览器将呈现它。所以此时anhcor标签助手已经生成了链接的href属性值。

您可以做的是，使用 JavaScript 覆盖正常的链接点击行为，从您的页面读取输入元素值并使用它来构建新 URL 并导航到该 URL。

您可以为您的cropId 参数提供一个虚拟值。

<a asp-controller="invoices" asp-action="GetData" asp-route-name="@Model.supplierName" asp-route-cropId=1 id="productCard">Click me</a>

在 JavaScript 中

 $("#productCard").click(function (e) {
            // Stop the normal navigation
            e.preventDefault();

            //Build the new URL
            var url = $(this).attr("href");
            var date = $("#cropIdForProdBaseJQ").val();
            url = url.replace(1, date);

            //Navigate to the new URL
            window.location.href = url;

        });

【讨论】：