سلام خدمت شما ، در این مقاله میخوام با استفاده از Modal بوت استرپ فرم های ویرایش ، اضافه ، و حذف را در همان صفحه باز کنیم بدون اینکه صفحه ای جدا طراحی کنیم. این ایده ی نمایش مشاهده ی ویرایش استاندارد با ویرایشگرهای طبقه بندی شده ی استاندارد برای اشیای master و آرگومان های آن با لیستی از ویرایشگر ها که اجازه ی ویرایش لیستی از اشیای فرزندان را در همان صفحه دارند , است.

مقدمه:

معمولا چیزی که ما از داخل جعبه از قالب های  VS2013 ASP.NET MVC طبقه بندی شده خارج میکنیم  مدل های ساده است.
به سرعت فهمیدم که این کار ساده ای نیست تا اینکه معجزه ی گسترش RenderAction Http را کشف کردم. من سعی کردم که نمونه های بسیار آسان را به آن الحاق کنم اما پایه ی دانش ASP.NET MVC مورد نیاز است .

کد های اولیه :

در ابتدا اجازه دهید که یک پروژه ی ASP.NET استاندارد و جدیدی بنام TestAjax  با انتخاب قالب MVC با قراردادن مرجع اصلی MVC و بدون تصدیق بسازیم.
برای ساده نگه داشتن آن بیاید دو مدل بسازیم : اشخاص و لیست آدرس های مرتبط با هر شخص

namespace TestAjax.Models
{
    public class Person
    {
        public int Id { get; set; }
 
        [Display(Name = "First Name")]
        [Required]
        [StringLength(255, MinimumLength = 3)]
        public string Name { get; set; }
 
        [Display(Name = "Last Name")]
        [Required]
        [StringLength(255, MinimumLength = 3)]
        public string  Surname { get; set; }
 
        public virtual ICollection<Address> Addresses { get; set; }
    }
}
 
namespace TestAjax.Models
{
    public class Address
    {
        public int Id { get; set; }
 
        [Required]
        [StringLength(255, MinimumLength = 3)]
        public string City { get; set; }
      
        [Display(Name = "Street Address")]
        public string Street { get; set; }
 
        [Phone]
        public string Phone { get; set; }
 
        public int PersonID { get; set; }
        public virtual Person Person  { get; set; }
    }
}

حال که مدل هایمان را سر جای خود دادیم  کنترلر ها را میسازیم. بر روی فولدر کنترلر راست کلیک کنید و گزینه ی افزودن    کنترلر را انتخاب کنید و از بخش دیالوگ ” MVC 5 Controller with views, using Entity Framework ”  را انتخاب کنید. حال شخص را به عنوان کلاس مدل انتخاب میکنیم , یک DataDb جدید میسازیم و همه chechbox های داخل دیالوگ را انتخاب میکنیم. پروژه را بازسازی کنید و کنترلر دیگری برای انتخاب آدرس DataDb ساخته شده بیافزایید.
برای آماده سازی مرحله ی نهایی کنترلر خانه و فولدر خانه از بخش مشاهده را حذف کنید. در مشاهده _Layout اشتراک گذاری شده آیتم های منوی استاندارد را با کلمه ی Index تعویض کنید , درباره ی Contact  با یکی که اشاره به People دارد :

و در نهایت در App_Start\RouteConfig.cs ما باید کلمه Index را با People جایگزین کنیم که برنامه مان به طور پیش فرض به کنترلر People اشاره میکند.حال که پروژه مان تکمیل و اجرا شده ما , تغییرات ارائه خواهند شد.

آیکون های Bootstrap در دکمه ها

برای زیباسازی دکمه های نمونه من تصمیم گرفتم که دکور آنها را به صورت Bootstarp glyphicons دربیاورم. به خاطر سینتکس های glyphicon ها :

من یک  HtmlHelper نیز افزوده ام تا خروجی صحیح Html  را از کمک کننده ی ActionLink بدست آورد.

در داخل پروژه فولدر های HtmlHelper بسازید و داخل آنها کلاس MyHelper.cs

