ASP.NET MVC第022天_Ajax Helper_Ajax.BeginForm使用筆記part2

- 12月 08, 2021

Ajax.BeginForm()

主要是微軟封裝好用來實踐異步表單提交的一項擴充幫助方法

以下為其11種多載method各自不同簽章

public static MvcForm BeginForm(this AjaxHelper ajaxHelper, string actionName, string controllerName, AjaxOptions ajaxOptions);
public static MvcForm BeginForm(this AjaxHelper ajaxHelper, string actionName, string controllerName, RouteValueDictionary routeValues, AjaxOptions ajaxOptions, IDictionary<string, object> htmlAttributes);
public static MvcForm BeginForm(this AjaxHelper ajaxHelper, string actionName, string controllerName, RouteValueDictionary routeValues, AjaxOptions ajaxOptions);
public static MvcForm BeginForm(this AjaxHelper ajaxHelper, string actionName, string controllerName, object routeValues, AjaxOptions ajaxOptions);
public static MvcForm BeginForm(this AjaxHelper ajaxHelper, string actionName, RouteValueDictionary routeValues, AjaxOptions ajaxOptions, IDictionary<string, object> htmlAttributes);
public static MvcForm BeginForm(this AjaxHelper ajaxHelper, string actionName, string controllerName, object routeValues, AjaxOptions ajaxOptions, object htmlAttributes);
public static MvcForm BeginForm(this AjaxHelper ajaxHelper, string actionName, object routeValues, AjaxOptions ajaxOptions, object htmlAttributes);
public static MvcForm BeginForm(this AjaxHelper ajaxHelper, string actionName, object routeValues, AjaxOptions ajaxOptions);
public static MvcForm BeginForm(this AjaxHelper ajaxHelper, string actionName, RouteValueDictionary routeValues, AjaxOptions ajaxOptions);
public static MvcForm BeginForm(this AjaxHelper ajaxHelper, string actionName, AjaxOptions ajaxOptions);
public static MvcForm BeginForm(this AjaxHelper ajaxHelper, AjaxOptions ajaxOptions);

主要用法其實跟Html.BeginForm()差異不大只不過Html.BeginForm()屬於同步的

在此準備一個最簡單的一個表單

ProductController跟Product相應的Add.cshtml View都先添加準備好

這邊套用的方法簽章為此類基本款

BeginForm(this AjaxHelper ajaxHelper,

string actionName,

string controllerName,

AjaxOptions ajaxOptions);

Add View

@{
    ViewBag.Title = "Add";
}

<h2>Add</h2>

@using (Ajax.BeginForm("Add",
                       "Product",
                       new AjaxOptions() { HttpMethod = "Post", UpdateTargetId = "msg" }))
{
    <div>
        <label>商品名:</label>
        <input type="text" id="product_name" name="product_name" />

    </div>
    <div>
        <input type="submit" value="提交" />
    </div>
}
<div id="msg"></div>

ProductController 的Add Action (GET/POST)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcAjaxTestApp.Controllers
{
    public class ProductController : Controller
    {

        [HttpGet]
        public ActionResult Add()
        {
            return View();
        }

        [HttpPost]
        public string Add(string product_name)
        {
            List<string> lsProduct = new List<string>();
            lsProduct.Add(product_name);
            return "商品添加成功";
        }

    }
}

運行效果就是不會刷新的局部更新表單提交

記得表單提交時候最重要是設置name屬性且跟傳入Action參數要一致

後端確認也有接收成功

假如表單有超過多組欄位這樣子一個個參數會寫的十分多

此時就一樣透過ViewModel來傳遞

ProductViewModel.cs

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

namespace MvcAjaxTestApp.Models
{
    public class ProductViewModel
    {
        [Display(Name="商品名稱")]
        [Required(ErrorMessage ="{0}不可為空值")]
        public string Name { get; set; }
        [Display(Name="商品數量")]
        [Required(ErrorMessage = "{0}不可為空值範圍0~100")]
        [Range(0,100)]
        public int Sum { get; set; }
        [Display(Name = "商品價格")]
        [Required(ErrorMessage ="{0}不可為空值")]
        [DataType(DataType.Currency)]
        public decimal Price { get; set; }
    }
}

~\Views\Product\Add.cshtml

@model MvcAjaxTestApp.Models.ProductViewModel

@{
    ViewBag.Title = "Add Product";
}

<h2>Add</h2>

@using (Ajax.BeginForm("Add", "Product", null,
    new AjaxOptions() { HttpMethod = "Post", InsertionMode = InsertionMode.Replace, UpdateTargetId = "msg" },
    new { @class = "form-horizontal", role = "form" }))
{
    @Html.AntiForgeryToken()
    <div class="form-horizontal">
        <h4>@ViewBag.Title</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(m => m.Name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextBoxFor(m => m.Name, null, htmlAttributes: new { @class = "form-control" })
                @Html.ValidationMessageFor(m => m.Name, "", htmlAttributes: new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(m => m.Sum, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextBoxFor(m => m.Sum, null, htmlAttributes: new { @class = "form-control" })
                @Html.ValidationMessageFor(m => m.Sum, "", htmlAttributes: new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(m => m.Price, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextBoxFor(m => m.Price, null, htmlAttributes: new { @class = "form-control" })
                @Html.ValidationMessageFor(m => m.Price, "", htmlAttributes: new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            <div>
                <input type="submit" value="提交" class="btn btn-primary" />
            </div>
            <div class="text-danger" id="msg"></div>
        </div>
    </div>
}

ProductController.cs

using MvcAjaxTestApp.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcAjaxTestApp.Controllers
{
    public class ProductController : Controller
    {

        [HttpGet]
        public ActionResult Add()
        {
            return View();
        }

        [HttpPost]
        public string Add(ProductViewModel model)
        {
            List<object> lsProduct = new List<object>();
            lsProduct.Add(model.Name);
            lsProduct.Add(model.Sum);
            lsProduct.Add(model.Price);
            return "商品添加成功";
        }

        [HttpGet]
        public string GetProductInfo(string productId, string productName)
        {
            return $"產品編號:{productId},產品名稱:{productName}";
        }

    }
}