Is it possible to construct a link, navigate to it and print the response in C# programmatically? How?

Question

I have a webpage written in C#/Razor. I am printing all the values from a database on this page like so :

<div style="min-height: 150px; font-size: 1.25em">
    <div style="margin-bottom: .5em">
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Branch</th>
                    <th>Phone No.</th>
                    <th>Extension</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var prod in Model)
                {
                    <tr>
                        <td>@prod.FullName</td>
                        <td>@prod.Branch</td>
                        <td>@prod.PhoneNo</td>
                        <td>@prod.Extension</td>
                        <td>@prod.Email</td>
                        @if (User.IsInRole(@"Admins") || User.Identity.Name == prod.DomainAC)
                        {
                            <td><a href="/home/edit/@prod.Id"  style="color: blue;">edit</a></td>
                        }
                        else
                        {
                            <td>User => @User.ToString()</td>   
                        }
                        <td>
                            <input type="checkbox" name="message" value="@prod.PhoneNo">Message<br>
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
</div>

This works fine to display their info. What I would like to do now is a small bit more difficult.

Below this, I have a form with a username, password and message. Using this form, I would like to have the behaviour that on submit, it will take the values in the input boxes of the form and the above C#, construct a link, navigate to the link and print the response of the server

So I have :

@{if (IsPost)
  {
     //handle and print response
  }
  else
  {
    <form method="post" action="">
        Username:<br />
        <input type="text" name="u" /><br />
        Password<br />
        <input type="text" name="p" /><br />
        <br />
        Password<br />
        <textarea name="m" cols="25" rows="5">
        Enter your comments here...
        </textarea><br>
        <br />
        <input type="submit" value="Submit" class="submit" />//when this is clicked, construct url and navigate to it.
    </form>
   }
}

The URL I want to construct from this form is :

http://webaddress.com/web/d.php?u=<Username entered by user>&p=<Password entered by user>&s=<List of Phone Numbers from the C# above where the checkbox is selected, comma separated>&m=<Comment submitted by user>

So, if my name is "John", Password is "Password1", Comment is "Test" and I have selected one checkbox for a user with the phone number "12345678", the URL I will navigate to is :

http://webaddress.com/web/d.php?u=John&p=Password1&s=12345678&m=Test

Ideally I would like to print the response of the webpage in a <div> while still on the same parent web page rather than going to a new one if this is possible.

I have no idea where to begin with this, how to do it or even if this is possible. Can anyone help me please ?

UPDATE :

Trying this JQuery which does not alert me so I cannot debug :

    <script>
        $("#thebutton").click(function() {
            var form = $(document.getElementById('FormID'));
            var urlToConstruct = 'http://webaddress.com/web/d.php';
            urlToConstruct += '?u=' + form.find('#u').val();
            urlToConstruct += '&p=' + form.find('#p').val();
            ('#employeeTable tbody tr').has(':checkbox:checked').find('td:eq(2)').each(function() {
                urlToConstruct.append($(this).text());
                alert(urlToConstruct);
            })
        });
 </script>

Answer 1

$("#SubmitButtonID").click(function() {
    var form = $(document.getElementById('FormID');
    var urlToConstruct = 'http://webaddress.com/web/d.php';
    urlToConstruct += '?u=' + form.find('#iDoFInputControl1').val();
    urlToConstruct += '&p=' + form.find('#iDoFInputControl2').val();
    form.submit();
});

this example uses jQuery, a javascript library (jquery.com), i'm using getElementById to find your form, faster then the native jQuery() selector. This example assumes all your controls are inside your form (but if they are not it wouldn't be a train smash, just cant use (jQuery obj).find).

.val() gets the value, and it should work for checkboxes too, but if it doesn't, a quick google search for getting values from checkboxes using jquery will return loads of results.

p.s. I've written that code mostly freehand, not checked it in a browser to make sure that it is completely correct.

Update... to answer your follow up question...

If you are using mvc (assumed as you using razor), inside your controller you can use Request.Params["urlParameter"] or Request.Form["controlID"] to access what you've received from the browser. Then once you've got those values, you should place them inside the 'ViewBag' (ViewBag.yourVariableHere="val") for them to be accessible in your view via @ViewBag.yourVariableHere, or you can include the required data in your model which can also be accessed in your view