کد کمک کننده :

حال برای دکمه ی glyphed خروجی با استفاده از ActionLink از این سینتکس استفاده میکنیم :

در داخل شاخص کنترلر مشاهده ی Pepalle@using TextAjax را بیافزایید. Helper ها ,هدایتگر بالای صفحه میباشند. بعد از آن جای @Html.ActionLink(“Create New” , “Create”) را با متن زیر تغییر دهید :

ویرایش , جزئیات ,  ساختن ActionLink با :

حال ما باید آیکون های خودمان را در جای مناسب قرار دهیم.

لیست ها

یک تصویر برای درک بهتر براتون قرار میدم.

Modal-BootStrap-in-From-MVc_2

RenderAction خروجی را از کار های مختلف بر مشاهده تزریق میکند.
تنها چیزی که باید به خاطر داشته باشیم این است که کنترلر فرزند نباید اجازه “فرار” از مشاهده داشته باشد. به همین این دلیل  ما تمام مشاهدات فرزندان را به عنوان بخشهای ویرایش شده در مکان با مدل ها اجرا میکنیم.
برای شروع کنترلر ویرایش مشاهده ی Pepale را ویرایش میکنیم. درست قبل از “برگشت به لیست” تکه ی زیر را وارد نمایید :

<div class="row">
    <div class="col-md-offset-2 col-md-10">
        @{ Html.RenderAction("Index", "Addresses", new { id = Model.Id }); }
    </div>
</div>

حال ما باید کنترلر آدرس را تعیین کنیم زیرا مشاهده ی استاندارد  در شاخص Action را بازمیگرداند. چیزی که ما به جای آن نیاز داریم مشاهده ی بخشی است. پس من تلاش میکنم که این قطعه کد را برای شاخص Action وارد کنم :

بعد از راه اندازی این خطا را دریافت کردم “HttpServerUtility.Exexute was blocked by waiting for the end of an asynchronous operation.”  بعد از کمی تحقیق و جستجو در اینترنت متوجه شدم که عملیات های ناهمگام در در اکشن فرزندان در ورژن MVC مجاز نمیباشد. پس به عنوان یه تعمیر سریع ,کنترلر آدرس و فولدر آدرس ها در بخش مشاهده را حذف کنید . سپس دوباره کنترلر آدرس ها را طبقه بندی کنید اما تیک بخش ” Use async controller action ” را اینبار بردارید. شاخص ویرایش شده حال باید به صورت زیر باشد :

سپس باید نام “Index.cshtml ” را به “_Index.cshtml” در مشاهده\آدرس ها تغییر دهید سپس از آن اجرا بگیرید. من دوراسیون شاخص اکشن را با خاصیت “فقط اکشن فرزندان” قرار دادم زیرا نمیخواهیم این متد مستقیما فراخوانی شود . پارامتر ID به ما اجازه میدهد تا آدرسی که برای شخص داده شده است را دریافت کنیم. ViewBag.PersonID برای خواندن ساخت آدرس در شاخص مفید خواهد بود.
برنامه اکنون اجرا میشود اما ما هنوز ویرایش در مکان آدرس ها را اجرا نکرده ایم. پس کلیک بر روی ساخت لینک ما را به مشاهده ی دیگری میبرد. شما میتوانید با حذف موقتی خاصیت “تنها اکشن فرزندان” و کلیک بر لینکش آن را امتحان کنید. برای جلوگیری از فرار از مشاهده ما از مودال های Bootstrap با کمی کمک از جاوا سکریپت استفاده میکنیم.

مودال های Bootstrap

من اسکریپت های زیر را به مودال هایbootstrap  تبدیل کردم.

تابع اسکریپت به سه چیز احتیاج دارد :

۱- در مشاهده این ترتیب از مکان نگه دارنده ها :

2- در مشاهده ای که میخواهیم این نوع علامت را در جایش قرار دهیم :

