استفاده از چندین Form در یک صفحه MVC

در این مقاله ، نحوه استفاده از چندین Form در یک صفحه View را توضیح خواهیم داد، و با ارائه یک مثال بصورت مرحله به مرحله به بررسی این موضوع خواهیم پرداخت .

Controller :
یک Controller شامل چندین Action Method میباشد .

Action Method هایی برای مدیریت عملیات های GET :
درون این Action Method ها یک View ساده Return میشود .

Action Method هایی برای مدیریت عملیات های POST - FORM 1 :
این Acion Method زمانی که Form 1 ، در حین زدن دکمه Submit ، Save میشود ، فراخوانی میشود . در مثال زیر ، یک رشته درون TempData ذخیره میشود برای اینکه نشان دهیم که دکمه "Save" کلیک شده است و در آخر آن را به صفحه Index بازمیگردانیم .

Action Method هایی برای مدیریت عملیات هایPOST - FORM 1 :
این Acion Method زمانی که Form 2 ، در حین زدن دکمه Submit ، Cancelمیشود ، فراخوانی میشود . در مثال زیر ، یک رشته درون TempData ذخیره میشود برای اینکه نشان دهیم که دکمه "Cancel" کلیک شده است و در آخر آن را به صفحه Index بازمیگردانیم .

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }
 
    [HttpPost]
    public ActionResult Save()
    {
        TempData["Message"] = "You clicked Save!";
        return RedirectToAction("Index");
    }
 
    [HttpPost]
    public ActionResult Cancel()
    {
        TempData["Message"] = "You clicked Cancel!";
        return RedirectToAction("Index");
    }
}

View :
در View زیر دو Form جود دارد که با استفاده از Helperهای Html.BeginForm ایجاد شده اند و هر فرم دارای یک دکمه Submit میباشد .

و در آخر ، متدهای JavaScript ای برای نمایش TempData مورد استفاده قرار میگیرد . استفاده از JavaScript Alert Message Box برای نمایش پیام TempData .

@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
</head>
<body>
    <table>
        <tr>
            <td>
                @using (Html.BeginForm("Save", "Home", FormMethod.Post))
                {
                    <input type="submit" id="btnSave" value="Save"/>
                }
            </td>
            <td>
                @using (Html.BeginForm("Cancel", "Home", FormMethod.Post))
                {
                    <input type="submit" id="btnCancel" value="Cancel"/>
                }
            </td>
        </tr>
    </table>
  
    @if (TempData["Message"] != null)
    {
       <script type="text/javascript">
            window.onload = function () {
                alert('@TempData["Message"]');
            };
        </script>
    }
</body>
</html>

خروجی برنامه بصورت زیر خواهد بود :