JavaScriptのDynamic Html.ActionLink？

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

キーは、現実には決して存在しないか、そうでなければリンクに存在する値を選択することです。

Answer 3

サーバ側のコード（C＃）がサーバ上で実行され、結果がクライアントに送信され、そこでクライアントがJavaScriptを実行します。それは変わったものではありませんが、2つの異なるコード環境がお互いに突き当たりますが、お互いにうまくやりとりすることはできません。

私はより良い方法を開いているが、私は通常、このような何か：

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

return url; 
}  

これは

/Foo/Bar/{id}はどのようにあなたのルートに応じて、/Foo/Bar?id={id}に通常と同等であるという事実を利用します設定されています。

Answer 4

私は、この問題を手軽に考え出して、簡単に考え出しました。私がActionLinkを使用する理由は、本当にルーティングを扱う簡単な方法です。コントローラーとアクション名を入力するだけで、ヘルパーが正しいURLを生成します。 JavaScriptでこれを回避するには、最初にUrlHelperを使用して適切なコンテキストでURLを解決するHtmlHelperExtenderを作成しました。

は今、JavaScriptでそれが

$(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 5

これは私がそれをやった方法です正しいURLを取得するために十分に簡単です。あなたは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);