@ Url.ActionのパラメータとしてJavaScript関数を呼び出す

Question

したがって、別の部分を返す別のコントローラアクションにパラメータとしてテキストボックスから値を返そうとしています。私はいくつかのサンプルコードであるので、ここで、それが簡単にちょうどいくつかのサンプルコードを投稿するだろうと思うのではなく、私がやろうとしていますかを説明しようとしている：

CSHTML：

<div class="row"> 
    <div class="pt-sm-30 pb-xs-30 has-50px-footer"> 
    <div class="col-lg-offset-1 col-lg-10"> 
     <h3>CREATE A NEW PERSON PROFILE</h3>    
     <form class="form-spacers"> 
      <div class="form-group"> 
       <div class="row"> 
        <div class="col-md-6"> 
         <label class="input-label" for="functionalRole">First Name <span class="ReqField">*</span></label> 
         @Html.TextBoxFor(model => model.Person.FirstName, new { @class = "form-control input-sm", @id = "firstName", @type = "text" }) 
        </div> 
        <div class="col-md-6"> 
         <label class="input-label" for="functionalRole">Last Name <span class="ReqField">*</span></label> 
         @Html.TextBoxFor(model => model.Person.LastName, new { @class = "form-control input-sm", @id = "lastName", @type = "text" }) 
        </div>       
       </div> 
      </div> 
     </form> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-sm-8 col-md-9 col-lg-10 new-profile-footer"> 
     <div class="col-lg-offset-1 col-lg-5 col-md-4 hidden-sm hidden-xs" style="margin-top: 16px;"> 
     </div> 
     <div class="col-lg-6 col-md-8 col-sm-12" style="margin-top: 10px; text-align: right;"> 
      <div class="row" style="white-space: nowrap;"> 
       <button class="btn btn-primary button-blue btn-xs-110" onclick="location.href='@Url.Action("Index", "DirectoryMaintainer")'"><i class="fa fa-times-circle-o icon-xs-hidden" aria-hidden="true" style="padding-right: 5px;"></i>CANCEL</button> 
       <button id="continue" type="button" class="btn btn-success button-green btn-xs-110">CONTINUE<i class="fa fa-caret-right icon-xs-hidden" style="padding-left: 5px;" aria-hidden="true"></i></button> 
      </div> 
     </div> 
    </div> 
</div> 

<script> 
    $("#continue").click(function() { 
     $("#partialViewDiv").load('@(Url.Action("RecordsMatch", "DirectoryMaintainer", new { @firstName = getFirstName(), @lastName = getLastName()}, Request.Url.Scheme))'); 
    }); 

    function getFirstName() { 
     return document.getElementById("firstName").value; 
    } 

    function getLastName() { 
     return document.getElementById("lastName").value; 
    } 


</script> 

コントローラー：

public PartialViewResult RecordsMatch(string firstName, string lastName) 
    { 
     //Do some logic with parameters here 
     return PartialView("_RecordsMatch"); 
    } 

だから問題は、私は

$("#partialViewDiv").load('@(Url.Action("RecordsMatch", "DirectoryMaintainer", new { @firstName = getFirstName(), @lastName = getLastName()}, Request.Url.Scheme))'); 

はgetFirstName（）およびgetLastNameの（）に私にエラーを与えているラインという、これを持っています。エラーは "名前getFirstName（）が現在のコンテキストに存在しません"です。私はMVCにはかなり新しいので、これが可能かどうか、あるいはそれを行う良い方法があるかどうかはわかりません。もしあれば、私はそれを学ぶのが嬉しいです。すべての提案は非常に高く評価されます。 Url.Actionは、そのあなたのJSコード基本的にはあなたのかみそりビューで任意のC＃コードがサーバーにかみそりビューエンジンによって実行されます

と出力の前に、サーバーで実行されますようあなたがそのようなC＃とJSを混在させることはできません

Answer 1

（HTML /プレーンテキスト）がブラウザに送信されます。すべてのjavascriptコードがブラウザで実行されます。

Url.Actionを使用して、ベースURL（経路値パラメータなし）を生成し、後でクライアント側のクエリ文字列を追加することができます。

$(function(){ 

    $("#continue").click(function() { 

    var url='@Url.Action("RecordsMatch", "DirectoryMaintainer")'; 
    url = url+'?firstName='+ getFirstName()+'&lastName='+getLastName(); 

    $("#partialViewDiv").load(url); 

    }); 

}); 

かみそりは、このコードを実行すると、それは

$(function(){ 

    $("#continue").click(function() { 

    var url='/DirectoryMaintainer/RecordsMatch'; 
    url = url+'?firstName='+ getFirstName()+'&lastName='+getLastName(); 

    $("#partialViewDiv").load(url); 

    }); 

});