بسيطة ASP.NET MVC Crud المشاهدات فتح / إغلاق في مربع الحوار javascript واجهة المستخدم

Question

لدي العديد من آراء ASP.NET MVC بسيطة لعمليات CRUD التي تعمل بشكل جيد بمفردها كصفحة صفحة ويب بسيطة. سأكون الآن دمجها في موقع الويب نفسه (في المحتوى) ولديه روابط مثيل مثل "إنشاء وظيفة جديدة" التي ستطلق الرأي في استنساخ Lightbox المختار (لا أعرف بعد أي واحد، ربما Colorbox أو سميكة هذا لا يهم).

ما أريد تحقيقه هو أن العرض نفسه يكتشف بطريقة ما أنه تم فتحه في مربع حوار ui JavaScript بحيث يتم تقديم إجراء النموذج (الأكثر شيوعا باستخدام زر إرسال بسيط) مع منطق يغلق مربع حوار UI بعد أداء العمل.

طريقة عرض وجهات النظر الآن هي المشاركة / إعادة التوجيه / الحصول عليها. يجب أن تظل الرأي تدعم هذا النمط البسيط عند فتحه مباشرة من خلال URL في متصفح الويب، ولكن يجب تقديم بعض المنطق الإضافي عند فتحه عبر مربع حوار JavaScript.

نأمل أن تفهم سؤالي. أي مساعدة في تقديرها

Answer 1

لحظتك المحظورة، لقد فعلت هذا!

لذا فإن أول شيء تحتاجه هو عرض جديد جديد للتعامل مع تقديم صفحة دون كل الاشياء العادية / تذييل الصفحة التي ستحصل على طريقة Windows Modal. أبسط طريقة للقيام بذلك هي استخدام صفحة رئيسية فارغة في معظمها لنظام Windows MODAL. تريد منطق التبديل الصفحي الرئيسية في الطريق وفي عرض مخصص لأنه يجب أن يكون لكل طريقة وحدة تحكم أخرى إذا كان () آخر () في جميع أنحاء المكان الكشف عن ISAJAXREQUEST (). أحب الجفاف، الصحراء الجافة.

مع هذه التقنية لدي أيضا ميزة المهينة بأمان للغاية. وظائف موقعي دون جافا سكريبت تماما. الروابط جيدة، أشكال العمل، تغيير رمز الصفر للذهاب من "موقع تعريف مشروط" لتقديم نموذج HTML القديم العادي.

كل ما فعلته هو الفئة الفرعية المحرك الافتراضي وإضافة بعض بتات اختيار ميدانيا:

مشاهدة المحرك:

public class ModalViewEngine : VirtualPathProviderViewEngine 
{
    public ModalViewEngine()
    {                
     /* {0} = view name or master page name 
      * {1} = controller name      */  

     MasterLocationFormats = new[] {  
         "~/Views/Shared/{0}.master"  
     };  

     ViewLocationFormats = new[] {  
         "~/Views/{1}/{0}.aspx",  
         "~/Views/Shared/{0}.aspx"
     };  

     PartialViewLocationFormats = new[] {  
         "~/Views/{1}/{0}.ascx",               
        }; 
    }

    protected override IView CreatePartialView(ControllerContext controllerContext, string partialPath)
    {
        throw new NotImplementedException();
    }

    protected override IView CreateView(ControllerContext controllerContext, string viewPath, string masterPath)
    {

        return new WebFormView(viewPath, masterPath );
    }

    public override ViewEngineResult FindView(ControllerContext controllerContext, string viewName, string masterName, bool useCache)
    {
        //you might have to customize this bit
        if (controllerContext.HttpContext.Request.IsAjaxRequest())
            return base.FindView(controllerContext, viewName, "Modal", useCache);

        return base.FindView(controllerContext, viewName, "Site", useCache);
    }

    protected override bool FileExists(ControllerContext controllerContext, string virtualPath)
    {
        return base.FileExists(controllerContext, virtualPath);
    }        
}

