Calling HttpPost Action In MVC On Submit Button

Introduction 

 

This assignment is an extension to my previous assignment:

• Call HTTPGet Action And Update The PartialView Using jQuery

At the end of this assignment, you will understand the following things in MVC and jQuery.

• Calling HttpPost action in MVC on submit button

Requirement for these assignments.

• Visual Studio 2015

Additions to previous assignment add HttpPost action in the controller and create additional razor view as “CreateStudent.cshtml" as below:

 

 

Updated Controller Code

using DropdownGrid.Models;
using System.Collections.Generic;
using System.Web.Mvc;

namespace DropdownGrid.Controllers
{
    public class GetStudentsController : Controller
    {
        public ActionResult Index()
        {
            StudentDetailsModel _objuserloginmodel = new StudentDetailsModel();
            List<StudentDetailViewModel> _objStudent = new List<StudentDetailViewModel>();
            _objStudent = _objuserloginmodel.GetStudentList();
            _objuserloginmodel.Studentmodel = _objStudent;
            return View(_objuserloginmodel);
        }

        [HttpGet]
        public ActionResult SelectStudent(int? selectedStudent)
        {
            StudentDetailsModel _objuserloginmodel = new StudentDetailsModel();
            List<StudentDetailViewModel> _objStudent = new List<StudentDetailViewModel>();
            _objStudent = _objuserloginmodel.GetStudentList(selectedStudent);
            _objuserloginmodel.Studentmodel = _objStudent;
            return PartialView("_PartialStudent", _objuserloginmodel);
        }

        public ActionResult CreateStudent()
        {
            StudentDetailViewModel _objuserloginmodel = new StudentDetailViewModel();
            return View("CreateStudent", _objuserloginmodel);
        }

        [HttpPost]
        public ActionResult CreateStudent(StudentDetailViewModel objuserloginmodel)
        {
            StudentDetailsModel _objuserloginmodel = new StudentDetailsModel();
            List<StudentDetailViewModel> _objStudent = new List<StudentDetailViewModel>();
            _objStudent = _objuserloginmodel.GetStudentList();
            _objuserloginmodel.Studentmodel = _objStudent;
            return View("Index", _objuserloginmodel);
        }
    }
}

CreateStudent View Code

@model DropdownGrid.Models.StudentDetailViewModel

<script type="text/javascript" src="js/script.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

@{
    ViewBag.Title = "CreateStudent";
}

<h2>CreateStudent</h2>


@using (Html.BeginForm("CreateStudent", "GetStudents", FormMethod.Post))
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>StudentDetail</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Class, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Class, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Class, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Section, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Section, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Section, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Address, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Address, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Address, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" id="Submit" class="btn btn-default" onclick="location.href='@Url.Action("GetStudents", "CreateStudent11")'" />
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

The following are the details of block in view code,

 

So the following block shows you have to mention the post-action name (CreateStudent in below case, Controller Name (GetStudents in below case) and Form method

 

 

Finally, run the project and as a result, you will get the following screen. On dropdown element change HTTPGet action method will get called and the partial view gets filled respective data.

 

 

On create click data in the page gets posted. Here is the screenshot if you put a debug point on creating student action.

 

 

On this post method, you can either put save logic or additional things you want to perform. Here in the project attached, I haven’t put save logic. This is just a demo of how to post the data on the submit button.

 

I hope you understood how to call HttpPost action using MVC