在一个表单中通过下拉菜单多次提交

Question

I have a MVC5 setup with two Dropdowns that via Javascript automatically submits when a value is selected. They are currently inside the same form, so i would like to have them submit to different Actions on my Backend

View:

<div class="panel-body">
    @using (Html.BeginForm("", "BrugerSession"))
    {
        @Html.AntiForgeryToken()
        <div class="row">
                <div class="col-md-6">
                @Html.LabelFor(model => model.Emails)
                @Html.DropDownListFor(x => x.ValgtEmail, Model.Emails, "Vælg Email")
            </div>
            <div class="col-md-6">
                @Html.LabelFor(model => model.Printere)
                @Html.DropDownListFor(x => x.ValgtPrinter, Model.Printere)
            </div>
        </div>
    }
</div>

JavaScript

$(document).ready(function () {
    $("#ValgtEmail").change(function () {
        $(this).closest('form').trigger('submit');
    });
});

$(document).ready(function () {
    $("#ValgtPrinter").change(function () {
        $(this).closest('form').trigger('submit');
    });
});

The trick here is, that i am using How do you handle multiple submit buttons in ASP.NET MVC Framework? to support multiple submit-targets in the Backend.

Why main Question is: Can the Javascript Trigger method submit the data in the propper way, so it will works with the Solution from the above link?

I tried looking into the http://api.jquery.com/trigger/ Documentation and there is support for additional parameters. But i do know how to format my Javascript to achieve what I need.

Update:

I never managed to get this working. Instead i surrounded each Select with its own form.

Answer 1

I hope my answer will help you. You can use JQuery AJAX.

First drop down

$("#dropdown1").change(function(){
    $.ajax({
        url: '/ControllerName/Action1',
        data: { parm1:parm1 },
        success: function () {
         // Success function
        },
        error: function () {
         // Error message
        }
    });
});

Second drop down

$("#dropdown2").change(function(){
    $.ajax({
        url: '/ControllerName/Action2',
        data: { parm1:parm1 },
        success: function () {
         // Success function
        },
        error: function () {
         // Error message
        }
    });
});