Sử dụng Html.BeginForm và Ajax.BeginForm

BeginForm() trong ASP.NET MVC là một phương thức mở rộng sử dụng tạo thẻ “<form>” tương ứng. BeginForm() là một phương thức mở rộng cho cả hai lớp HtmlHelper và AjaxHelper. Phương thức trả về một đối tượng MVCForm từ lớp HtmlHelper và  lớp AjaxHelper vì vậy không có nhiều sự khác biệt giữa 2 lớp nhưng phương thức BeginForm() của lớp AjaxHelper gửi một form không đồng bộ đến server sử dụng JavaScript.

Có 2 loại phương thức mở rộng BeginForm(), đó là:

• Html.BeginForm()
• Ajax.BeginForm()

Bài viết này sử dụng Html.BeginForm() và Ajax.BeginForm() tạo trang thêm mới Product.

Các bước sử dụng 2 phương thức:

Bước 1: Tạo project ASP.NET MVC

Bước 2: Tạo ProductModel

public class ProductModel
{
  [Required]
  public string Id { get; set; }
  [Required]
  public string Name { get; set; }
  [Required]
  public decimal Price { get; set; }
}

Bước 3: Tạo ProductController

Sử dụng Html.BeginForm() tạo form thêm mới Product

Bước 1: Tạo phương thức Action CreateHtml() trong ProductController để hiển thị trang thêm mới Product.

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

Bước 2: Tạo view sử dụng phương thức Html.BeginForm() hiển thị view thêm mới Product.

@model ProjectMVC.Models.ProductModel
@{
    ViewBag.Title = "CreateHtml";
}
<h2>Create Product</h2>
@* Action="CreateHtml",Controller="Product" *@
@using (Html.BeginForm("CreateHtml","Product"))
{
    <div>Id @Html.TextBoxFor(m => m.Id)</div>
    <div>Name @Html.TextBoxFor(m => m.Name)</div>
    <div>Price @Html.TextBoxFor(m => m.Price)</div>
    <div><input type="submit" value="Add Product"/></div>
}

Bước 3: Tạo phương thức Action CreateHtml() sử dụng xử lý dữ liệu được gửi đến khi submit từ form thêm mới.

[HttpPost]
public ActionResult CreateHtml(ProductModel model)
{
  if (ModelState.IsValid)
  {
    //Thực hiện xử lý dữ liệu 
System.Text.StringBuilder sb = new System.Text.StringBuilder();
    sb.Append("Product Id :" + model.Id + "</br/>");
    sb.Append("Product Name :" + model.Name + "</br/>");
    sb.Append("Price :" + model.Price + "</br/>");
    return Content(sb.ToString());
  }
  else
  {
    return View(model);
  }
}

Chạy trang thêm mới Product hiển thị như sau:

Sau khi nhập dữ liệu và nhấn nút Add Product, kết quả được như sau:

Sử dụng Ajax.BeginForm() tạo form thêm mới Product

Bước 1: Tạo phương thức Action CreateAjax() trong ProductController để hiển thị form them mới.

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

Bước 2: Tạo view sử dụng phương thức Ajax.BeginForm() hiển thị view thêm mới Product.

Khi sử dụng phương thức Ajax.BeginForm() để tạo form submit dữ liệu sử dụng JavaScript. Chúng ta thêm tham chiếu đến file JavaScript trong file Views/Shared/_Layout.cshtml, file jquery.unobtrusive-ajax.min.js sử dụng cho submit ajax form.

<script src="~/Scripts/jquery-1.7.2.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>

Chúng ta thiết lập thuộc tính UnobtrusiveJavaScriptEnabled trong file Web.config như sau:

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

Tạo view chứa form sử dụng Ajax.BeginForm()

@model ProjectMVC.Models.ProductModel
@{
    ViewBag.Title = "CreateAjax";
}
<h2>Create Product</h2>
@* Action="CreateAjax",Controller="Product" *@
@using (Ajax.BeginForm("CreateAjax", "Product", new AjaxOptions { UpdateTargetId = "Productresult" }))
{
    <div id="Productresult"></div>
    <div>Id @Html.TextBoxFor(m => m.Id)</div>
    <div>Name @Html.TextBoxFor(m => m.Name)</div>
    <div>Price @Html.TextBoxFor(m => m.Price)</div>
    <div><input type="submit" value="Add Product" /></div>
}

Bước 3: Tạo phương thức Action CreateAjax() sử dụng xử lý dữ liệu được gửi đến khi submit từ form thêm mới.

[HttpPost]
public ActionResult CreateAjax(ProductModel model)
{
  if (ModelState.IsValid)
  {
    //Xử lý dữ liệu
    System.Text.StringBuilder sb = new System.Text.StringBuilder();
    sb.Append("Product Id :" + model.Id + "</br/>");
    sb.Append("Product Name :" + model.Name + "</br/>");
    sb.Append("Price :" + model.Price + "</br/>");
    return Content(sb.ToString());
  }
  else
  {
    return View(model);
  }
}

Chạy view thêm mới Product như sau:

Sau khi nhập dữ liệu và nhấn nút “Add Product” ta có kết quả như sau:

• Tweet
• Share
• Share
• Share
• Share