3- مشاهده ی حمایتی اکشن در مدل باید Json(new { success = true}); را به جای View(); بازگزداند.
یادداشت : لطفا به یاد داشته باشید که اسکریپت به خاصیت مدل داده در ساخت اکشن لینک احتیاج دارد.
یادداشت : خوب است که یک خاصیت از نوع دکمه به دکمه ی منفصل کردن داده – شما از مشکلات با مودال هایbootstrap  زمانی که کاربر دکمه ی کلید بازگشت را میفشارد برای دریافت دیالوگ . در بعضی از مودال های مرورگر ها بدون این خاصیت فقط بسته میشوند .

برای کامل کردن bootstrap مودال های ۳.۱.۱ در MVC 5 به نمونه دقت کنید.در پروژه ما من یک modalform.js به فولدر سکریپت و bundles.Add(new ScriptBundle(“~/bundles/modalform”).Include(“~/Scripts/modalform.js”)); اضافه کردم.خط به AppStart\BundleConfig.cs.حال با ویرایش ” “_Index.schtml به لایه زیر میرسیم :

@using TestAjax.Helpers
@model IEnumerable<TestAjax.Models.Address>
 
<!-- modal placeholder-->
<div id='myModal' class='modal fade in'>
    <div class="modal-dialog">
        <div class="modal-content">
            <div id='myModalContent'></div>
        </div>
    </div>
</div>
 
<div class="panel panel-default">
    <div class="panel-heading">
        <strong>Address List</strong>
    </div>
 
    <table class="table table-hover">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.City)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Street)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Phone)
            </th>
            <th>@Html.NoEncodeActionLink("<span class='glyphicon glyphicon-plus'></span>", "Add", "Create", "Addresses", routeValues: new { PersonId = ViewBag.PersonID }, htmlAttributes: new { data_modal = "", @class = "btn btn-primary pull-right" })</th>
        </tr>
 
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.City)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Street)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Phone)
                </td>
                <td>
                    <div class="pull-right">
                        @Html.NoEncodeActionLink("<span class='glyphicon glyphicon-pencil'></span>", "Edit", "Edit", "Addresses", routeValues: new { id = item.Id }, htmlAttributes: new { data_modal = "", @class = "btn btn-default" })
                        &nbsp;
                        @Html.NoEncodeActionLink("<span class='glyphicon glyphicon-trash'></span>", "Delete", "Delete", "Addresses", routeValues: new { id = item.Id }, htmlAttributes: new { data_modal = "", @class = "btn btn-danger" })
                      
                    </div>
                </td>
            </tr>
        }
    </table>
</div>

افزودن حمایت کننده برای مودال ها در “Edit.cshtml” Pepale در بخش متن ها:

برای کار کردن با مودال ها در کنترلر آدرس ها ما باید متد ” Create ” را تغییر دهیم.

و در نهایت آدرس ” _Creat.chtml ”  تغییر نام یافته باید به فرم زیر تبدیل شود :

حال ما میتوانیم خط آدرس جدید را بدون فرار از از قسمت ” مشاهده ی ویرایش شخص ” بیافزاییم.

Modal-BootStrap-in-From-MVc_1

از الگوی مشابه برای ساخت بخش های _Edit و _Delete استفاده میشود .
علاوه بر این میتوانیم یک بخش بنام _List بسازیم تا که در جزئیات مشاهده ی شخص نمایش داده شود.
برای سایر بخش ها لطفا به دانلود های الحاقی مراجعه کنید که شامل سورس کامل برای برای پروژه میباشد.
نکته : برای به روز رسانی بسته های Nuget در الحاقی ها برنامه را بازسازی کنید. شما باید هردو گزینه ی ” اجازه به Nuget برای دانلود بسته های گمشده ” و ” به صورت اتوماتیک به دنبال بسته های گمشده گشتن در طول ساخت در ویژوال استودیو ” را در تنظیمات NuGet تیک بزنید.

درباره نویسنده

سامان

فارغ التحصیل کارشناسی نرم افزار، علاقه مند به برنامه نویسی، طراحی وب، تکنولوژی های نوین، یادگیری و فیلم

مشاهده تمام مقالات