لذلك صفحة MODAL.Master هي بسيطة للغاية. كل ما لدي هو مجمع Div حتى أعرف متى يتم تقديم شيء داخل النافذة المشرف. سيكون هذا مفيدا عندما تحتاج إلى تحديد عناصر معينة مع JQuery فقط عندما تكون العناصر في "وضع مشروط".

modal.master.

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<div id="modalcontent"><asp:ContentPlaceHolder ID="MainContent" runat="server" /></div>

الخطوة التالية هي إنشاء النموذج الخاص بك. يمكنني استخدام اسم العقار الافتراضي = اسم الإدخال حتى أتمكن من نموذج ربط بسهولة والحفاظ على الأمور بسيطة. لا شيء خاص عن النموذج. أنا تبدو تماما كما كنت تفعل ذلك بشكل طبيعي. (لاحظ أنا أستخدم MVC 2 و Editorfor () في التعليمات البرمجية، لكن هذا لا يهم) هنا هو My Final HTML:

إخراج HTML

<div id="modalcontent">
    <h2>EditFood</h2>
    <div id="form">
        <form method="post" action="/edit/food?Length=8">
            <input id="CommonName" class="text-box single-line" type="text" value="" name="CommonName"/>
            <input class="button" type="submit" value="Edit Food"/>
        </form>
    </div>
</div>

إلى جانب نموذج ملزم حقا بشكل جيد يمكنك أيضا استخدام jQuery.form البرنامج المساعد أن تكون لديها قدرات AJAX غير السهلة والسهلة الطبقات في طلبك مع الحد الأدنى من التعليمات البرمجية. الآن لقد اخترت علبة الالوان نظرا لأن نافذة النافذة المشرف الخاصة بي بحتة لأنني أردت زوايا شفافة في Facebookes، وأضاف المؤلف.

الآن مع هذه البرامج النصية مجتمعة، يمكنك الحصول على مجموعة لطيفة حقا تجعل هذه التقنية غبية حقا سهلة القيام به في JavaScript. كان جافا سكريبت الوحيد الذي اضطررت لإضافته (داخل المستند "Ready):

جافا سكريبت / جيس

    $("a.edit").colorbox({ maxWidth: "800px", opacity: 0.4, initialWidth: 50, initialHeight: 50 });

    $().bind('cbox_complete', function () {
        $("#form form").ajaxForm(function () { $.fn.colorbox.close() });
    });

أنا هنا أخبر Colorbox لفتح نافذة مشروطة لروابط التحرير الخاصة بي (تحرير الطعام). ثم قم بربط الحدث الكامل لل Colorbox الأسلاك لأشياء Ajaxform الخاصة بك مع رد اتصال نجاح لإخبار Colorbox بإغلاق نافذة المشرف. هذا هو.

تم إجراء كل هذا الرمز كدليل على المفهوم وهذا هو السبب في أن محرك الرؤية لايت حقا ولا يوجد أي صحة أو غيرها من النموذج القياسي بلينغ. Colorbox و JQuery.form لها الكثير من دعم القابلية للتمويل، لذا فإن تخصيص هذا يجب أن يكون سهلا.

ملاحظة تم تنفيذ كل ذلك في MVC 2 ولكن هنا هو رمز تحكم الخاص بي على أي حال فقط لإظهار مدى سهولة القيام بذلك. تذكر أن دليلي على هدف المفهوم هو الحصول على نوافذ مشروطة تعمل بحيث لم يكن لدي أي تغييرات على أي رمز غير إعداد بعض البنية التحتية الأساسية.

    [UrlRoute(Path="edit/food")]
    public ActionResult EditFood()
    {            
        return View(new Food());
    }

    [HttpPost][UrlRoute(Path = "edit/food")]
    public ActionResult EditFood(Food food)
    {          
        return View(food);
    }

Answer 2

عند بناء عنوان URL الخاص ب url ل jQuery للقيام AJAX، يمكنك إضافة معلمة سلسلة الاستعلام مثل and javascriptwindow = معرف، عند اكتشاف ذلك في وحدة التحكم، يمكنك إضافة المنطق الضروري إلى النموذج لإغلاق مربع الحوار بعد التنفيذ بعد التنفيذ بعد التنفيذ.