MVC3 उस्तरा अजाक्स फार्म

Question

जमा करें मैं MVC3 हेल्पर का उपयोग इस तरह मेरी अजाक्स प्रपत्र उत्पन्न करने के लिए:

@using (Ajax.BeginForm("Attended", "Lesson", new AjaxOptions 
       { 
        HttpMethod = "GET", 
        InsertionMode = InsertionMode.InsertAfter, 
        UpdateTargetId = "mdl" + item.ID 
       })) 
      { 
       @Html.HiddenFor(modelItem => item.ID); 
       @Html.CheckBox("Attended", item.Attended, new { OnChange = "javascript:this.form.submit()"}); 
      } 

मैं सिर्फ चेकबॉक्स का परिवर्तन ईवेंट पर फार्म जमा करने के लिए उचित तरीके से नहीं मिलता। मैं नहीं चाहता कि मेरे उपयोगकर्ता सबमिट बटन पर क्लिक करें।

HTMLAttribute काम करता है, लेकिन परिवर्तन पर एक AJAX अनुरोध के बजाय एक पोस्टबैक होता है।

क्या किसी को उत्तर पता है?

Answer 1

सबसे पहले, अपने फॉर्म के अंदर एक सबमिट बटन बनाएं, और विशेषता style="display:none;" सेट करके इसे छुपाएं। फिर, बजाय अपने onchange घटना में this.form.submit() का उपयोग कर के, का उपयोग करें:

$(this).parents('form:first').find(':submit')[0].click(); 

यह jquery.unobtrusive-ajax.js स्क्रिप्ट लागू करेगा, और अपने अजाक्स प्रस्तुत करने को पूरा करें।

Answer 2

फॉर्म अनुरोध भेजने का शास्त्रीय तरीका है - इसलिए यह पोस्ट है - आपके जीईटी सेटअप को उस पर ओवरराल्ड किया गया है - सबमिशन हमेशा सामग्री को साफ़ कर देगा और सर्वर सामग्री के साथ प्रतिस्थापित होगा - मैं AJAX का उपयोग करके भेजने के लिए कुछ जावास्क्रिप्ट करता हूं - इसे नहीं देख सकता, इसलिए मुझे लगता है कि यह ठीक है। आपके ऑनचेंज को इसके बजाय इस AJAX फ़ंक्शन को निष्पादित करना चाहिए ...

Answer 3

सबमिट करने के लिए jQuery का उपयोग करने के बारे में क्या? जैसा इस जवाब How to post ASP.NET MVC Ajax form using JavaScript rather than submit button

.change (का उपयोग करते हुए) .click() घटना के बजाय घटना में jQuery हिस्सा कुछ इस तरह दिखेगा:

$(function() { 
    $('form#ajaxForm').find('input.submit').change(function() { 
     $('form#ajaxForm').trigger('submit'); 
    }); 
} 
@using (Ajax.BeginForm("Attended", "Lesson", new { id = Model.Id }, new AjaxOptions 
     { 
      HttpMethod = "GET", 
      InsertionMode = InsertionMode.InsertAfter, 
      UpdateTargetId = "mdl" + item.ID 
     }, new { id = "ajaxForm" })) 
{ 
    @Html.HiddenFor(modelItem => item.ID); 
    @Html.CheckBox("Attended", item.Attended, new { @class = "submit"}); 
} 

यह पूरी तरह अपरीक्षित कोड तो लिखने की त्रुटियों से सावधान है:)

Answer 4

इस मदद मिल सकती है

@Html.CheckBox("Attended", item.Attended, new { OnChange = "submitForm"}); 

function submitForm(e) 
{ 
    document.forms[0].submit(); 
} 

Answer 5

हम्म, क्या वास्तव में भी सेल फोन है, जो एक समस्या क्षेत्र था पर, मेरे लिए काम किया, था के बाद, एक आंशिक दृश्य के लिए मेरे cshtml फ़ाइल में। इसमें बटन को ग्रे करने के लिए कोड भी शामिल है और दृश्य पोस्ट वापस होने तक "सेविंग ..." लिखें, जो धीमे SQL सर्वर के लिए अधीर होने पर सबमिट बटन पर लोगों को बाध्य करता है।

<div id="myFutureDayEdit"> 
    <script type="text/javascript"> 

     $(document).ready(function() { 
      $("#submitFutureDayEditVisibleButton").click(function() { 
       $(this).prop('disabled', true); 
       $("#myUserMessage").html("Saving..."); 
       $("#myUserMessage").show(); 
       document.getElementById("submitFutureDayEditHiddenButton").click(); 
      }); 
     }); 

    </script> 
    @Html.ValidationSummary(true) 
    @using (Ajax.BeginForm("SaveFutureDayEdit", "Member", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "myFutureDayEdit" })) 
{ ... bla bla bla 

और

<input id="submitFutureDayEditVisibleButton" type="button" value="Save Changes" /> 
    <input id="submitFutureDayEditHiddenButton" style="display:none;" type="submit" value="SC" /> 

     <div id="myUserMessage">  
      @if (Model.UserMessage != null) 
      { @Model.UserMessage } 
     </div> 

    <input type="hidden" id="bUnsavedChanges" name="bUnsavedChanges" value="false" /> 
} 
</div> 

<div id="hahuloading"> 
    <div id="hahuloadingcontent"> 
     <p id="hahuloadingspinner"> 
      Saving... 
     </p> 
    </div> 
</div>