How to submit with jQuery dialog using buttons with different values

Question

I'd like to use jQuery's dialog to replace some code I'm using right now within an ASP.NET MVC application. The old code used 'submit' buttons with different 'value' settings. I'd like to know also if there is a better approach.

This is an example of the existing code within the view:

        <%using (Html.BeginForm("SubmitValue", "MyController", FormMethod.Post))
    { %>
        <span class="field-description">My Value:  </span>
        <input id="myTextValue" maxlength="6" name="myValue" type="text"/>
        <%=Html.Hidden("myModel.myProperty1", Model.PropertyValue1) %>
        <%=Html.Hidden("myModel.myProperty2", Model.PropertyValue2) %>
        <div class="pageaction button">
             <strong>
                 <input name="submitButton" type="submit" value="Save"/>
            </strong>
            <strong>
                <input name="submitButton" type="submit" value="Delete"/>
            </strong>
            <strong>
                <input type="button" value="Cancel" />
            </strong>
         </div>
    <% } %>

The controller will need the value of the submit button pressed:

    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult SubmitValue(MyModel model, string submitButton)
    {
        _request.myProperty1= model.PropertyValue1;
        _request.myProperty2= model.PropertyValue2;
        if (submitButton == "Save")
        {_myService.UpdateValue(_request);}
        else
        {_myService.DeleteValue(_request);}

        return View("MyView", _request);
    }

For the jQuery UI, I'd like to use the 'buttons' part of the code to handle the submit values.

$(function() {
$("#dialogWindow").dialog({
    bgiframe: true,
    autoOpen: false,
    height: 200,
    modal: true,
    open: function(e, ui) {            
        $("#dialogWindow :input[name='myValue']").val(currentValue);
    },
    buttons: {
        'Save': function() {
            // TODO: submit as if a submit button with the value 'Save' is used
            $(this).dialog('close');
        },
        'Delete': function() {
            // TODO: submit as if a submit button with the value 'Delete' is used
            $(this).dialog('close');
        },

        Cancel: function() {
            $(this).dialog('close');
        }
    },
    close: function() {
        //close code
    }
});

});

Answer 1

I just had a brief scan of your question and whilst I think what you are trying to do is do-able I don't think it's the correct way.

The whole idea should be to have seperation of concerns. I think if you begin bundeling function into a single action then that action has the possibility to become crowded and difficult to maintain.

I think you should try to head more towards a model where each submit button would call its own jQuery ActionResult. That then leads to seperation of concerns, keeps the ActionResult nice and tidy and declutters your code.

There is no reason why you can't then, from the action result, call another method which encapsulates all the submit button actions but then you're heading back down the dark path to clutter.

Also I just noticed that your dialog window is doing quite a bit and it also runs the risk of getting cluttered. I, and this is a personal view only, would rather have three dialog windows each doing their own thing. I'd have my css setup so a change there reflects across all of them. Then each dialog would do a post to its own ActionResult.

If I've gotten your question horribly wrong then let me know and I'll try to help further.