AJAX

2015-09-26 6 views
10

का उपयोग करते समय एएसपी.नेट एमवीसी पेज अपडेट नहीं किया गया है मेरे पास एक एएसपी.नेट एमवीसी प्रोजेक्ट है जहां मैं डेटाबेस में एक लेख पोस्ट करना चाहता हूं, फिर पेज पर आलेख का एक स्निपेट प्रदर्शित करता हूं। जब कोई उपयोगकर्ता टिप्पणी करता है, तो मैं डेटाबेस में सहेजने के बाद भी टिप्पणी प्रदर्शित करना चाहता हूं। मैं इसके लिए AJAX का उपयोग कर रहा हूं और दोनों मामलों में OnFailure और OnSuccess विधियों को कॉल कर रहा हूं।AJAX

OnFailure विधि केवल तब होती है जब मैं कोई पोस्ट सहेजता हूं और कोई टिप्पणी नहीं करता (ऐसा इसलिए है क्योंकि पृष्ठ सफलतापूर्वक सहेजने पर भी अपडेट नहीं होता है)। OnSuccess विधि बिल्कुल भी लागू नहीं की गई है क्योंकि मेरा पृष्ठ अपडेट नहीं किया गया है।

मैं jQuery 2.1.4 उपयोग कर रहा हूँ और jquery.unobtrusive-ajax स्क्रिप्ट अपने प्रोजेक्ट

यहाँ मेरी कोड है में लोड किया है।

// देखें पोस्ट को सहेजने और PartialView

[HttpPost, ValidateAntiForgeryToken, ValidateInput(false)] 
    public async Task<PartialViewResult> Create 
     ([Bind(Include = "ID,Title,Message,PostedOn,isAbuse,By")] Post post) 
    { 
     if (ModelState.IsValid) 
     { 
      var list = new List<Post>(); 
      list.Add(post); 

      try 
      { 
       db.Posts.Add(post); 
       await db.SaveChangesAsync(); 

       return PartialView("_Posts", list); 
      } 
      catch (RetryLimitExceededException) 
      { 
       ModelState.AddModelError("", "Unable to login, please try again and contact administrator if the problem persists."); 

       //If we got this far, model has errors. 
       ViewBag.By = new SelectList(db.Members, "ID", "FullNames", post.By); 
       return PartialView("_Posts", post); 
      } 
     } 

     //If we got this far, model has errors. 
     ViewBag.By = new SelectList(db.Members, "ID", "FullNames", post.By); 
     return PartialView("_Posts", post); 
    } 

अद्यतन करने के लिए

@using (Ajax.BeginForm("Create", "Post", 
new AjaxOptions 
{ 
    HttpMethod = "POST", 
    UpdateTargetId = "insertnewpostbelow", 
    InsertionMode = InsertionMode.InsertAfter, 
    OnSuccess = "postingSucceeded()", 
    OnFailure = "postingFailed()" 
})) 
{ 
    //View code left out 
} 

// सर्वर साइड एक पोस्ट बनाने के लिए // मेरा JavaScript फ़ाइल

function postingSucceeded() { 
    alert("Posting succeeded."); 
} 

function postingFailed() { 
    alert("Posting failured."); 
} 

// भाग

अपडेट करने के लिए दृश्य का
<div id="big-posts"> 
     <span id="insertnewpostbelow"></span> 

     @Html.Partial("_Posts", Model.Posts) 
    </div> 

मुझे क्या याद आ रहा है, अग्रिम धन्यवाद।

+1

आपको AJAX.beginform पैरामीटर में ब्रांडेसिस की आवश्यकता नहीं है, इसे 'ऑनस्यूफ = "पोस्टिंग सफल होना चाहिए", ऑनफेलर = "पोस्टिंगफेल" ' –

+0

धन्यवाद @AlexArt यह इंगित करने के लिए। हालांकि कोड बदलने के बाद, मेरी समस्या ठीक नहीं है – Dev

+0

क्या आप अपना आंशिक दृश्य भी साझा कर सकते हैं। – MstfAsan

उत्तर

4

ऐसा इसलिए है क्योंकि आपके पास _PostsPartialView में अजाक्स फ़ॉर्म है। प्लेसमेंट के बाद, कहें, <span id="insertnewpostbelow"></span> के बाद आपको पेज पर फिर से jquery.unobtrusive-AJAX चलाने की आवश्यकता है।

ध्यान दें कि स्क्रिप्ट पृष्ठ लोड पर प्रस्तुत की जाएगी, पृष्ठ में किसी भी बदलाव के बाद नहीं (जैसे PartialView द्वारा अपडेट)।

समाधान: कॉल स्क्रिप्ट फिर, पेज अद्यतन :)

4

करने के बाद आपको पेज

<div id="big-posts"> 
    <span id="insertnewpostbelow"></span> 
    <div id="newPost"></div> 
</div> 

पर कहीं लौटे आंशिक दृश्य की सामग्री डाल करने के लिए कॉल बैक समारोह पर की जरूरत है कोशिश करें:

function postingSucceeded(data) { 
    $("#newPost").html(data); 
} 

आशा है कि इससे मदद मिलती है!

2

पहली बात आप कोष्टक

OnSuccess = "postingSucceeded()" 
          ^^^ 

OnFailure = "postingFailed()" 
         ^^^ 

के लिए सिर्फ

OnSuccess = "postingSucceeded", 
OnFailure = "postingFailed" 

और अब एचटीएमएल कोड

<div id="big-posts"> 
    <span id="insertnewpostbelow"></span> 
    <div id="AppendPostsHere"></div> 
</div> 

और jav की जरूरत नहीं है ascript कोड बाहर की ओर$(document).ready(....)

function postingSucceeded(newPosts) { 
    $("#AppendPostsHere").html(newPosts); 
} 

आशा है कि यह काम willl!