ASP.NET MVC 3 रेजर के साथ Ajax.BeginForm का उपयोग करना

Question

वहाँ Ajax.BeginFormAsp.net MVC 3 जहां विनीत सत्यापन और अजाक्स मौजूद है के भीतर उपयोग करने का एक ट्यूटोरियल या कोड उदाहरण है?

यह MVC 3 के लिए एक मायावी विषय है, और मैं ठीक से काम करने के लिए अपना रूप प्राप्त नहीं कर सकता। यह एक अजाक्स प्रस्तुत करेगा लेकिन सत्यापन त्रुटियों की अनदेखी करता है।

Answer 1

उदाहरण:

नमूना:

public class MyViewModel
{
    [Required]
    public string Foo { get; set; }
}

नियंत्रक:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View(new MyViewModel());
    }

    [HttpPost]
    public ActionResult Index(MyViewModel model)
    {
        return Content("Thanks", "text/html");
    }
}

राय:

@model AppName.Models.MyViewModel

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>

<div id="result"></div>

@using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "result" }))
{
    @Html.EditorFor(x => x.Foo)
    @Html.ValidationMessageFor(x => x.Foo)
    <input type="submit" value="OK" />
}

---

और यहाँ एक बेहतर (मेरे परिप्रेक्ष्य में) उदाहरण है:

राय:

@model AppName.Models.MyViewModel

<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/index.js")" type="text/javascript"></script>

<div id="result"></div>

@using (Html.BeginForm())
{
    @Html.EditorFor(x => x.Foo)
    @Html.ValidationMessageFor(x => x.Foo)
    <input type="submit" value="OK" />
}

index.js:

$(function () {
    $('form').submit(function () {
        if ($(this).valid()) {
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (result) {
                    $('#result').html(result);
                }
            });
        }
        return false;
    });
});

जिसे jQuery फॉर्म प्लगइन के साथ और बढ़ाया जा सकता है ।

Comments

मैं अजाक्स के लिए जेकरी का उपयोग करने के बारे में सहमत हूं। मुझे लगता है कि Asp.net MVC Ajax अनुप्रयोगों का अधिकांश हिस्सा बिल्ट-इन Ajax एक्सटेंशन की तुलना में jQuery का उपयोग करता है।

— रॉबर्ट कोरीटनिक

मैं निम्नलिखित की तरह कुछ का उपयोग कर रहा हूं और परिणाम अपने स्वयं के पृष्ठ पर जा रहा है और न केवल एक div परिणाम की जगह ले रहा है। तुम जानते हो क्यों?

— डेविड

हां, मैं ajax के लिए शुद्ध jQuery का उपयोग करने में भी सहमत हूं, MVC ajax एक्सटेंशन का उपयोग करने का मतलब है कि आपको अनावश्यक रूप से अन्य नियमों और सिंटैक्स को जानने की आवश्यकता है, अंत में jQuery का उपयोग करें। इसलिए यहां तक ​​कि मुझे और अधिक लिखने की आवश्यकता है, लेकिन क्या यह सही तरीका है, इसके अलावा आपको अधिक नियंत्रण और लचीलापन मिलता है।

— नेस्टर

@ डारिन-डिमित्रोव: जब मैं आपके बाद के उदाहरण की कोशिश करता हूं, तो मुझे डेटा जोड़ना होगा: $ ('फ़ॉर्म')। सीरीज़ (), अजाक्स () कॉल पर। अन्यथा, कोई भी प्रपत्र डेटा पास नहीं किया गया है और मेरा मॉडल सर्वर साइड पर अमान्य है। आश्चर्य है कि अगर कुछ ऐसा है जिसे मैंने अनदेखा कर दिया है?

— ब्रेट

@DarinDimitrov क्या है अगर BLL के साथ कोई त्रुटि है और आपको मॉडल को वापस देखने और त्रुटि संदेश दिखाने की आवश्यकता है क्योंकि कठोर परत ने डेटा पर गहन सत्यापन प्रदान किया और एक समस्या पाई। क्लाइंट साइड सत्यापन पर निर्भर होना ही पर्याप्त नहीं है। आप दृश्य (मॉडल) वापस नहीं कर सकते; अब क्योंकि पूरा दृश्य परिणाम div में प्रदान किया जाता है ... उसके लिए वर्कअराउंड क्या है?

— सीडी स्मिथ

Answer 2

मुझे लगता है कि सभी उत्तर एक महत्वपूर्ण बिंदु से चूक गए:

