javascript - ASP.NET MVC अजाक्स फॉर्म को सबमिट बटन के बजाय जावास्क्रिप्ट का उपयोग कैसे करें




asp.net-mvc asp.net-ajax (6)

Ajax.BeginForm एक असफल प्रतीत होता है।

एक नियमित रूप से Html.Begin का उपयोग करना, यह अच्छी तरह से चाल करता है:

$('#detailsform').submit(function(e) {
    e.preventDefault();
    $.post($(this).attr("action"), $(this).serialize(), function(r) {
        $("#edit").html(r);
    });
}); 

मेरे पास Ajax.BeginForm का उपयोग करके बनाया गया एक सरल फॉर्म है:

<% using (Ajax.BeginForm("Update", "Description", new { id = Model.Id },
     new AjaxOptions
     {
       UpdateTargetId = "DescriptionDiv",
       HttpMethod = "post"
     },new {id ='AjaxForm' })) {%>
Description:
<%= Html.TextBox("Description", Model.Description) %><br />
<input type="submit" value="save" />
<% }%>

कंट्रोलर वायर्ड हो जाता है और विवरणी को अपडेट करने वाला एक आंशिक दृश्य देता है। और यह सब बड़े करीने से काम करता है।

अब मैं इस फॉर्म को सबमिट बटन (लिंक पर क्लिक के माध्यम से या किसी इमेज पर या जो भी हो) के बिना सबमिट करने में सक्षम होना चाहूंगा। दुर्भाग्य से यह छोटा jQuery का स्निपेट काम नहीं करता है:

$('form#AjaxForm').submit();

यह फॉर्म जमा करता है, लेकिन करता है (मुझे आश्चर्य नहीं है) एक नियमित रूप से पोस्ट-बैक और एक अजाक्स नहीं है।

सादगी के लिए उपरोक्त jQuery को इस तरह से तार-तार किया गया है:

<a href="#" onclick="$('form#AjaxForm').submit(); return false;">submit</a>

प्रपत्र का ऑनसुबमिट Sys.Mvc.AsyncForm.handleSubmit () का उपयोग कर रहा है, लेकिन jQuery सबमिट इसे दरकिनार करता है।

पुनश्च। मैं इस विशेष दृष्टिकोण में एक समाधान की तलाश कर रहा हूं। मुझे पता है कि सामान्य फॉर्म का उपयोग करके और AJAX + jQuery का उपयोग करके इसे कैसे प्राप्त किया जाए। मैं इस विशेष समाधान में दिलचस्पी रखता हूं।


एक सरल उदाहरण, जहां एक ड्रॉपडाउन सूची में परिवर्तन एक अजाक्स फॉर्म-सबमिट को डेटाग्रिड को पुनः लोड करने के लिए ट्रिगर करता है:

<div id="pnlSearch">

    <% using (Ajax.BeginForm("UserSearch", "Home", new AjaxOptions { UpdateTargetId = "pnlSearchResults" }, new { id="UserSearchForm" }))
    { %>

        UserType: <%: Html.DropDownList("FilterUserType", Model.UserTypes, "--", new { onchange = "$('#UserSearchForm').trigger('submit');" })%>

    <% } %>

</div>

ट्रिगर ('ओनसुबमिट') प्रमुख बात है: यह ऑनसुमिट फंक्शन को बुलाता है जिसे MVC ने फॉर्म में ग्राफ्ट किया है।

एनबी। UserSearchResults नियंत्रक एक PartialView देता है जो आपूर्ति किए गए मॉडल का उपयोग करके एक तालिका प्रदान करता है

<div id="pnlSearchResults">
    <% Html.RenderPartial("UserSearchResults", Model); %>
</div>

दुर्भाग्य से ओनसुबमिट को ट्रिगर करने या ईवेंट को सभी ब्राउज़रों में काम करने के लिए प्रस्तुत नहीं करना चाहिए।

  • IE और क्रोम में काम करता है: # ('फॉर्म # ajaxForm') ट्रिगर ('ऑनसुबमिट');
  • फ़ायरफ़ॉक्स और सफारी में काम करता है: # ('फॉर्म # ajaxForm') ट्रिगर ('सबमिट');

इसके अलावा, यदि आप क्रोम या IE में ट्रिगर ('सबमिट') करते हैं, तो यह पूरे पृष्ठ को AJAX व्यवहार करने के बजाय पोस्ट करने का कारण बनता है।

सभी ब्राउज़रों के लिए जो काम करता है वह ऑन फॉर्म में ऑनसबमिट ईवेंट व्यवहार और केवल कॉलिंग सबमिट () को हटा रहा है

<script type="text/javascript">
$(function() {

    $('form#ajaxForm').submit(function(event) { 
        eval($(this).attr('onsubmit')); return false; 
        });

    $('form#ajaxForm').find('a.submit-link').click( function() { 
        $'form#ajaxForm').submit();
        });

  }
</script>
  <% using (Ajax.BeginForm("Update", "Description", new { id = Model.Id },
     new AjaxOptions
     {
       UpdateTargetId = "DescriptionDiv",
       HttpMethod = "post"
     }, new { id = "ajaxForm" } )) {%>
   Description:
   <%= Html.TextBox("Description", Model.Description) %><br />
   <a href="#" class="submit-link">Save</a> 
<% } %>

