Working With Html.BeginForm() and Ajax.BeginForm() in MVC 3

using System.Collections.Generic;
using System.Web.Mvc;
using System.ComponentModel.DataAnnotations;

namespace FormTypesMvcApplication.Models
{
    public class ProductModel
    {
        public ProductModel()
        {
            Category = new List<SelectListItem>();
            Category.Add(new SelectListItem
            {
                Text = "Books",
                Value = "1"
            });
            Category.Add(new SelectListItem
            {
                Text = "Mobiles & Tablets",
                Value = "2"
            });
            Category.Add(new SelectListItem
            {
                Text = "Laptops & Accessories",
                Value = "3"
            });
        }

        public int ProductId { get; set; }
        
        [Required]
        public string Name { get; set; }
        
        public string Description { get; set; }
        public string Manufacturer { get; set; }
        
        [RegularExpression(@"^\$?\d+(\.(\d{2}))?$")]
        public decimal BasePrice { get; set; }
        
        public IList<SelectListItem> Category { get; set; }
        public int CategoryId { get; set; }
    }
}

public ActionResult ProductHtml()
{
    ProductModel model = new ProductModel();
    return View(model);
}

@{
    using (MvcForm mvcForm = Html.BeginForm())
    {
        <div>My Html Form</div>
    }
}

<form action="/Product/ProductHtml" method="post">
    <div>My Html Form</div>
</form>

@using(Html.BeginForm())
{
    <div>My Html Form</div>
}

@model FormTypesMvcApplication.Models.ProductModel
@using System.Web.Mvc.Html;

@{
    ViewBag.Title = "Product Master HTML";
}

<h2>Product Master</h2>

<fieldset>
    <legend>Product</legend>
    
    @using (Html.BeginForm())
    {
        <div class="formRowContainer">
            <div class="labelContainer">Name</div>
            <div class="valueContainer">
                @Html.TextBoxFor(model => model.Name)
                @Html.ValidationMessage("Name")
            </div>
        </div>
        <div class="clearStyle"></div>
        
        <div class="formRowContainer">
            <div class="labelContainer">Description</div>
            <div class="valueContainer">@Html.TextBoxFor(model => model.Description)</div>
        </div>
        <div class="clearStyle"></div>
        
        <div class="formRowContainer">
            <div class="labelContainer">Manufacturer</div>
            <div class="valueContainer">@Html.TextBoxFor(model => model.Manufacturer)</div>
        </div>
        <div class="clearStyle"></div>
        
        <div class="formRowContainer">
            <div class="labelContainer">Price</div>
            <div class="valueContainer">
                @Html.TextBoxFor(model => model.BasePrice)
                @Html.ValidationMessage("BasePrice")
            </div>
        </div>
        <div class="clearStyle"></div>
        
        <div class="formRowContainer">
            <div class="labelContainer">Category</div>
            <div class="valueContainer">
                @Html.DropDownListFor(model => model.CategoryId, Model.Category, "--Select--")
            </div>
        </div>
        <div class="clearStyle"></div>
        
        <div class="buttonContainer">
            <button>Add Product</button>
        </div>
    }
</fieldset>

Step 3. Create Action to handle the form submission.

We know that when the form is submitted, the Post method executes. In the "BeginForm()" method we did not pass any action and controller name so the default action method means that the view name action method is called to handle the post of the data request. So it creates an action that returns form data into the content to be shown on the UI on form submission.

[HttpPost]
public ActionResult ProductHtml(ProductModel model)
{
    if (ModelState.IsValid)
    {
        System.Text.StringBuilder sb = new System.Text.StringBuilder();

        sb.Append("Product Name : " + model.Name + "</br>");
        sb.Append("Description : " + model.Description + "</br>");
        sb.Append("Manufacturer : " + model.Manufacturer + "</br>");
        sb.Append("Price : " + model.BasePrice + "</br>");
        sb.Append("Category : " + model.Category[model.CategoryId - 1].Text);

        return Content(sb.ToString());
    }
    else
    {
        return View(model);
    }
}

Now the process is ready and runs the application.

