two submit buttons on a form

Question

lets say I have a set of establishments, each establishments know who his father is and a establishment can have many childs. now I created a set of cascading dropdowns for this problem so on the first whe find the ones that have no father ( tier 0 if you might), once the user selects an item the list on the second list its children are loaded ( if it has any children) and so on until tier 3, heres my code:

Index.cshtml:

@model  WebUI.Controllers.IndexViewModel
<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript">  </script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>




 @Html.Partial("ParentEstablishments",Model)
 <div id="FirstHeritage">@Html.Partial("FirstHeritageChildren",Model)</div>
 <div id="SecondHeritage">@Html.Partial("SecondHeritageChildren",Model)</div>     

Each partial view has an ajax form like the following:

@model WebUI.Controllers.IndexViewModel

@using (Ajax.BeginForm("SelectParent","Ticket",new   AjaxOptions{UpdateTargetId="FirstHeritage"}))
{

 <fieldset>
    <legend>Entidad departamental</legend>

    @Html.DropDownListFor( 
        m => m.SelectedParentId , 
        new SelectList( Model.AvailableParents , "EstablishmentId" , "Name" ) , 
        "[Por favor seleccione una entidad departamental]" 
    )
    <input type="submit" value="Select" />
</fieldset>
}

so what i want to create is a submit button that lets the user tell me hes selected the entity he needs and to call a method on my controller where i check every id for a value, i tried to put the partial views inside a form but every submit button of the ajax forms calls the method of the form i create, how can i make a button without interfering with the ajax forms?

Answer 1

Modify the Button like below.

<input type="button" value="Select" class="btnSubmit" />

Mofify the Form Tag as mentioned below

@using (Ajax.BeginForm("SelectParent","Ticket", FormMethod.Post, 
                                                          new { id = "myForm" }))
{
}

Modify the Div as mentioned below. Add an attribute which will have value corresponding to it's Controller's Action method.

<div id="FirstHeritage" attr-Url="@Url.Action("ActionName", "ControllerName", 
new { area = "AreaName" })"></div>

Now in Jquery. Follow below steps.

1. Load Partial View
2. Fetch the Div Attribute Value
3. Use On for the Button event.
4. Ajax Request

---

JQuery

$(document).ready(function () {
    var FirstHeritage = $('#FirstHeritage');
    var url = FirstHeritage.attr('attr-Url');
    FirstHeritage.load(url, function () {
        var $form = $('#myForm');
        $.validator.unobtrusive.parse($form);
        $(document).on('click', '.btnSubmit', function () {
            if ($form.valid()) {
                $.ajax({
                    url: Url,
                    async: true,
                    type: 'POST',
                    beforeSend: function (xhr, opts) {

                    },
                    contentType: 'application/json; charset=utf-8',
                    complete: function () { },
                    success: function (data) {
                        $form.html(data);
                        $form.removeData('validator');
                        $form.removeData('unobtrusiveValidation');
                        $.validator.unobtrusive.parse($form);
                    }
                });
            }
        });
    });
});

Hope this will help you.

Answer 2

You can't, essentially. The script that makes the AJAX form an AJAX form binds to the submit event, so any submit will be caught.

Remember all the HTML helpers and controls in ASP.NET are there to cover common scenarios and make your life easier when you're actually in a common scenario. The more "custom" your code gets (such as a second submit button that will do a regular POST instead of an AJAX POST), the more work you need to do (and the less you should be using the builtin helpers and controls).

Just create a regular form (Html.BeginForm), add your two submit buttons, and then attach a click event on the AJAX version, and then send the POST as AJAX yourself.