इसके अलावा, लिंक को कार्य करने के लिए फॉर्म के भीतर समाहित नहीं किया जाना चाहिए।


निम्नलिखित तरीके से कोशिश करें:

<input type="submit" value="Search" class="search-btn" />
<a href="javascript:;" onclick="$('.search-btn').click();">Go</a>

मैं ajax फार्म अच्छी तरह से काम जमा करने के लिए कुछ समय की कोशिश की है, लेकिन हमेशा पूरी तरह से विफलता या बहुत अधिक समझौता के साथ मुलाकात की। यहाँ एक पृष्ठ का एक उदाहरण है जो एक इनपुट बॉक्स में उपयोगकर्ता प्रकारों के रूप में परियोजनाओं की सूची (आंशिक रूप से प्रदान किए गए नियंत्रण का उपयोग करके) को अपडेट करने के लिए MVC पृष्ठ के अंदर jQuery फॉर्म प्लग-इन का उपयोग करता है:

<div class="searchBar">
    <form action="<%= Url.Action ("SearchByName") %>" method="get" class="searchSubmitForm">
        <label for="projectName">Search:</label>
        <%= Html.TextBox ("projectName") %>
        <input class="submit" type="submit" value="Search" />
    </form>
</div>
<div id="projectList">
    <% Html.RenderPartial ("ProjectList", Model); %>
</div>

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery("#projectName").keyup(function() {
            jQuery(".searchSubmitForm").submit();
        });

        jQuery(".searchSubmitForm").submit(function() {
            var options = {
                target : '#projectList'
            }

            jQuery(this).ajaxSubmit(options);

            return false;
        });

        // We remove the submit button here - good Javascript depreciation technique
        jQuery(".submit").remove();
    });
</script>

और नियंत्रक पक्ष पर:

public ActionResult SearchByName (string projectName)
{
    var service = Factory.GetService<IProjectService> ();
    var result = service.GetProjects (projectName);

    if (Request.IsAjaxRequest ())
        return PartialView ("ProjectList", result);
    else
    {
        TempData["Result"] = result;
        TempData["SearchCriteria"] = projectName;

        return RedirectToAction ("Index");
    }
}

public ActionResult Index ()
{
    IQueryable<Project> projects;
    if (TempData["Result"] != null)
        projects = (IQueryable<Project>)TempData["Result"];
    else
    {
        var service = Factory.GetService<IProjectService> ();
        projects = service.GetProjects ();
    }

    ViewData["projectName"] = TempData["SearchCriteria"];

    return View (projects);
}

मैं मान रहा हूं कि चयनकर्ता के आसपास आपके उद्धरण की कमी सिर्फ एक ट्रांसक्रिप्शन त्रुटि है, लेकिन आपको इसे वैसे भी जांचना चाहिए। इसके अलावा, मैं यह नहीं देखता कि आप वास्तव में आईडी कहां दे रहे हैं। आमतौर पर आप htmlAttributes पैरामीटर के साथ ऐसा करते हैं। मैं आपको उस हस्ताक्षर का उपयोग करके नहीं देखता, जो उसके पास है। फिर, हालांकि, अगर फॉर्म सभी में जमा हो रहा है, तो यह एक ट्रांसक्रिप्शन त्रुटि हो सकती है।

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

अंत में, आपको यह महसूस करना चाहिए कि सबमिट बटन को बदलकर, आप उन लोगों के लिए इसे पूरी तरह से तोड़ने जा रहे हैं जिनके पास जावास्क्रिप्ट सक्षम नहीं है। जिस तरह से इसके आस-पास भी एक बटन है जो एक नाओस्क्रिप्ट टैग का उपयोग करके छिपा हुआ है और सर्वर पर AJAX और गैर-AJAX दोनों पोस्ट को संभालता है।

BTW, यह मानक अभ्यास पर विचार करता है, माइक्रोसॉफ्ट समझ नहीं है, जावास्क्रिप्ट के माध्यम से हैंडलर जोड़ने के लिए मार्कअप के माध्यम से नहीं। यह आपकी जावास्क्रिप्ट को एक स्थान पर व्यवस्थित रखता है ताकि आप आसानी से देख सकें कि क्या चल रहा है। यहां एक उदाहरण है कि मैं ट्रिगर तंत्र का उपयोग कैसे करूंगा।

  $(function() {
      $('form#ajaxForm').find('a.submit-link').click( function() {
           $('form#ajaxForm').trigger('submit');
      }).show();
  }

<% using (Ajax.BeginForm("Update", "Description", new { id = Model.Id },
     new AjaxOptions
     {
       UpdateTargetId = "DescriptionDiv",
       HttpMethod = "post"
     }, new { id = "ajaxForm" } )) {%>
   Description:
   <%= Html.TextBox("Description", Model.Description) %><br />
   <a href="#" class="submit-link" style="display: none;">Save</a>
   <noscript>
       <input type="submit" value="Save" />
   </noscript>
<% } %>




jquery