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

10 Comments

Join the conversation! Your thoughts help the community grow.

Devin Salemi9y ago
"CreateStudent11" --- What is this???? I think you don't need the whole part of onclick="location.href='@Url.Action("GetStudents", "CreateStudent11")' right, can't you just delete that phrase?
- Egil Hansen6y ago
  Yeah only a submit button is needed within the form, making a tutorial when you have no idea how things work seems like a bad idea :P
Ravi Patel11y ago
nice work
Ajay Gandhi11y ago
Thanks Everyone
Sibeesh Venu11y ago
Nice Share
Harshad Pansuriya11y ago
Nice one
Mohammed Ibrahim11y ago
nice
Nilesh Jadav11y ago
Good Article
Mukesh Kumar11y ago
Great One
Gowtham K11y ago
Good One