Question

I have the following scenario in MVC2 /VS 2008:

A user form with 2 submit buttons, a textbox and a dropdownlistbox. Users enter all or part of a buyers name and press the ‘find’ submit button. The ‘find’ button triggers a jquery post which refreshes the contents of the dropdownlistbox according to the text entered. The dropdown list box is contained within a div on another .aspx page. That is the jquery post updates a div each time the ‘find’ button is submitted.

To prevent the ‘find’ button from reloading the page I have used preventDefault. So far so good. Now when I try to use the ‘AddMapping’ submit button to post the form it won’t post because of the preventdefault setting. If I toggle this setting I can trigger a get, but not a post. In any case it triggers a default (index) view reload instead of the AddMapping controller (post) action it’s intended for.

In the form I have these buttons:

<input type="submit" name="Find" value="Find" onclick="return confirmFind()">
<input type="submit" name="AddMapping" value="AddMapping">

The JQuery is like so:

<script language="javascript" type="text/javascript">
// refresh the div(dropdownbox)
function Refresh() {
    var dataPost = { name: $("#Buyer").val() };
    $.ajax({
        type: "POST",
        url: "/MTZ/Mapping/RefreshDropDown",
        data: dataPost,
        success: function(msg) {
            $("#ddlRefresh").empty();
            $("#ddlRefresh").append(msg);
        },
        error: function(msg) {
            alert("function failed: " + msg);
            debugger;
        }
    });
}
function confirmFind() {
    alert("find");
    $("form").submit(function(e) {
        { Refresh(); }
        e.preventDefault(); // prevent the reload from occurring
    });
}     

The AddMapping submit is intended for this controller/action:

[AcceptVerbs(HttpVerbs.Post)]
[HttpPost]
[AcceptParameter(Name = "AddMapping", Value = "AddMapping")]
public ActionResult Index(MappingModel modelpassed)

What I’d like to be able to do is find a way of posting the ‘AddMapping’ submit button whilst having the ‘find’ button continuing to only trigger the action included in the javascript/jquery function i.e no reloading of the view.

Is this possible or do I need to try a different approach here?

Answer 1

The easy answer is that if your submit button’s onClick event returns false, it won’t actually submit anything, so you should just need to have your “find” button return false and your real submit button not.

However, you might find it more clear to split the two submit buttons into two forms. I do this a lot with MVC3 because of the new unobtrusive AJAX features that let me do things like this:

@using ( this.Ajax.BeginForm("RefreshDropDown", "Mapping", new AjaxOptions
{
    HttpMethod = "POST",
    InsertionMode = InsertionMode.Replace,
    UpdateTargetId = "ddlRefresh",
    OnComplete = "confirmFind"
}) )
{
    <input type="submit" name="Find" value="Find" />
}

@using ( this.Html.BeginForm("Index", "Home") )
{
    <input type="submit" name="AddMapping" value="AddMapping">
}

You should be able to make your view visually appear to be a single unit even though, behind the scenes, you have separate forms. The only trick is making sure you have all the correct input fields in the correct forms to be bound to your models on submit.