How to get values from bootstrap modal and send them to a controller C# MVC

Question

on button click I'm opening modal with 3 inputs, one of them is dropdown where I can choose some of active users, and two another inputs are the inputs where I can write some title and Description for that user that I previusly selected in dropdown. Now what I would like to do is to pick informations from modal and to send them to my controller (c#), and I guess I must create javascript object and send that object with selected user, title and description to my C# Controller.

Here is my modal code:

<div class="modal-content">
            <div class="modal-header btn-info" style="font-weight:bold;color:white;">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h5 class="modal-title modal-sm">Title</h5>
            </div>
            <div class="modal-body">
                <form id="formCompose" class="form-horizontal form-label-left input_mask" method="post">
                    <div class="form-group">
                        <label class="control-label col-md-3 col-sm-3">User</label>

                        <div class="col-md-9 col-sm-9">
                            @Html.DropDownList("UserID", new SelectList(ViewBag.Users, "Id", ".Name"), "Name", new { @class = "form-control" })
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-3 col-sm-3">Title</label>

                        <div class="col-md-9 col-sm-9">
                            <input type="text" class="form-control">
                            <span class="fa fa-comment form-control-feedback right" aria-hidden="true"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-3 col-sm-3">Description</label>

                        <div class="col-md-9 col-sm-9">
                            <textarea id="message" rows="7" required="required" class="form-control" name="message"
                                      data-parsley-trigger="keyup" data-parsley-minlength="20"
                                      data-parsley-maxlength="100"
                                      data-parsley-minlength-message="You need to enter at least a 20 caracters long description comment.."
                                      data-parsley-validation-threshold="10"></textarea>

                            <span class="fa fa-language form-control-feedback right" aria-hidden="true"></span>

                        </div>
                    </div>
                </form>
            </div>

And here is what I have tried with javascript, if we can call it even try:

<script type="text/javascript">
    var user = {User: "I need Id from dropdown here probably", Title: "Title from modal ", Description: "Description from modal" };
</script>

I really dont have idea how to get values form input and send them to a c# controller. Any kind of help would be great!

Thanks guys Cheers

Answer 1

you have to add action attribute in the form to submit to action in controller

<form id="formCompose" action="@Url.Action("MyAction", "MyController")"  class="form-horizontal form-label-left input_mask" method="post">

and the value of name attribute should be of same name as Property name of model

<label class="control-label col-md-3 col-sm-3">Title</label>

                        <div class="col-md-9 col-sm-9">
                            <input type="text" name="Title" class="form-control">
                            <span class="fa fa-comment form-control-feedback right" aria-hidden="true"></span>
                        </div>

and change name="message" to name="Description" and "UserID" to "User" and also add a submit button in the model to submit the form and send the data to action