Multiple submit buttons from multiple views ASP .NET MVC5

Question

I´m working on ASP .NET MVC 5 application and now I´m implementing newsletter functionality. I have master (parent view) with all stuff and on this view there is also box with input field for email and submit button. After click on this button, controller method insert this e-mail to subscribers tab. I´ve got GET/POST method and PartialView for this Newsletter (all newsletter´s code is in separate area). Everything works fine, there is only one problem. On master page I have another submit button (for submitting search string) so everytime after submitting search string, code also submit newsletter form. Is there any solution to separate this two submit buttons and way to not refresh whole page after submit newsletter (PartialView) form?

Here is my Newsletter PartialView called _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>

Thank you for any response!

Check this out dotnet-tricks.com/Tutorial/mvc/…

Moe
– Moe

2015-12-28 21:59:34 +00:00
Commented Dec 28, 2015 at 21:59 — Moe
– Moe, Commented Dec 28, 2015 at 21:59

Pedro Benevides · Accepted Answer · 2015-12-28 22:33:26Z

1

You will only achieve this using ajax calls, with that, you do not need to refresh the whole page.

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

edited Dec 28, 2015 at 22:33

answered Dec 28, 2015 at 22:11

Pedro Benevides

1,98418 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

E_N_T_E_R Over a year ago

I´m such a new in ASP .NET, how to call and where to put this ajax call? Thanks.

E_N_T_E_R Over a year ago

Thank you so much! It works. Is there some way how to get return value from controller to ajax call? I´ve got multiple checks there in controller and I need to show result of call to user. Thanks

Pedro Benevides Over a year ago

Yes, in the callback of you ajax call, in the statusCode : {} you have 200, wich means when success, you will hit that when everithing works fine on your controller, and there you get the response.

Moe · Accepted Answer · 2015-12-28 22:11:08Z

0

Add name attribute to your buttons, and use the value in your controller to distinguish which button was invoked.

    <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") {} 
}

Refer to Handling multiple submit buttons for more info.

To prevent the full postback (refresh) you could use AJAX

edited Dec 28, 2015 at 22:11

answered Dec 28, 2015 at 22:06

Moe

1,59911 silver badges16 bronze badges

Comments

John G · Accepted Answer · 2015-12-28 22:12:42Z

You have to have two separate forms to handle each submission or handle it through some form of Javascript. I'd suggest using 2 separate forms. Put the search string submission in the parent view since it should be on all the pages and close the form. Then you can render your partial view for the newsletter subscription with a form inside of it.

Basically:

Parent view

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

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

_SignUp Partial view

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

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

Collectives™ on Stack Overflow

Multiple submit buttons from multiple views ASP .NET MVC5

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related