MVC表单托管2提交按钮与jquery帖子

时间:2011-07-12 20:29:23

标签: asp.net-mvc-2 jquery

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

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

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

在表格中我有这些按钮:

<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'提交按钮,同时让'find'按钮继续只触发javascript / jquery函数中包含的操作,即不重新加载图。

这是可能的,还是我需要尝试不同的方法?

1 个答案:

答案 0 :(得分:1)

简单的答案是,如果您的提交按钮的onClick事件返回false,则它实际上不会提交任何内容,因此您只需要让“find”按钮返回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">
}

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