Calling HttpPost Action In MVC On Submit Button

In this article you will learn how to call HttpPost action in MVC on submit button using jQuery.

This assignment is extension to my previous assignment:

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:

CreateStudent code

Updated Controller Code

  1. using DropdownGrid.Models;  
  2. using System.Collections.Generic;  
  3. using System.Web.Mvc;  
  4.   
  5. namespace DropdownGrid.Controllers  
  6. {  
  7.     public class GetStudentsController : Controller  
  8.     {  
  9.         public ActionResult Index()  
  10.         {  
  11.             StudentDetailsModel _objuserloginmodel = new StudentDetailsModel();  
  12.             List<StudentDetailViewModel> _objStudent = new List<StudentDetailViewModel>();  
  13.             _objStudent = _objuserloginmodel.GetStudentList();  
  14.             _objuserloginmodel.Studentmodel = _objStudent;  
  15.             return View(_objuserloginmodel);  
  16.         }  
  17.   
  18.         [HttpGet]  
  19.         public ActionResult SelectStudent(int? selectedStudent)  
  20.         {  
  21.             StudentDetailsModel _objuserloginmodel = new StudentDetailsModel();  
  22.             List<StudentDetailViewModel> _objStudent = new List<StudentDetailViewModel>();  
  23.             _objStudent = _objuserloginmodel.GetStudentList(selectedStudent);  
  24.             _objuserloginmodel.Studentmodel = _objStudent;  
  25.             return PartialView("_PartialStudent", _objuserloginmodel);  
  26.         }  
  27.   
  28.         public ActionResult CreateStudent()  
  29.         {  
  30.             StudentDetailViewModel _objuserloginmodel = new StudentDetailViewModel();  
  31.             return View("CreateStudent", _objuserloginmodel);  
  32.         }  
  33.   
  34.         [HttpPost]  
  35.         public ActionResult CreateStudent(StudentDetailViewModel objuserloginmodel)  
  36.         {  
  37.             StudentDetailsModel _objuserloginmodel = new StudentDetailsModel();  
  38.             List<StudentDetailViewModel> _objStudent = new List<StudentDetailViewModel>();  
  39.             _objStudent = _objuserloginmodel.GetStudentList();  
  40.             _objuserloginmodel.Studentmodel = _objStudent;  
  41.             return View("Index", _objuserloginmodel);  
  42.         }  
  43.     }  
  44. }  
CreateStudent View Code
  1. @model DropdownGrid.Models.StudentDetailViewModel  
  2.   
  3. <script type="text/javascript" src="js/script.js"></script>  
  4. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>  
  5.   
  6. @{  
  7.     ViewBag.Title = "CreateStudent";  
  8. }  
  9.   
  10. <h2>CreateStudent</h2>  
  11.   
  12.   
  13. @using (Html.BeginForm("CreateStudent""GetStudents", FormMethod.Post))  
  14. {  
  15.     @Html.AntiForgeryToken()  
  16.   
  17.     <div class="form-horizontal">  
  18.         <h4>StudentDetail</h4>  
  19.         <hr />  
  20.         @Html.ValidationSummary(true""new { @class = "text-danger" })  
  21.         <div class="form-group">  
  22.             @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })  
  23.             <div class="col-md-10">  
  24.                 @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })  
  25.                 @Html.ValidationMessageFor(model => model.Name, ""new { @class = "text-danger" })  
  26.             </div>  
  27.         </div>  
  28.   
  29.         <div class="form-group">  
  30.             @Html.LabelFor(model => model.Class, htmlAttributes: new { @class = "control-label col-md-2" })  
  31.             <div class="col-md-10">  
  32.                 @Html.EditorFor(model => model.Class, new { htmlAttributes = new { @class = "form-control" } })  
  33.                 @Html.ValidationMessageFor(model => model.Class, ""new { @class = "text-danger" })  
  34.             </div>  
  35.         </div>  
  36.   
  37.         <div class="form-group">  
  38.             @Html.LabelFor(model => model.Section, htmlAttributes: new { @class = "control-label col-md-2" })  
  39.             <div class="col-md-10">  
  40.                 @Html.EditorFor(model => model.Section, new { htmlAttributes = new { @class = "form-control" } })  
  41.                 @Html.ValidationMessageFor(model => model.Section, ""new { @class = "text-danger" })  
  42.             </div>  
  43.         </div>  
  44.   
  45.         <div class="form-group">  
  46.             @Html.LabelFor(model => model.Address, htmlAttributes: new { @class = "control-label col-md-2" })  
  47.             <div class="col-md-10">  
  48.                 @Html.EditorFor(model => model.Address, new { htmlAttributes = new { @class = "form-control" } })  
  49.                 @Html.ValidationMessageFor(model => model.Address, ""new { @class = "text-danger" })  
  50.             </div>  
  51.         </div>  
  52.   
  53.         <div class="form-group">  
  54.             <div class="col-md-offset-2 col-md-10">  
  55.                 <input type="submit" value="Create" id="Submit" class="btn btn-default" onclick="location.href='@Url.Action("GetStudents", "CreateStudent11")'" />  
  56.             </div>  
  57.         </div>  
  58.     </div>  
  59. }  
  60.   
  61. <div>  
  62.     @Html.ActionLink("Back to List""Index")  
  63. </div>  
The following are the details of block in view code,

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

code

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 partial view gets filled respective data.
create

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

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 demo of how to post the data on submit button.

I hope you understood how to call HttpPost action using MVC