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?

Amin Saqi · Accepted Answer · 2013-08-15T06:54:31.423

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();
    }

OK, so is there another way I can get the user's comments back to the server from the modal? Surely this is somehow possible. — callisto, Aug 15 '13 at 06:42

asymptoticFault · Answer 2 · 2013-08-14T13:18:46.963

1

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));

});

edited Aug 14 '13 at 13:18

answered Aug 14 '13 at 13:13

asymptoticFault

4,491
2
19
24

This does not work :(. 'Undefined' is what comes in on the serverside event using $('#Submit').attr('href', url.replace('param1_placeholder', $('#Title').val())); Running a clientside funct to check - the textbox values are available on onclick. – callisto Aug 14 '13 at 15:22
What does the link tag look like when it comes back from the server? – asymptoticFault Aug 14 '13 at 15:47
You would certainly get an undefined value if the value you need for the URL is not available until the user clicks something in particular. I just assumed the value could be retrieved when the document was ready because I had nothing else to go on. – asymptoticFault Aug 14 '13 at 15:55

score 0 · Answer 3 · answered Aug 14 '13 at 16:20

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>')

});

Client side value in URL.Action parameter

3 Answers3