Client side value in URL.Action parameter

Question

I am trying to post feedback on an object from a modal popup. No values on the popup are populated from server side.

 <div class="modal fade" id="msg-editor">
        <div class="modal-header">
            <a class="close" data-dismiss="modal">&times;</a>
            <h3>Title of the form</h3>
        </div>
        <div class="modal-body">
            <div class="row-fluid">
                <div class="controls span10">
                    <label class="control-label" for="Title">Title and message</label>
                    <input type="text"
                        class="input-xlarge" id="Title" name="Title"
                        placeholder="Title of the message" />
                    <textarea class="input-xlarge" id="Message"
                        name="Message" rows="5" cols="9"
                        placeholder="Message"></textarea>

                    <label class="checkbox">
                        <input type="checkbox" value="option2" id="EmailSelf">
                        Send a copy of this message to yourself
                    </label>

                </div>
            </div>
        </div>
        <div class="modal-footer">
            <a href="#" class="btn" data-dismiss="modal">Close</a>
            <a id="Submit" class="btn btn-primary" href="@Url.Action("AddDocumentMessage", "Invoice", new { param1 =  $('#myFormSubmit').value, param2 = Model.Obj.Value1, param3 = Model.HashedValue })">Send</a>
        </div>
    </div>

The part that doesnt work is

param1 = $('#myFormSubmit').value.

How do I pass the client side value?

Answer 1

You can't...!

Because razor code is parsed and rendered in the server side, and in server, there is no jquery or any client code or data...

An alternative similar work can be like the following:

<div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
    <input type="button" value="Send" onclick="submit()" />
</div>

<script>
    function submit() {
        $.ajax({
            url: @Url.Action("act", "con") + '?param1=' + $('#myFormSubmit').value +
                                              '&param2=' @Model.Obj.Value1 + 
                                              '&param3=' + @Model.HashedValue,
            type: 'POST',
            // ... other ajax options ...
        });
    }
</script>

Then, in your action method you'll receive all params in string:

[HttpPost]
public ActionResult act(string param1, string param2, string param3)
    {
        ViewBag.Message = "Your contact page.";

        return View();
    }

Answer 2

The problem you are running into is that the Razor code is executed on the server to create the URL and then sent to the client, so the client side value is not known at the time the URL is created. You need to create a placeholder in the URL so that the client side value can be inserted when the document is ready.

So something like this:

<a id="Submit" class="btn btn-primary" href="@Url.Action("AddDocumentMessage", "Invoice", new { param1 = "param1_placeholder" , param2 = Model.Obj.Value1, param3 = Model.HashedValue })">Send</a>

$(function () {

    var url = $('#Submit').attr('href');
    $('#Submit').attr('href', url.replace('param1_placeholder', $('#myFormSubmit').value));

});

Answer 3

You may try to generate and append the link you need:

<div class="modal-footer">
            <a href="#" class="btn" data-dismiss="modal">Close</a>
<div class="link"></div>
        </div>


$(function () {
var path ="@Url.Action("AddDocumentMessage", "Invoice",new {param2 = Model.Obj.Value1, param3 = Model.HashedValue })

$('.link').append('<a id="Submit" class="btn btn-primary" href="'+path+'&param1='+$('#myFormSubmit').val()+'">Send</a>')

});