Button submit in ASP.NET MVC

Question

I'm moving from php to asp.net. I created a simple page with a dropdown, a textarea (tinyMCE), and a button to save the text into the database. The save button opens a bootstrap modal to enter the name of the form that I want to save.

@model FormsCreator.Models.ModelView.ListFormsCreator
@{
    Layout = "";
}

<html>
<head>
    <script src="~/Scripts/jquery-3.2.1.min.js"></script>
    <script src="~/Scripts/tinymce/tinymce.min.js"></script>
    <script src="~/Scripts/JS/formsCreator.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <form>
        <br/><br />
        <div class="form-group col-sm-3">
            @Html.DropDownListFor(m => m.Forms, new SelectList(Model.Forms, "FormsCreatorID", "FormName"),
                "Select a Form", new { @class = "form-control" })
        </div>
        <br/><br/>
        <div class="form-group col-sm-12">
            <textarea class="form-control" id="mytextarea" name="mytextarea">Next, start a free trial!</textarea>
        </div>
        <div class="form-group col-sm-12">
            <button id="btnSaveForms" align="center" type="button" class="btn btn-primary" onclick="openModal();">Save</button>
        </div>
    </form>
    <div class="modal fade" id="saveForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button aria-hidden="true" data-dismiss="modal" class="close" type="button">X</button>
                </div>
                <div class="modal-body">
                    <input type="text" id="formName" name="formName" required />
                </div>
                <div class="modal-footer">
                    <button data-dismiss="modal" class="btn btn-success" type="button" onclick="location.href='@Url.Action("SaveForm", "FormsCreator")'">Save</button>
                    <button data-dismiss="modal" class="btn btn-primary" type="button">Close</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        function openModal() {
            $("#saveForm").modal();
        }
    </script>
</body>
</html>

Everything works fine, but how can I get in my Controller SaveForm the value of mytextarea and formName from the view? So, I can save it into the database. BTW, I'm probably doing it in the wrong way, so please if there is a better way let me know.

Controler:

public ActionResult SaveFormPrintable(){
    return View();
}

Thanks

Your onclick is just navigating to a url which doesn't have any parameters "/FormsCreator/SaveForm". The simplest thing to do is add a form with a submit button. — Jasen
– Jasen, Commented Dec 6, 2017 at 18:53
I would like to open the modal asking for the Form Name before submitting/sending the data to the Controller — user6824563
– user6824563, Commented Dec 6, 2017 at 18:55
If you have multiple forms and the modal is used to submit one of those forms then you'll need to identify your form(s), which you don't have, and use JavaScript to submit $("#formId").submit() — Jasen
– Jasen, Commented Dec 6, 2017 at 18:56
There's a lot of potential for misunderstanding here. You have <form>, the hmtl element, and Form your model. Rename your model and/or clarify your question. — Jasen
– Jasen, Commented Dec 6, 2017 at 19:05

Leandro Bardelli · Accepted Answer · 2020-10-01 01:44:05Z

Your current save button inside the modal has this code

onclick="location.href='@Url.Action("SaveForm", "FormsCreator")'"

So when user clicks on the button, it will executed the code window.location.href='/FormsCreator/SaveForm;, which does a GET call (redirect to that url.

What you need is a form submit. You can keep the input for the form name inside the form as a hidden input element along with the Forms dropdown and your textarea. Have another textbox inside the modal dialog to read the form name from the user and when user clicks on the save button, read the value of that textbox and update the formname hidden input element inside our actual form, which has an action attribute set to your HttpPost action method.

<form action="@Url.Action("SaveForm", "FormsCreator")" method="post">
    <textarea class="form-control" id="mytextarea"
              name="mytextarea">Next, start a free trial!</textarea>
    <input type="hidden" id="formName" name="formName" required />
   <button  type="button" class="btn btn-primary" onclick="openModal();">Save</button>
</form>
<div class="modal fade" id="saveForm" tabindex="-1" role="dialog"
                                      aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-hidden="true" data-dismiss="modal" class="close" 
                                           type="button">X</button>
            </div>
            <div class="modal-body">
                <input type="text" id="formNameTemp"  required />
            </div>
            <div class="modal-footer">
                <button data-dismiss="modal" class="btn" id="btn-save"
                                             type="button">Save</button>      
                <button data-dismiss="modal" class="btn" type="button">Close</button>
            </div>
        </div>
    </div>
</div>

And have the javscript code, which listen to the click event on the save button on the modal dialog, read the value and set to the hidden input inside our form and fire the form submit event.

$(document).ready(function () {

    $("#btn-save").click(function(e) {
        //Read the value from input in modal dialog
        var v = $("#formNameTemp").val();
        // Set the value to the hidden input in form and submit the form
        $("#formName").val(v).closest("form").submit();
    });

});

Now since the form will be submitted to the Save Form action method, you can use the same view model as your method parameter.

[HttpPost]
public ActionResult SaveForm(YourFormContentViewModel model)
{
  // to do : return something
}

Now this is doing a normal form submit, you can update it to do an ajax post if needed. There are tons of examples on stack overflow explaining how to do that.

Perfect! It actually works like they old way I used to do in PHP. However, in PHP I have to use AJAX to send the data to a class (Controller). Thanks!!!
You can change the normal submit to an ajax submit if needed. just serialize the form content and use $.post
I'm new in .NET, but I have experience in front end using JQuery and AJAX. I'm not sure if it is the correct/good way to implement in .NET
Take a look at the last block of code in stackoverflow.com/questions/47564719/… (overriding the submit event and making the ajax call)
Yeah... This block of code is exactly what I use to do. Call the preventDefault, manipulate the data and send it by AJAX POST. Is it a good way to develop in .NET? If so, what is the advantages of .NET? Anyway, if we are dodging from the topic just ignore my questions lol

Collectives™ on Stack Overflow

Button submit in ASP.NET MVC

1 Answer 1

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Linked

Related