यदि आप अजाक्स फॉर्म का उपयोग करते हैं ताकि उसे स्वयं को अपडेट करने की आवश्यकता हो (और फॉर्म के बाहर एक और div नहीं) तो आपको फॉर्म के युक्त div OUTSIDE को डालना होगा । उदाहरण के लिए:

 <div id="target">
 @using (Ajax.BeginForm("MyAction", "MyController",
            new AjaxOptions
            {
                HttpMethod = "POST",
                InsertionMode = InsertionMode.Replace,
                UpdateTargetId = "target"
            }))
 {
      <!-- whatever -->
 }
 </div>

अन्यथा आप @David की तरह समाप्त हो जाएंगे जहां परिणाम एक नए पृष्ठ में प्रदर्शित होता है।

Comments

डेविड का मुद्दा लगभग हमेशा jqueryval बंडल में शामिल नहीं होने के कारण होता है जिसमें विनीत अजाक्स कोड होता है। इस दृष्टिकोण के साथ बहुत सावधान रहें जिसे आपने पोस्ट किया है अन्यथा आपको एक पोस्ट मिल जाएगी और तब से आपका फॉर्म ठीक हो गया है क्योंकि आपने इसे बदल दिया है। फिर आपको अपने "MyAction" दृश्य की आवश्यकता होती है ताकि इसके रूप को प्रबंधित किया जा सके और इसमें सभी ajax विकल्पों को फिर से निर्दिष्ट किया जा सके।

— एडम ट्यूलिपर - MSFT

मेरे आवेदन में गुरु पेज के साथ पूरे फॉर्म को दिखाते हुए

— नितिन ...

मेरे लिए मैंने UnobtrusiveJavaScriptEnabledकहीं भी सच निर्धारित नहीं किया था

— कुणाल

Answer 3

मुझे अंततः डारिन के समाधान के लिए काम करना पड़ा, लेकिन पहले कुछ गलतियाँ हुईं, जिसके परिणामस्वरूप डेविड (डारिन के समाधान के नीचे की टिप्पणियों में) के समान एक समस्या हुई, जहां परिणाम एक नए पृष्ठ पर पोस्ट हो रहा था।

क्योंकि मुझे विधि वापस आने के बाद फॉर्म के साथ कुछ करना था, मैंने इसे बाद में उपयोग के लिए संग्रहीत किया:

var form = $(this);

हालाँकि, इस चर में "कार्रवाई" या "विधि" गुण नहीं थे जो कि अजाक्स कॉल में उपयोग किए जाते हैं।

$(document).on("submit", "form", function (event) {
    var form = $(this);

    if (form.valid()) {
        $.ajax({
            url: form.action, // Not available to 'form' variable
            type: form.method,  // Not available to 'form' variable
            data: form.serialize(),
            success: function (html) {
                // Do something with the returned html.
            }
        });
    }

    event.preventDefault();
});

इसके बजाय आपको "यह" चर का उपयोग करने की आवश्यकता है:

$.ajax({
    url: this.action, 
    type: this.method,
    data: $(this).serialize(),
    success: function (html) {
        // Do something with the returned html.
    }
});

Comments

ऐसा इसलिए है क्योंकि आपने जिस फॉर्म चर को चुना है, वह jQueryऑब्जेक्ट को चयनकर्ता के रूप में सेट करता है । form[0]गुण होंगे। अधिक आसानी से पहचानने के लिए किसी भी jQueryचर के साथ उपसर्ग करना भी अच्छा अभ्यास है $।

— जेम्स साउथ

Answer 4

डारिन दिमित्रोव के समाधान ने मेरे लिए एक अपवाद के साथ काम किया। जब मैंने (जानबूझकर) सत्यापन त्रुटियों के साथ आंशिक दृश्य प्रस्तुत किया, तो मैं डुप्लिकेट रूपों के साथ समाप्त हो गया जो संवाद में वापस आ रहा है:

इसे ठीक करने के लिए मुझे Html.BeginForm को एक div में लपेटना पड़ा:

<div id="myForm">
    @using (Html.BeginForm("CreateDialog", "SupportClass1", FormMethod.Post, new { @class = "form-horizontal" }))
    {
        //form contents
    }
</div>

जब फॉर्म जमा किया गया था, तो मैंने सफलता के समारोह में div को मंजूरी दे दी और मान्य फॉर्म को आउटपुट किया:

    $('form').submit(function () {
        if ($(this).valid()) {
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (result) {
                    $('#myForm').html('');
                    $('#result').html(result);
                }
            });
        }
        return false;
    });
});

Comments

