在@ 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还是很陌生，所以我不确定这是否可能，或者是否有更好的方法。 如果有，那么我很乐于学习。 任何和所有建议将不胜感激。

Answer 1

您不能将C＃和js混合使用，因为Url.Action在js代码之前在服务器中执行

基本上，您的剃刀视图中的任何C＃代码都将由服务器中的剃刀视图引擎执行，并且该C＃代码的输出（即HTML /纯文本）将发送到浏览器。 您所有的JavaScript代码都会在浏览器中执行。

您可以使用Url.Action生成基本url（不Url.Action值参数），然后在客户端向其添加查询字符串。

$(function(){

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

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

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

  });

});

当razor执行此代码时，它将呈现这样的输出（您可以查看页面查看源并看到此内容）

$(function(){

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

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

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

  });

});