来自多个视图的多个提交按钮 ASP .NET MVC5

Question

我正在开发 ASP .NET MVC 5 应用程序，现在我正在实现时事通讯功能。我有所有东西的主视图（父视图），在这个视图上还有一个带有输入字段的框，用于电子邮件和提交按钮。单击此按钮后，控制器方法将此电子邮件插入到订阅者选项卡。我有这个时事通讯的 GET/POST 方法和 PartialView（所有时事通讯的代码都在单独的区域）。 一切正常，只有一个问题。在母版页上，我有另一个提交按钮（用于提交搜索字符串），因此每次提交搜索字符串后，代码也提交时事通讯表单。 是否有任何解决方案可以将这两个提交按钮分开，并在提交时事通讯（PartialView）表单后不刷新整个页面？

这是我的时事通讯 PartialView，名为 _SignIn

@using (Html.BeginForm()) 

@Html.AntiForgeryToken()

<div class="form-horizontal">
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="form-group">
        @Html.LabelFor(model => model.email, htmlAttributes: new {@class = "control-label col-md-12", style="text-align: left; padding-left: 30px;"})
        <div class="col-md-12" align="center">
            @Html.EditorFor(model => model.email, new {htmlAttributes = new {@class = "form-control"}})
            @Html.ValidationMessageFor(model => model.email, "", new {@class = "text-danger"})
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.NewsletterType, htmlAttributes: new { @class = "control-label col-md-12", style = "text-align: left; padding-left: 30px;" })
        <br />
        <div class="col-md-12" align="center">
            @Html.EnumDropDownListFor(model => model.NewsletterType, new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.NewsletterType, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-4 col-md-10" style="padding-bottom: 10px;">
            <input type="submit" value="Prihlásiť" class="btn btn-success" />
        </div>
    </div>
</div>

感谢您的回复！

Answer 1

您只能使用 ajax 调用来实现这一点，因此您不需要刷新整个页面。

@Html.AntiForgeryToken()

<div class="form-horizontal">
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="form-group">
        @Html.LabelFor(model => model.email, htmlAttributes: new {@class = "control-label col-md-12", style="text-align: left; padding-left: 30px;"})
        <div class="col-md-12" align="center">
            @Html.EditorFor(model => model.email, new {htmlAttributes = new {@class = "form-control", id = "emailTxt"}})
            @Html.ValidationMessageFor(model => model.email, "", new {@class = "text-danger"})
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.NewsletterType, htmlAttributes: new { @class = "control-label col-md-12", style = "text-align: left; padding-left: 30px;" })
        <br />
        <div class="col-md-12" align="center">
            @Html.EnumDropDownListFor(model => model.NewsletterType, new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.NewsletterType, "", new { @class = "text-danger", id = "ddlType" })
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-4 col-md-10" style="padding-bottom: 10px;">
            <button type="button" class="btn btn-success btn-newsletter"></button>
        </div>
    </div>
</div>

<script>
    $(function(){
            var model = {
                email: $('.emailTxt').text();
                NewsletterType: $('.ddlType :selected').text();
            }

            $(.btn-newsletter).click(function(){
                $.ajax({
                url: url,
                type: 'POST',
                data: model,
                beforeSend: function(xhr){xhr.setRequestHeader('__RequestVerificationToken',  $('body').find('input[name="__RequestVerificationToken"]'));},
                statusCode: {
                    200: function (data) { success(data); },
                    500: function (erro) { error(erro); }
                }
            });
        });
    });
</script>

Answer 2

为您的按钮添加 name 属性，并使用控制器中的值来区分调用了哪个按钮。

    <button type="submit" id="btnSave" name="Command" value="Save">Save</button>
 <button type="submit" id="btnSubmit" name="Command" value="Submit">Submit</button> 

public ActionResult YourAction(Model model, string Command)
{
   if(Command == "Save") {} 
}

请参阅Handling multiple submit buttons 了解更多信息。

为了防止完全回发（刷新），您可以使用 AJAX

Answer 3

您必须有两个单独的表单来处理每个提交或通过某种形式的 Javascript 进行处理。我建议使用 2 个单独的表格。将搜索字符串提交放在父视图中，因为它应该在所有页面上并关闭表单。然后，您可以使用其中的表单呈现您的时事通讯订阅的部分视图。

基本上：

父视图

...
    @using (Html.BeginForm()) 
    {
        @Html.AntiForgeryToken()

        <div class="form-horizontal">
            ... 
            <!-- Search string input field and submit button -->
            ...
        </div>
    }
    <div>
        @Html.RenderPartial("_SignUp")
    </div>
...

_SignUp 部分视图

@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
       ... 
       <!--  Subscriber email input and submit -->
       ...
    </div>
}