两人在Ajax.BeginForm提交按钮。需要调用JS不同功能的onSuccess [英] Two submit buttons in Ajax.BeginForm. Need to call different js functions in OnSuccess

问题描述

我有我的MVC页上的一个Ajax形式，具有两个独立的提交按钮...

  @using（Ajax.BeginForm（保存，公司，新AjaxOptions（）{
    列举HTTPMethod =邮报，的onSuccess =closeForm
}，{新@id =companyEditForm}））{
    ....一些编辑字段......    ＆LT;输入类型=提交值=保存并放;下一步/＆GT;
    ＆LT;输入类型=提交值=保存/＆GT;
}
 

我想形式与提交后，调用不同的js函数保存安培;下一步按钮。因此，如果用户点击保存按钮，就应该再提交表单称之为closeFormjavascript函数。如果用户点击储存并下一步按钮，就应该提交表单，然后调用javascript函数nextForm。是否有实现这一目标的一个简单的方法？

解决方案

  

是否有实现这一目标的一个简单的方法？

没有，但你可以有控制器动作传递被点击的结果是按钮。可以这样做无论是作为一个JSON属性（如果你正在返回JSON），或者它也可能是一个自定义的响应HTTP标头。

和那么你的成功回调内（其中只能有一个），你可以为了知道哪个按钮被点击，并采取相应的行动检索此值。

因此​​，通过给一个名称的提交按钮，让你知道被点击其中一个启动：

  @using（Ajax.BeginForm（保存，公司，新AjaxOptions（）{
    列举HTTPMethod =邮报，的onSuccess =的onSuccess
}，{新的id =companyEditForm}））{
    ....一些编辑字段......    ＆LT;按钮式=提交名称=BTNVALUE =save_next＆GT;保存和放大器;放大器;下一页＆LT; /按钮＆GT;
    ＆LT;按钮式=提交名称=BTNVALUE =拯救＆GT;保存＆LT; /按钮＆GT;
}
 

和那么你的控制器动作里面

  [HttpPost]
公众的ActionResult保存（MyViewModel模型）
{
    Response.AppendHeader（X-按钮，请求[BTN]）;    ...你平常的处理
}
 

和最后你的 onSucecss 回调里面：

 函数的onSuccess（数据，状态XHR）{
    功能的onSuccess（数据，状态XHR）{
        VAR BTN = xhr.getResponseHeader（'X键式'）;
        如果（BTN =='save_next'）{
            //储存放;下一步按钮被点击
        }否则如果（BTN =='拯救'）{
            //保存按钮被点击
        }其他{
            //用户没有使用鼠标提交的形式和
            //按钮上点击，他只是pressed输入而
            //里面的一些文本字段，或者你有一些其它部分
            //的JavaScript由此引发的表单提交，而不pressing
            //任何提交按钮
        }
    }
}
 

I have an Ajax form on my MVC page, with two separate submit buttons...

@using (Ajax.BeginForm("Save", "Company", new AjaxOptions() {
    HttpMethod="Post", OnSuccess="closeForm" 
}, new {@id = "companyEditForm"})) {
    ....some edit fields......

    <input type="submit" value="Save & Next"/>
    <input type="submit" value="Save" />
}

I would like to call a different js function after the form is submitted with the "Save & Next" button. So if the user clicks the "Save" button, it should submit the form then call the "closeForm" javascript function. If the user clicks the "Save & Next" button, it should submit the form, then call the "nextForm" javascript function. Is there a simple way of achieving this?

解决方案

Is there a simple way of achieving this?

No, but you could have the controller action pass the button that was clicked in the result. This could be done either as a Json property (if you are returning JSON) or it could also be a custom response HTTP header.

And then inside your success callback (which can only be one) you could retrieve this value in order to know which button was clicked and act accordingly.

So, start by giving a name to your submit button so that you know which one was clicked:

@using (Ajax.BeginForm("Save", "Company", new AjaxOptions() {
    HttpMethod="Post", OnSuccess="onSuccess" 
}, new { id = "companyEditForm" })) {
    ....some edit fields......

    <button type="submit" name="btn" value="save_next">Save &amp; Next</button>
    <button type="submit" name="btn" value="save">Save</button>
}

And then inside your controller action

[HttpPost]
public ActionResult Save(MyViewModel model)
{
    Response.AppendHeader("X-Button", Request["btn"]);

    ... your usual processing
}

and finally inside your onSucecss callback:

function onSuccess(data, status, xhr) {
    function onSuccess(data, status, xhr) {
        var btn = xhr.getResponseHeader('X-Button');
        if (btn == 'save_next') {
            // The "Save & Next" button was clicked
        } else if (btn == 'save') {
            // The "Save" button was clicked
        } else {
            // The user didn't submit the form by using the mouse and
            // clicking on a button, he simply pressed Enter while 
            // inside some text field or you have some other portion of
            // javascript which triggered the form submission without pressing
            // on any submit button
        }
    }
}

这篇关于两人在Ajax.BeginForm提交按钮。需要调用JS不同功能的onSuccess的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！