आपकी किस्मत में, मैंने यह किया है!
तो पहली बात आप की जरूरत सभी सामान्य शीर्षलेख/पादलेख सामान है कि अपने मोडल खिड़कियों के रास्ते में मिल जाएगा बिना एक पृष्ठ को प्रदर्शित करने को संभालने के लिए एक नया ViewEngine है। ऐसा करने का सबसे आसान तरीका है अपने मोडल विंडोज़ के लिए अधिकतर खाली मास्टर पेज का उपयोग करना। आप मास्टर पेज को रास्ते से बाहर और एक कस्टम व्यूइंजिन में स्विच करना चाहते हैं क्योंकि अन्यथा प्रत्येक नियंत्रक विधि को IsAjaxRequest() का पता लगाने के स्थान पर() else() होना चाहिए। मुझे सूखा, सहारा सूखा पसंद है।
इस तकनीक के साथ मैं भी बहुत सुन्दरता अपमानजनक का लाभ दिया है। मेरी साइट जावास्क्रिप्ट के बिना पूरी तरह से काम करता है। लिंक ठीक हैं, फॉर्म काम करते हैं, शून्य कोड "मोडल जागरूक साइट" से सादे पुराने 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 पेज बहुत सरल है
सभी मैंने किया था डिफ़ॉल्ट इंजन उपवर्ग और कुछ masterpage चयन बिट्स जोड़ने था। मेरे पास एक div wrapper है इसलिए मुझे पता है कि मोडल विंडो के अंदर कुछ कब प्रदान किया जाता है। यह सहायक होगा जब आपको केवल कुछ तत्वों को jquery के साथ चुनने की आवश्यकता होती है जब तत्व "मोडल मोड" में होते हैं।
Modal.Master
<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<div id="modalcontent"><asp:ContentPlaceHolder ID="MainContent" runat="server" /></div>
अगला चरण है अपने प्रपत्र बनाने के लिए है। मैं डिफ़ॉल्ट संपत्ति नाम = इनपुट नाम का उपयोग करता हूं, इसलिए मैं आसानी से बाध्य मॉडल कर सकता हूं और चीजों को सरल रख सकता हूं। फॉर्म के बारे में कुछ खास नहीं है। ऐसा लगता है जैसे आप इसे सामान्य रूप से करेंगे।(ध्यान दें मैं अपने कोड में MVC 2 और EditorFor() का उपयोग कर रहा हूँ, लेकिन है कि कोई फर्क नहीं करना चाहिए) यहाँ मेरा अंतिम 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>
मॉडल वास्तव में अच्छी तरह से बाध्यकारी आप कर सकते हैं इसके अलावा कम से कम कोड के साथ अपने आवेदन में स्तरहीन और आसान AJAX क्षमताओं के लिए Jquery.Form plugin का भी उपयोग करें। अब मैंने ColorBox को मेरी मोडल विंडो स्क्रिप्ट के रूप में चुना है क्योंकि मैं फेसबुकसेक पारदर्शी कोनों चाहता था और मुझे एक्स्टेंसिबिलिटी पॉइंट पसंद है।
अब इन स्क्रिप्ट्स के साथ संयुक्त रूप से आपको वास्तव में एक अच्छा संयोजन मिलता है जो इस तकनीक को जावास्क्रिप्ट में वास्तव में बेवकूफ बनाना आसान बनाता है। केवल जावास्क्रिप्ट मैं जोड़ने के लिए किया था (document.ready अंदर) था:
जावास्क्रिप्ट/jQuery
$("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 सामान को तार करने के लिए रंगबॉक्स की पूरी घटना को बाध्यकारी करें। बस।
यह कोड सभी अवधारणा के सबूत के रूप में किया गया था और यही कारण है कि दृश्य इंजन वास्तव में हल्का है और कोई सत्यापन या अन्य मानक रूप ब्लिंग नहीं है। कलरबॉक्स और JQuery.Form में बहुत अधिक एक्स्टेंसिबिलिटी सपोर्ट है इसलिए इसे अनुकूलित करना आसान होना चाहिए।
नोट यह सब एमवीसी 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);
}
वाह, इस व्यापक उत्तर के लिए धन्यवाद। अच्छा लग रहा है। – mare
आप इस नए व्यूइंजिन को मौजूदा दृश्य में कैसे तार करते हैं? मुझे उस कोड के टुकड़े को खोजने में परेशानी हो रही है। – mare
मुझे समझ में नहीं आता है, व्यू इंजन वायरिंग करता है, आपको इसे तार करने के लिए कोई काम करना होगा। – jfar