MVC表单托管2个带有jquery post的提交按钮

Question

我在 MVC2 /VS 2008 中有以下场景：

一个带有 2 个提交按钮、一个文本框和一个下拉列表框的用户表单。用户输入买家姓名的全部或部分，然后按“查找”提交按钮。 “查找”按钮触发一个 jquery 帖子，它根据输入的文本刷新下拉列表框的内容。下拉列表框包含在另一个 .aspx 页面上的 div 中。也就是说，每次提交“查找”按钮时，jquery 帖子都会更新一个 div。

为了防止“查找”按钮重新加载页面，我使用了 preventDefault。到目前为止，一切都很好。现在，当我尝试使用“AddMapping”提交按钮发布表单时，由于 preventdefault 设置，它不会发布。如果我切换此设置，我可以触发获取，但不能触发帖子。在任何情况下，它都会触发默认（索引）视图重新加载，而不是其预期的 AddMapping 控制器（发布）操作。

在表单中我有这些按钮：

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

JQuery 是这样的：

<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
    });
}     

AddMapping 提交用于此控制器/操作：

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

我想做的是找到一种发布“AddMapping”提交按钮的方法，同时让“查找”按钮继续只触发 javascript/jquery 函数中包含的操作，即不重新加载查看。

这可能吗，还是我需要在这里尝试不同的方法？

Answer 1

简单的答案是，如果您的提交按钮的 onClick 事件返回 false，它实际上不会提交任何内容，因此您只需要让“查找”按钮返回 false 而您的真正提交按钮不返回。

但是，您可能会发现将两个提交按钮拆分为两个表单更清晰。我经常用 MVC3 做这件事，因为新的不显眼的 AJAX 功能让我可以做这样的事情：

@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">
}

您应该能够使您的视图在视觉上看起来是一个单元，即使在幕后，您有单独的表单。唯一的技巧是确保在提交时将所有正确表单中的所有正确输入字段绑定到模型。