Click on the submit button "Add Product" so that it submits all the form data and we get the result in another screen with the same URL due to post-back.

Working With Ajax.BeginForm()

Step 1. Create an Action in the controller to load a view in the UI.

Create an ActionResult return type method that returns a view with an empty model. This action method loads our view whenever we make a request from a browser. The action method is as follows.

public ActionResult ProductAjax()
{
    ProductModel model = new ProductModel();
    return View(model);
}

Step 2. Create View.

When we use "Ajax.BeginForm()" then the form will be submitted using JavaScript. We are using "_Layout. cshtml" as a shared layout so add the JavaScript file "jquery.unobtrusive-ajax.min.js" reference on it to handle the Ajax form submission request on post-back.

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

Now to handle the request we add "UnobtrusiveJavaScriptEnabled" as a key in the web. config file under the "<appSettings>" section.

<appSettings>
    <add key="webpages:Enabled" value="false" />
    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>

Now we create a view that has an Ajax form. The Ajax.BeginForm() method has three arguments, these are actionName, controllerName, and AjaxOptions. We are using the AjaxOptions object UpdateTargetId property that has a value of a control ID where the response will be shown after the post request. In the following code, we are passing the div id so the result data will be shown in that div.

@model FormTypesMvcApplication.Models.ProductModel

@{
    ViewBag.Title = "Product Master Ajax";
}

<h2>Product Master</h2>

<fieldset>
    <legend>Product</legend>
    
    @using (Ajax.BeginForm("ProductAjax", "Product", new AjaxOptions { UpdateTargetId = "Productresult" }))
    {
        <div id="Productresult"></div>
        
        <div class="formRowContainer">
            <div class="labelContainer">Name</div>
            <div class="valueContainer">
                @Html.TextBoxFor(model => model.Name)
                @Html.ValidationMessage("Name")
            </div>
        </div>
        <div class="clearStyle"></div>
        
        <div class="formRowContainer">
            <div class="labelContainer">Description</div>
            <div class="valueContainer">@Html.TextBoxFor(model => model.Description)</div>
        </div>
        <div class="clearStyle"></div>
        
        <div class="formRowContainer">
            <div class="labelContainer">Manufacturer</div>
            <div class="valueContainer">@Html.TextBoxFor(model => model.Manufacturer)</div>
        </div>
        <div class="clearStyle"></div>
        
        <div class="formRowContainer">
            <div class="labelContainer">Price</div>
            <div class="valueContainer">
                @Html.TextBoxFor(model => model.BasePrice)
                @Html.ValidationMessage("BasePrice")
            </div>
        </div>
        <div class="clearStyle"></div>
        
        <div class="formRowContainer">
            <div class="labelContainer">Category</div>
            <div class="valueContainer">
                @Html.DropDownListFor(model => model.CategoryId, Model.Category, "--Select--")
            </div>
        </div>
        <div class="clearStyle"></div>
        
        <div class="buttonContainer">
            <button>Add Product</button>
        </div>
    }
</fieldset>

Step 3. Create Action to handle the form submission.

We know that when a form is submitted the Post method executes. In the "BeginForm()" method we passed an action name and controller name so that the action method will be called that handles the post-data request. So it creates an action that returns the form data into the content to be shown on the UI on form submission.

[HttpPost]
public ActionResult ProductAjax(ProductModel model)
{
    if (ModelState.IsValid)
    {
        System.Text.StringBuilder sb = new System.Text.StringBuilder();
        sb.Append("Product Name : " + model.Name + "</br>");
        sb.Append("Description : " + model.Description + "</br>");
        sb.Append("Manufacturer : " + model.Manufacturer + "</br>");
        sb.Append("Price : " + model.BasePrice + "</br>");
        sb.Append("Category : " + model.Category[model.CategoryId - 1].Text);
        return Content(sb.ToString());
    }
    else
    {
        return View(model);
    }
}

Now the process is ready and runs the application.

Click on the submit button "Add Product" that submits all the form data and we get the results on the same screen in the div. So the result is in the following screen on the form design.

Conclusion

In this article we learned about both HTML form and Ajax form and how these forms work on post-back. We can use both forms as per our application requirements.