एमवीसी jQuery जावास्क्रिप्ट फ़ंक्शन

Question

से फॉर्म सबमिट करें (पेज रीफ्रेश के बिना) मैं इन सबके लिए बिल्कुल नया हूं। मैं एएसपी.नेट एमवीसी सी # LINQ to SQL का उपयोग कर रहा हूं।

मेरे पास एक संपादन पृष्ठ है जो लेखकों और उनकी सभी पुस्तकों को लोड करता है। पुस्तकें Ajax कॉल के माध्यम से लोड की गई हैं।

<script type="text/javascript"> 
     $(document).ready(function() { 
      LoadBooks(); 
     }); 

     function LoadBooks() { 
      $(".Books").hide(); 
      $(".Books").load("/Books/Edit/<%= Model.AuthorID %>"); 
      $(".Books").show('slow'); 
     } 
    </script> 

यह हिस्सा ठीक काम कर रहा है। लेखक की जानकारी, फिर पुस्तकों भार के साथ पृष्ठ लोड (एक div id = "किताबें" में एक आंशिक दृश्य, बस के साथ बुक श्रेणी और पुस्तक शीर्षक):

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Solution.Controllers.BooksController+BooksViewModel>" %> 
    <% using (Html.BeginForm(null,null, FormMethod.Post,new { id = "bookform" })) 
     {%> 
      <fieldset> 
       <legend>Books</legend> 
       <%int i = 0; 
        foreach (var book in Model.Books) 
        {%> 
         <%= book.BookID%> 
         <%= Html.Hidden("book[" + i + "].BookID", book.BookID) %> 

         <%= Html.DropDownList("book[" + i + "].CatID", new SelectList(Model.Categories, "CatID", "CatTitle", book.CatID))%> 
         <%= Html.ValidationMessage("CatID", "*")%> 

         <%= Html.TextBox("book[" + i + "].BookTitle", book.BookTitle)%> 
         <%= Html.ValidationMessage("BookTitle", "*")%> 
         <br /> 
         <%i++; 
        } %> 
      </fieldset> 
    <% } %> 

अब, मुख्य दृश्य पेज मैं पर एक लिंक चाहते हैं। जब लिंक क्लिक किया जाता है तो मैं जावास्क्रिप्ट/jQuery/अजाक्स/जो कुछ भी के माध्यम से कुछ चीजें करना चाहता हूं। पहली चीज जो मैं करना चाहता हूं वह आंशिक दृश्य से पुस्तक फ़ॉर्म (आईडी = बुकफॉर्म) सबमिट करना है, फिर अगले jQuery फ़ंक्शन पर जारी रखें। इसलिए, मैं एक लिंक पर क्लिक करता हूं जो जावास्क्रिप्ट फ़ंक्शन को कॉल करता है। इस फ़ंक्शन को पुस्तक फ़ॉर्म जमा करने/निष्पादित करना चाहिए।

मुझे लगता है कि मैंने सब कुछ करने की कोशिश की है, लेकिन मुझे पूरा पुस्तक सबमिट/रीफ्रेश करने के बिना मेरे पुस्तक फ़ॉर्म को सबमिट और संसाधित नहीं किया जा सकता है। (ध्यान दें, जब पूर्ण सबमिट होता है, तो नियंत्रक में जो क्रियाएं मैं अपेक्षा करता हूं वह सफलतापूर्वक प्रक्रिया करता है)। मैं नियंत्रक प्रक्रिया/कार्रवाई किसी प्रकार की सफलता/विफलता संकेत के अलावा कुछ भी वापस नहीं करना चाहता हूं।/रीफ्रेश होता है फिर पृष्ठ पर DIV ताज़ा करने के लिए

कोई भी विचार

Answer 1

यह कैसे मुझे लगता है कि jQuery के साथ क्या है फ़ॉर्म के अंदर नहीं, आपको इसे खोजने के लिए सिर्फ jquery चयनकर्ताओं का उपयोग करना होगा। आप फ़ॉर्म के आईडी निर्धारित कर सकते हैं और फिर पाते हैं इस तरह के रूप में:

var $form = $("#theformid"); 

Answer 2

अपने "onclick" JavaScript फ़ंक्शन पर अमल करता है और समस्या यह है कि पूरे पृष्ठ प्रस्तुत है, (मैं तो कॉल कर सकते हैं "LoadBooks()"।? रूप में अच्छी तरह? इस मामले में समस्या यह है कि आप return false के साथ अपने जावास्क्रिप्ट समारोह समाप्त नहीं है।

या समस्या यह है कि अपने "onclick" JavaScript फ़ंक्शन सभी को नहीं बुलाया जाता है? तो यह मुश्किल है कोड को देखे बिना कहने के लिए ... यदि आप JQuery चयनकर्ता का उपयोग करते हैं - तो शायद चयनकर्ता द्वारा लिंक नहीं चुना जाता है

function DoAjaxPostAndMore(btnClicked) 
{ 
     var $form = $(btnClicked).parents('form'); 

     $.ajax({ 
      type: "POST", 
      url: $form.attr('action'), 
      data: $form.serialize(), 
      error: function(xhr, status, error) { 
        //do something about the error 
      }, 
      success: function(response) { 
       //do something with response 
       LoadBooks(); 

      } 
     }); 

    return false;// if it's a link to prevent post 

} 

मैं मान लिया है कि btnClicked फार्म के अंदर है:

<input type="button" value="Submit" onclick="DoAjaxPostAndMore(this)"/> 

लिंक यदि:

<a href="/url/something" onclick="return DoAjaxPostAndMore(this)">linktext</a> 

तो कड़ी है

Answer 3

है कि Ajax.BeginForm है कि आप उपयोग करने की आवश्यकता है, न कि Html.BeginForm।

Answer 4

<a href = "javascript: SaveProperties();">Save properties</a> 
SaveProperties() { $('#bevpropform').submit(); } 

जैसा कि मैंने पहले कहा, होना चाहिए

SaveProperties() { $('#bevpropform').submit(); return false; } 

Answer 5

क्योंकि मैं खेल के लिए बहुत देर हो रही है यह एक "यह किसी की मदद कर सकते हैं अगर" जवाब है, लेकिन आप भी उपयोग कर सकते हैं:

@using (Ajax.BeginForm("Method", "Controller", new AjaxOptions { HttpMethod = "POST" })) 
{ 
} 

जब तारीख पोस्ट की जाएगी, पृष्ठ को रीफ्रेश नहीं किया जाएगा।

कृपया ध्यान दें

आप MUST आदेश में इस काम करने के लिए jquery.unobtrusive-ajax.js जोड़ें। सावधान रहें, एएसपी.नेट एमवीसी 5 टेम्पलेट प्रोजेक्ट में, यह स्क्रिप्ट डिफ़ॉल्ट रूप से शामिल नहीं है, आपको इसे मैन्युअल रूप से जोड़ना होगा या इसे Nuget पैकेट प्रबंधक के माध्यम से जोड़ना होगा।
यह jquery.validate.unobtrusive.js से संबंधित नहीं है, जो डिफ़ॉल्ट रूप से शामिल है।