在@ Url.Action中调用JavaScript函数作为参数

时间:2017-11-17 14:49:37

标签: javascript asp.net-mvc razor

所以我试图将文本框中的值作为参数返回到另一个返回另一个部分的控制器操作。我认为发布一些示例代码比试图解释我想要做的更容易,所以这里有一些示例代码:

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很新,所以我不确定这是否可能,或者是否有更好的方法。如果有的话,我很乐意学习它。任何和所有建议将不胜感激。

1 个答案:

答案 0 :(得分:1)

你不能把c#和js混在一起,因为在你的js代码之前在服务器中执行了Url.Action

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

您可以使用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);

  });

});