Use of Formaction in submit button in MVC application

Parismita panda
In this article we submit a form without using a scripting language (like javascript or jquery) in an MVC application. Here we use formaction of the button in the view page for to call the Controller action.

Let's create an application in an MVC. Then create a database and then create a table. Then add an entity framework model select your database at creating them in your Model folder of your application. Then save it.

Now add a controller and add a view page for it. In view page, we add a button for submitting the details. Write this below code in your view page.

Source Code:

@model Research.Models.Clscategory
@{
    ViewBag.Title = "Index";
}

 <h2>Index</h2>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
@using (Html.BeginForm("Index", "Category", FormMethod.Post, new {enctype="multipart/form-data" }))
{
    <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
        <div class="container">
            <div class="col-md-3 col-lg-3 col-sm-12 col-xs-12">
                Category Name
            </div>
            <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12">
                @Html.TextBoxFor(a => a.Category_Name, new { @class = "text-primary", style = "width:100%;" })
            </div>
            <div class="col-md-3 col-lg-3 col-sm-12 col-xs-12">
                @Html.ValidationMessageFor(a => a.Category_Name)
            </div>
        </div>
        <div style="height:10px"></div>
        <div class="container">
            <div class="col-md-3 col-lg-3 col-sm-12 col-xs-12">
               Description
            </div>
            <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12">
                @Html.TextAreaFor(a => a.Category_Description, new { @class = "text-primary", style = "width:100%;" })
            </div>
            <div class="col-md-3 col-lg-3 col-sm-12 col-xs-12">
               
            </div>
        </div>
        <div style="height:10px"></div>
        <div class="container">
            <div class="col-md-3 col-lg-3 col-sm-12 col-xs-12">
                Parent Category
            </div>
            <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12">
                @Html.DropDownListFor(a => a.Parent_Category_Id, new SelectList(Model.categories, "Category_Id", "Category_Name"), "Select Parent", new { @style = "width:100%;" })
              
            </div>
            <div class="col-md-3 col-lg-3 col-sm-12 col-xs-12">
                
            </div>
        </div>
       
        <div style="height:10px"></div>
        <div class="container">
            <div class="col-md-3 col-lg-3 col-sm-12 col-xs-12">
                Upload Image
            </div>
            <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12">
               
                <input type="file" title="search image" id="file" name="file" onchange="show(this)" />
            </div>

             <div class="col-md-3 col-lg-3 col-sm-12 col-xs-12">

             </div>
        </div>
        <div style="height:10px"></div>
        <div class="container">
            <div class="col-md-3 col-lg-3 col-sm-12 col-xs-12">

             </div>
            <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12">

                 <img id="user_img" src="@Href(@Model.Category_Image)"
                     height="100"
                     width="90">
            </div>
            <div class="col-md-3 col-lg-3 col-sm-12 col-xs-12">
            </div>
        </div>
        <div style="height:10px"></div>
        <div class="container">
            <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
                <input type="submit" value="Submit" class="btn btn-primary" formaction="/Category/SaveData" />
            </div>
        </div>
    </div>
</div>
///Show uploaded image in image control
   <script type="text/javascript">
            function show(input) {
                if (input.files && input.files[0]) {
                    var filerdr = new FileReader();
                    filerdr.onload = function (e) {
                        $('#user_img').attr('src', e.target.result);
                    }
                    filerdr.readAsDataURL(input.files[0]);
                }
            }

         </script>
///Show uploaded image in image control
}

@model Research.Models.Clscategory is used for model class reference. Here the "Research" is my application name, "Models" is my folder name which is present in my application, Then "Clscategory" is my model class name this class file comes from your model context file.

 In the view page, we mention formaction for calling controller action. e.g:

 <input type="submit" value="Submit" class="btn btn-primary" formaction="/Category/SaveData" />

In formaction,

formaction="/Category/SaveData" 

Category- Controller Name
SaveData- Action Name

Then write this below code in your controller page.

 Source code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Research.Models;
using System.IO;
namespace Research.Controllers
{
    public class CategoryController : Controller
    {
        // GET: Category
        Database1Entities ob = new Database1Entities();
        public ActionResult Index()
        {
            Clscategory catg = new Clscategory();
            catg.Category_Image = "";
            catg.categories = ob.Tbl_Category.ToList();
            return View(catg);
        }
        [HttpPost]
        public ActionResult SaveData(Clscategory catg, HttpPostedFileBase file)
        {
            if (ModelState.IsValid)
            {
               // HttpPostedFileBase gg = Request.Files["file"];
                string path = "";
                catg.Category_Image ="";
                if (file != null)
                {
                    catg.Category_Image = "~/Profile_Image/" + file.FileName;

                     //store image in folder
                    file.SaveAs(Server.MapPath("~/Profile_Image/") + file.FileName);
                    //var fileName = Path.GetFileName(catg.Category_Image.FileName);
                    // path = Path.Combine(Server.MapPath("~/Profile_Image/"), catg.Category_Image.FileName);
                    // file.SaveAs(path);
                    //file.SaveAs(path);
                }
                Tbl_Category tblcatg = new Tbl_Category();
                tblcatg.Category_Description = catg.Category_Description;
                tblcatg.Category_Image = catg.Category_Image;
                tblcatg.Category_Name = catg.Category_Name;
                tblcatg.Parent_Category_Id = catg.Parent_Category_Id;
                ob.Tbl_Category.Add(tblcatg);
                ob.SaveChanges();
                Clscategory catg1 = new Clscategory();
                catg1.Category_Image = "";
                catg1.categories = ob.Tbl_Category.ToList();
               
                return View("Index", catg1);
            }
            else
            {
                Clscategory catg1 = new Clscategory();
                catg1.Category_Image = "";
                catg1.categories = ob.Tbl_Category.ToList();
                return View("Index", catg1);
            }
        }

     }
}

Here "Index" is the View page. We pass 2 arguments in this method. Such as:

 public ActionResult SaveData(Clscategory catg, HttpPostedFileBase file)

Here "Clscategory" is the model class and "HttpPostedFileBase" returns the value of uploaded document.

In this way we use the formaction property for submit button. For this property we use the model class for getting data from view page to controller.
Tags
Reactions

Post a Comment

0 Comments