معرفی
این مقاله هر دو @Html.Action و @Html.RenderAction را معرفی می کند. اینها برای فراخوانی یک نمای جزئی در نمای دیگر با روش عمل استفاده می شوند. همانطور که گزینه های دیگری مانند @Html.Partial و @Html.RenderPartial برای فراخوانی یک نمای جزئی در نماهای دیگر داریم، پس چرا از @Html.Action و @Html.RenderAction استفاده می کنیم؟ ما از این دو روش کمکی html در سناریوهای زیر استفاده می کنیم.
- برای فراخوانی نمای جزئی در نمای دیگری.
- نمای جزئی مستقل از نمای متناظر به عبارت دیگر مدل نمای جزئی است و در نماهای تایپ شده قوی با مدل نمای متناظر ارتباط ندارد.
- قبل از اینکه در نمای مربوطه ارائه شود، به برخی عملیات روی داده های نمای جزئی نیاز داریم.
- ما یک نمای جزئی از روشهای اقدام ChildActionOnly را در نمای دیگری با درخواست GET فراخوانی میکنیم.
هر زمان که در برنامه خود به وضعیت بالاتری رسیدیم، ترجیح می دهیم از این روش های کمکی Html استفاده کنیم. حالا بیایید نگاهی به اطلاعات خلاصه این روش های کمکی Html بیندازیم.
@Html.Action
این Html.Action نمای جزئی را به عنوان یک رشته HTML ارائه می کند تا بتوانیم آن را در متغیر رشته ای دیگری ذخیره کنیم. این روش از نوع بازگشتی رشته ای است بنابراین ابتدا نتیجه را به صورت رشته برمی گرداند و سپس نتیجه را به پاسخ ارائه می دهد.
@Html.RenderAction
این نیز مانند Html.Action است، اما تفاوت اصلی این است که نتیجه را مستقیماً به پاسخ ارائه می دهد، به همین دلیل اگر اکشن مقدار زیادی HTML را از Html.Action@ برگرداند، کارآمدتر است.
اکنون نگاهی به اجرای ذرات این دو خواهیم داشت.
با استفاده از کد
ما یک برنامه MVC ایجاد می کنیم که دارای نمای ورود به سیستم و ثبت کارمند است، زیرا هر دو ورود به سیستم و ثبت نام کارمند مستقل از یکدیگر هستند. برای ترکیب اینها در نمای واحد، دو نمای جزئی ایجاد می کنیم، یکی برای ورود به سیستم کارمند و دیگری برای ثبت نام کارمند. همانطور که این دو دیدگاه نیز مستقل از دیدگاه های متناظر هستند که در آنها فرا می خوانند.
شکل 1: نمای جزئی در نمای مربوطه
اول از همه ما دو مدل نمای ایجاد می کنیم، یکی برای Employee Login (EmployeeLoginViewModel) و دیگری برای Employee Registration (EmployeeViewModel). قطعه کد زیر هر دو را نشان می دهد.
- namespace EFOperation.Models
- {
- public class EmployeeLoginViewModel
- {
- public string Email { get; set; }
- public string Password { get; set; }
- }
- }
- using System.ComponentModel.DataAnnotations;
- namespace EFOperation.Models
- {
- public class EmployeeViewModel
- {
- public string Name { get; set; }
- public string Email { get; set; }
- public string Password { get; set; }
- [Display(Name="Confirm Password")]
- public string ConfirmPassword { get; set; }
- }
- }
مطابق شکل 1، یک نمای Index ایجاد می کنیم که هم نمای ورود به سیستم کارمند و هم نمای جزئی ثبت نام کارمند را دارد، بنابراین کنترل کننده ای را تعریف می کنیم که دارای سه روش عمل است. روش اقدام "Index" نمای اصلی و دو روش اقدام فرزند دیگر "EmployeeLogin" و "EmployeeRegistration" را برمی گرداند. قطعه کد زیر EmployeeController را نشان می دهد.
- using EFOperation.Models;
- using System.Web.Mvc;
- namespace EFOperation.Controllers
- {
- public class EmployeeController : Controller
- {
- public ActionResult Index()
- {
- return View("Index");
- }
- [ChildActionOnly]
- public ActionResult EmployeeLogin()
- {
- EmployeeLoginViewModel model = new EmployeeLoginViewModel();
- return PartialView("_EmployeeLogin",model);
- }
- [ChildActionOnly]
- public ActionResult EmployeeRegistration()
- {
- EmployeeViewModel model = new EmployeeViewModel();
- return PartialView("_EmployeeRegistration",model);
- }
- }
- }
در مثال ما، نمای Index یک نمای قوی تایپ نشده است. اگر به شدت تایپ شده باشد، هیچ تاثیری بر مدل نمای جزئی ندارد زیرا با کمک Html.Action@ و @Html.RenderAction می توانیم از مدل های مستقل در نماهای جزئی استفاده کنیم. اکنون نگاه کنید که چگونه نماهای جزئی در نمای مربوطه نامیده می شوند. قطعه کد زیر برای نمای جزئی ورود کارکنان.
- @model EFOperation.Models.EmployeeLoginViewModel
- <section id="loginForm">
- @using (Html.BeginForm("EmployeeLogin", "Employee", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
- {
- @Html.AntiForgeryToken()
- <h4>Use a local account to log in.</h4>
- <hr />
- <div class="form-group">
- @Html.LabelFor(m => m.Email, new { @class = "col-md-2 control-label" })
- <div class="col-md-10">
- @Html.TextBoxFor(m => m.Email, new { @class = "form-control" })
- </div>
- </div>
- <div class="form-group">
- @Html.LabelFor(m => m.Password, new { @class = "col-md-2 control-label" })
- <div class="col-md-10">
- @Html.PasswordFor(m => m.Password, new { @class = "form-control" })
- @Html.ValidationMessageFor(m => m.Password)
- </div>
- </div>
- <div class="form-group">
- <div class="col-md-offset-2 col-md-10">
- <input type="submit" value="Log in" class="btn btn-default" />
- </div>
- </div>
- }
- </section>
قطعه کد زیر برای نمای ثبت نام کارمند.
- @model EFOperation.Models.EmployeeViewModel
- @using (Html.BeginForm("EmployeeRegistration", "Employee", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
- {
- <h4>Create a new account.</h4>
- <hr />
- <div class="form-group">
- @Html.LabelFor(m => m.Name, new { @class = "col-md-2 control-label" })
- <div class="col-md-10">
- @Html.TextBoxFor(m => m.Name, new { @class = "form-control" })
- </div>
- </div>
- <div class="form-group">
- @Html.LabelFor(m => m.Email, new { @class = "col-md-2 control-label" })
- <div class="col-md-10">
- @Html.TextBoxFor(m => m.Email, new { @class = "form-control" })
- </div>
- </div>
- <div class="form-group">
- @Html.LabelFor(m => m.Password, new { @class = "col-md-2 control-label" })
- <div class="col-md-10">
- @Html.PasswordFor(m => m.Password, new { @class = "form-control" })
- </div>
- </div>
- <div class="form-group">
- @Html.LabelFor(m => m.ConfirmPassword, new { @class = "col-md-2 control-label" })
- <div class="col-md-10">
- @Html.PasswordFor(m => m.ConfirmPassword, new { @class = "form-control" })
- </div>
- </div>
- <div class="form-group">
- <div class="col-md-offset-2 col-md-10">
- <input type="submit" class="btn btn-default" value="Register" />
- </div>
- </div>
- }
اکنون هر دو نمای جزئی را با کمک Html.Action@ و @Html.RenderAction در نمایه اصلی فراخوانی می کنیم. قطعه کد زیر برای همین است.
- @{
- ViewBag.Title = "Index";
- }
- <div class="row">
- <div class="col-lg-6">
- @Html.Action("EmployeeLogin")
- </div>
- <div class="col-lg-6">
- @{Html.RenderAction("EmployeeRegistration");}
- </div>
- </div>
حالا برنامه را اجرا کنید و همان نتیجه شکل 2 را می گیریم.
شکل 2: نمای نمایه
مقالات بیشتری را در ASP.NET بخوانید،