Question

有没有办法通过javascript添加Html.ActionLink？

例如，我的控制器中有这个编辑功能：

public ViewResult Edit(int companyID)
{
    ....
}

我想在javascript中做这样的事情：

var id = $("#hdnID").val();
$("#editLink").html(<%: Html.ActionLink("Edit", "Edit", new { id }) %>);

一个粗略的例子，但它基本上是我想要做的。它有可能吗？

Answer 1

id是客户端脚本。您不能将服务器端脚本与客户端脚本混合使用。我担心您尝试使用操作链接提交HTML表单，而不是使用非常糟糕的提交按钮。我看到您使用$("#hdnID").val()获取输入字段的值，然后尝试将其分配给某个操作链接并发送到服务器，而如果您使用简单的提交按钮，则甚至不需要javascript。你的代码就是：

<% using (Html.BeginForm("Edit", "Home")) { %>
    <%: Html.HiddenFor(x => x.HdnId) %>
    <input type="submit" value="Edit" />
<% } %>

同样很明显，如果您使用的是隐藏字段，那是因为用户无法更改该值，因此更简单的解决方案是直接生成您需要的链接：

<%: Html.ActionLink("Edit", "Edit", new { id = Model.SomeId }) %>

Answer 2

我还没有找到一个非常好的方法。我通常做的是这样的事情：

var id = $("#hdnID").val();
var link = '<%: Html.ActionLink("Edit", "Edit", new { id = -999 }) %>';
$("#editLink").html(link.replace('-999', id));

关键是选择一个id在现实中永远不会有的值，或者在链接中以其他方式存在的值。

Answer 3

我找到了一个方便的方法，摆脱了这个问题，开箱即用。我使用ActionLink的原因实际上是一种简单的方法来处理路由。只需提供Controller和操作名称，帮助程序就会生成正确的URL。为了解决这个问题，我首先使用UrlHelper创建了一个HtmlHelperExtender，以便在适当的上下文中解析url。

namespace System.Web.Mvc.Html
{
   public static class HtmlHelperExtensions
   {
      public static string ResolveUrl(this HtmlHelper html, string url)
      {
         var urlHelper = new UrlHelper(html.ViewContext.RequestContext);
         return urlHelper.Content(url);
      }
   }
}

现在在JavaScript中，很容易获得正确的Url

  $(document).ready(function () {
     var action = '<%= Html.ResolveUrl("~/Controller/JsonAction") %>';
     // JSON controller call for model data
     $.getJSON(action, null, function (models) {
        // Do something with models
        action = '<%= Html.ResolveUrl("~/Controller/Details/") %>';
        for (var i = 0; i < models.length; i++) {
           $('#modelList').append(
              '<tr><td><a href=\"' + action + models[i].Id + '\">' + models[i].Title + '</a></td></tr>');
        }
     });
  });

Answer 4

这就是我做的。你可以使用javascript替换。

var ul = document.createElement('ul');

if (data.EvidenceList != null) {

for (var i = 0; i < data.EvidenceList.length; i++) {
              var li = document.createElement("li");
              var evidenceId = data.EvidenceList[i].EvidenceId;
              var evidenceName = data.EvidenceList[i].Name;
              var candidateProgrammeComponentId = data.CandidateProgrammeComponentId;

              var str1 = '@Html.ActionLink("dummyEvidenceText", "DownloadFile", new { candidateProgrammeComponentId = "dummyCandidateProgrammeComponentId", evidenceId = "dummyEvidenceId", evidenceName = "dummyEvidenceName" })';
              var str2 = str1.replace('dummyEvidenceName', evidenceName);
              var str3 = str2.replace('dummyCandidateProgrammeComponentId', candidateProgrammeComponentId);
              var str4 = str3.replace('dummyEvidenceId', evidenceId);
              var str5 = str4.replace('dummyEvidenceText', evidenceName);

              li.innerHTML = li.innerHTML +str5 ;
              ul.appendChild(li);
          }
}

var element = document.getElementById('evidenceList_' + data.guidId);
$('#evidenceList_' + data.guidId).empty();
document.getElementById('fileUploadFreeStructure_' + data.guidId).value = '';
$('#freeTextArea_' + data.guidId).val('');
element.appendChild(ul);

Answer 5

服务器端代码（C＃）在服务器上运行，结果发送到客户端，然后客户端执行JavaScript。尽管很奇怪，但是你有两个不同的代码环境相互碰撞，但不能很好地相互交互。

我经常这样做，虽然我对更好的方式持开放态度：

function SetUrl(id) {
 var url = '<%: Html.ActionLink("Bar", "Foo") %>' + '?id=' + id;

 return url;
}

这利用了

这一事实

/Foo/Bar/{id}通常相当于/Foo/Bar?id={id}，具体取决于您的路线设置方式。

在JavaScript中动态Html.ActionLink？

5 个答案: