Calling JavaScript function as parameter in @Url.Action

Question

So I am trying to return a value from a text box as the parameter to another controller action that returns another partial. I think it would easier to just post some sample code rather than trying to explain what I am trying to do, so here is some sample code:

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>

Controller:

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

So the issue I am having this that the line

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

is giving me an error on getFirstName() and getLastName(). The error is "The name getFirstName() does not exist in the current context". I am pretty new to MVC so I'm not sure if this is even possible or if there is a better way of doing it. If there is, then I am more than happy to learn it. Any and all suggestions would be greatly appreciated.

Answer 1

You cannot mix c# and js like that as the Url.Action gets executed in the server before your js code

Basically any C# code in your razor view gets executed by the razor view engine in the server and output of that (which is HTML/plain text) will be send to the browser. All your javascript code gets executed in the browser.

You can use Url.Action to generate the base url (without route value parameters) and add query strings to that at client side later.

$(function(){

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

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

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

  });

});

When razor executes this code, it will render output like this (you can check the page view source and see this)

$(function(){

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

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

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

  });

});