توضیحات و دانلود

ویرایشگر WYSIWYG Editor ) Rich Text ) در ASP.Net MVC 5
0 0
ویرایشگر WYSIWYG Editor ) Rich Text ) در ASP.Net MVC 5

با سلام در این مقاله با یک مثال توضیح خواهم داد که چگونه می توان از ویرایشگرRich Text (ویرایشگر WYSIWYG) در ASP.Net MVC 5 Razor استفاده کرد.
Rich Text Editor (ویرایشگر WYSIWYG) در ASP.Net MVC 5 Razor با استفاده از TinyMCE RichTextBox که یک پلاگین JavaScript است و در عنصر HTML TextArea اعمال می شود.
این مقاله همچنین نحوه تأیید اعتبار محتوای ویرایشگر Rich Text (ویرایشگر WYSIWYG) را با استفاده از حاشیه نویسی داده ها در ASP.Net MVC 5 Razor نشان می دهد.
Model
کلاس Model زیر یک ویژگی PersonalDetails است که ویژگی های حاشیه نویسی داده های زیر در آن اعمال شده است.
1.  نمایش داده های حاشیه نویسی که برای نمایش برچسب برای ویژگی ها استفاده می شود
2. از ویژگی های حاشیه نویسی لازم برای اعتبارسنجی ویژگی ها استفاده می شود.
3. ویژگی AllnotHtml Annotation Data برای فعال کردن ارسال محتوای HTML از طریق فیلدهای ورودی است که به طور پیش فرض غیرفعال است. برای اطلاعات بیشتر ، لطفاً مقاله ویژگی AllowHtml همراه با نحوه کاربرد و مثال در ASP.Net MVC را مطالعه کنید .

public class PersonModel
{
    [Display(Name = "Personal Details:")]
    [Required(ErrorMessage = "Personal Details is required.")]
    [AllowHtml]
    public string PersonalDetails { get; set; }
}

Controller
Controller از دو روش تشکیل شده است.
روش انجام عملیات GET
در داخل این روش ، به سادگی Viewهمراه با موضوع کلاس PersonModel بازگردانده می شود.
روش انجام عملیات POST
این روش عمل POST را انجام می دهد و با ارسال فرم ، هدف کلاس PersonModel به این روش ارسال می شود که در نهایت به Viewباز می گردد.

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View(new PersonModel());
    }
 
    [HttpPost]
    public ActionResult Index(PersonModel person)
    {
        return View(person);
    }
}

View
در داخل View ، در اولین خط کلاس PersonModel به عنوان Model برای View اعلام می شود.
View شامل یک فرم HTML است که با استفاده از روش Html.BeginForm با پارامترهای زیر ایجاد شده است.
ActionName - نام عمل در این حالت Index است.
ControllerName - نام Controller در این حالت Home است.
FormMethod - این روش فرم یعنی GET یا POST را مشخص می کند. در این حالت روی POST تنظیم می شود..
در داخل نمای ، از سه عملکرد HTML Helper استفاده شده است:
1. Html.LabelFor - نمایش نام ویژگی Model.
2. Html.TextAreaFor - ایجاد TextArea (Multiline TextBox) برای ویژگی Model.
3. Html.ValidationMessageFor - نمایش پیام اعتبار سنجی برای ویژگی.
همچنین دکمه ارسال وجود دارد که هنگام کلیک ، فرم ارسال می شود. پس از ارسال ، مقدار ویژگی PersonalDetails با استفاده از HTML SPAN نمایش داده می شود.
بسته های اسکریپت jQuery در انتهای Model با استفاده از عملکرد Scriptts.Render ارائه می شوند. پلاگین TinyMCE با ارائه TinyMCE از CDN آن در TextArea اعمال می شود.

@model TinyMCE_MVC.Models.PersonModel
 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
    <style type="text/css">
        body {
            font-family: Arial;
            font-size: 10pt;
        }
 
        .error {
            color: red;
        }
    </style>
</head>
<body>
    @using (Html.BeginForm("Index", "Home", FormMethod.Post))
    {
 
        @Html.LabelFor(m => m.PersonalDetails)<br/>
        @Html.TextAreaFor(m => m.PersonalDetails)
        @Html.ValidationMessageFor(m => m.PersonalDetails, "", new { @class = "error" })
        <br/><br/>
        <input type="submit" value="Submit"/>
        <br/>
        <span>@Html.Raw(Model.PersonalDetails)</span>
    }
    @Scripts.Render("~/bundles/jquery")
    <script type="text/javascript" src="//tinymce.cachefly.net/4.0/tinymce.min.js"></script>
    <script type="text/javascript">
        tinymce.init({ selector: 'textarea', width: 500 });
    </script>
</body>
</html>

 


دانلود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

ارسال نظر
ارسال پیام به :