Web Programming TutorialsLearn to use Multiple Submit Button and Forms in MVC

Learn to use Multiple Submit Button and Forms in MVC

multiple-forms-in-single-view-in-MVC-2

Sometime we need multiple submit button/multiple forms on a single form in MVC razor, in that scenario how will we handle the click event?
In this article, we will learn different ways of handling multiple submit button on the same view.
1

In the above diagram. We have Save & Submit buttons. Suppose when you click on Save button, you have to save data in the temp table & on Submit button you have to save the data in main table. For handling the above scenario, we have different ways to perform task:

Method 1
In this method, each submit button will post the form to the server but provides the different values – Save and Submit respectively for the commands. On the basis of command name we can implement our own logic in the controller’s action method.

View with multiple submit:

@using (Html.BeginForm("MultipleSubmit", "Home", FormMethod.Post, new { id = "submitForm" }))
{
    <fieldset>
        <legend>User Detail</legend>
        <ol>
            <li>
                <label>Name</label>
                <input type="text" name="Name" maxlength="50" />
                <br />
            </li>
            <li>
                <label>Address</label>
                <input type="text" name="Address" maxlength="50" />
                <br />
            </li>
            <li>
                <label>Phone</label>
                <input type="text" name="Phone" maxlength="50" />
                <br />
            </li>
        </ol>
        <button type="submit" id="btnSave" name="Submittype" value="Save">Save</button>
        <button type="submit" id="btnSubmit" name="Submittype" value="Submit">Submit</button>

    </fieldset>
}

2

Action method on controller:

        [HttpPost]
        public ActionResult MultipleSubmit(string Name, string Address, string Phone, string Submittype)
        {
            switch (Submittype)
            {
                case "Save":
                    {
                        break;
                    }
                case "Submit":
                    {
                        break;
                    }
            }
            return RedirectToAction("Index");
        }

3

Learn HTML5 Programming For Beginners

Method 2
In this method, we introduce a new form for handling the submit button click event. We can also use action method.

View with multiple submit & multiple form:

@using (Html.BeginForm("MultipleSubmit", "Home", FormMethod.Post, new { id = "submitForm" }))
{
    <fieldset>
        <legend>User Detail</legend>
        <ol>
            <li>
                <label>Name</label>
                <input type="text" name="Name" maxlength="50" />
                <br />
            </li>
            <li>
                <label>Address</label>
                <input type="text" name="Address" maxlength="50" />
                <br />
            </li>
            <li>
                <label>Phone</label>
                <input type="text" name="Phone" maxlength="50" />
                <br />
            </li>
        </ol>
        <button type="submit" id="btnSave" name="Submittype" value="Save">Save</button>      
        
        @*@Html.ActionLink("Submit", "MultipleButtonNewSubmit") *@

    </fieldset>
} 
@using (Html.BeginForm("MultipleButtonNewSubmit", "Home", FormMethod.Post, new { id = "newsubmitForm" })) { 
    <br />
    <button type="submit" id="btnSubmit" name="Submittype"   value="Submit">Submit</button>

} 

4

Action method on controller:

[HttpPost]-
        public ActionResult MultipleButtonNewSubmit ()
        {
           //Do your stuff here
            return RedirectToAction("Index");
        }

5

I hope you will enjoy these tricks when coding with MVC Razor.

Summary: In above example we have learnt how to use multiple submit and forms in single view in MVC.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Exclusive content

- Advertisement -

Latest article

21,501FansLike
4,106FollowersFollow
106,000SubscribersSubscribe

More article

- Advertisement -