मुझे भी वही त्रुटि मिलती है। मैं Partial Viewsइंडेक्स पेज के नीचे बना फंक्शन रेंडर करने के लिए उपयोग कर रहा हूं । मुझे आंशिक दृश्य में सभी सत्यापन संदेश मिल सकते हैं। लेकिन जब Createसफल होता है तो सूचकांक दो बार प्रदर्शित होता है। Html.BeginFormमेरे सूचकांक दृश्य में मेरा कोई स्थान नहीं है।

— विनी

UpdateTargetId = "myForm"इसके बजाय का उपयोग करने का प्रयास करें

— कुणाल

Answer 5

यदि कोई डेटा सत्यापन नहीं किया गया है, या सामग्री हमेशा एक नई विंडो में वापस आ जाती है, तो सुनिश्चित करें कि ये 3 लाइनें दृश्य के शीर्ष पर हैं:

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

Comments

मैं उन्हें समाधान में नहीं मिला। मुझे उन्हें Nuget पैकेज मैनेजर

— FindOut_Quran

Answer 6

उदाहरण

// मॉडल में

public class MyModel
{  
   [Required]
    public string Name{ get; set; }
}

// PartailView //PartailView.cshtml में

@model MyModel

<div>
    <div>
      @Html.LabelFor(model=>model.Name)
    </div>
    <div>
        @Html.EditorFor(model=>model.Name)
        @Html.ValidationMessageFor(model => model.Name)
    </div>
</div>

Index.cshtml दृश्य में

@model MyModel
<div id="targetId">
    @{Html.RenderPartial("PartialView",Model)}
</div>

@using(Ajax.BeginForm("AddName", new AjaxOptions { UpdateTargetId = "targetId", HttpMethod = "Post" }))
{
     <div>
        <input type="submit" value="Add Unit" />
    </div>
}

नियंत्रक में

public ActionResult Index()
{
  return View(new MyModel());
}


public string AddName(MyModel model)
{
   string HtmlString = RenderPartialViewToString("PartailView",model);
   return HtmlString;
}


protected string RenderPartialViewToString(string viewName, object model)
        {
            if (string.IsNullOrEmpty(viewName))
                viewName = ControllerContext.RouteData.GetRequiredString("action");

            ViewData.Model = model;

            using (StringWriter sw = new StringWriter())
            {
                ViewEngineResult viewResult = ViewEngines.Engines.FindPartialView(ControllerContext, viewName);
                ViewContext viewContext = new ViewContext(ControllerContext, viewResult.View, ViewData, TempData, sw);
                viewResult.View.Render(viewContext, sw);
                return sw.GetStringBuilder().ToString();
            }
        }

आपको ViewName और Model से RenderPartialViewToString विधि पास करनी होगी। यह आपको सत्यापन के साथ लौटाएगा जो आप मॉडल में लागू किए गए हैं और Index.cshtml में "targetId" div में सामग्री को जोड़ते हैं। मैं इस तरह से आंशिक दृश्य के RenderHtml को पकड़कर आप सत्यापन लागू कर सकते हैं।

Answer 7

अजाक्स फॉर्म जावास्क्रिप्ट का उपयोग करते हुए अतुल्यकालिक रूप से काम करते हैं। तो यह आवश्यक है, निष्पादन के लिए स्क्रिप्ट फ़ाइलों को लोड करने के लिए। भले ही यह एक छोटा प्रदर्शन समझौता है, लेकिन निष्पादन पोस्टबैक के बिना होता है।

हमें एचटीएमएल और अजाक्स दोनों रूपों के व्यवहार के बीच अंतर को समझने की जरूरत है।

अजाक्स:

1. प्रपत्र पुनर्निर्देशित नहीं करेंगे, यहां तक ​​कि आप एक पुनर्निर्देशन () भी करते हैं।

2. असिंक्रोनस रूप से सेव, अपडेट और कोई भी संशोधन कार्य करेगा।

एचटीएमएल:

1. फॉर्म को रीडायरेक्ट करेगा।

2. सिंक्रोनस और एसिंक्रोनसली (कुछ अतिरिक्त कोड और देखभाल के साथ) दोनों कार्रवाई करेंगे।

नीचे दिए गए लिंक में POC के साथ अंतर प्रदर्शित किया। संपर्क

Answer 8

Ajax.BeginForm जोड़ने से पहले। उल्लिखित क्रम में अपने प्रोजेक्ट में स्क्रिप्ट जोड़ें,

1. jQuery-1.7.1.min.js
2. jquery.unobtrusive-ajax.min.js

केवल ये दोनों अजाक्स ऑपरेशन करने के लिए पर्याप्त हैं।