jquery AJAX

Question

के साथ फ़ॉर्म सबमिट करें मैं एमवीसी सीखने की कोशिश कर रहा हूं और एक चीज जो मैं करना चाहता हूं वह मेरे नियंत्रक में एक क्रिया सबमिट करने के लिए है और यह क्रिया सबमिट किए गए डेटा को वापस कर देगी। सरल लगता है लेकिन मैं बिना किसी सफलता के घंटों तक कोशिश कर रहा हूं। मेरे विचार:

@using (Html.BeginForm("BlogComment","Blog")) 
{ 
    @Html.ValidationSummary(true) 
    <legend class="AddAComment">Add a comment</legend> 

    <div class="commentformwrapper"> 

     <div class="editor-text"> 
     <span class="editor-label">User Name:</span> 
     </div> 

     <div class="editor-text"> 
     <input type="text" id="username" /> 
     </div> 

     <div class="editor-text"> 
     <textarea id="comment" rows="6" cols="23"></textarea> 
     </div> 

     <div class="editor-field"> 
     <input type="hidden" id="hiddendate" /> 
     </div> 

     <input type="submit" id="submit" value="Create" /> 

    </div> 
} 

मेरी नियंत्रक:

[HttpPost] 
public ActionResult CommentForm(Comment comment) 
{ 
    Comment ajaxComment = new Comment(); 
    ajaxComment.CommentText = comment.UserName; 
    ajaxComment.DateCreated = comment.DateCreated; 
    ajaxComment.PostId = comment.PostId; 
    ajaxComment.UserName = comment.UserName; 

    mRep.Add(ajaxComment); 
    uow.Save(); 
    //Get all the comments for the given post id 

    return Json(ajaxComment); 
} 

और मेरे js:

$(document).ready(function() { 

     $('form').submit(function() { 

      $.ajax({ 
       url: '@Url.Action("CommentForm")', 
       type: "POST", 
       dataType: "json", 
       contentType: "application/json; charset=utf-8", 
       data: { 
        PostId: $('.postid').val(), 
        UserName: $('#username').val(), 
        DateCreated: new Date(), 
        CommentText: $('#comment').val() 
       }, 
       success: function (result) { 

        alert("success " + result.UserName); 
       }, 
       error: function (result) { 
        alert("Failed"); 
       } 
      }); 
      return false; 
     }); 
    }); 

Answer 1

मूल रूप से आप सीधे जावास्क्रिप्ट ऑब्जेक्ट अक्षर भेज रहे हैं। इसलिए, आपके नियंत्रक को डेटा पास करने से पहले, यह JSON प्रारूप में होना चाहिए (क्योंकि आपके पास निर्दिष्ट एप्लिकेशन/जेसन है। अपना $ .ajax कॉल देखें)।
हां, तो आप याद कर रहे हैं JSON.stringify()

data: JSON.stringify({ 
         PostId: $('.postid').val(), 
         UserName: $('#username').val(), 
         DateCreated: new Date(), 
         CommentText: $('#comment').val() 
        }), 

या

var someObj = { 
      PostId: $('.postid').val(), 
      UserName: $('#username').val(), 
      DateCreated: new Date(), 
      CommentText: $('#comment').val() 
     }; 

     $.ajax({ 
      /// your other code 
      data: JSON.stringify(someObj), 
      // your rest of the code 

     }); 

Answer 2

के बजाय

data: { 
      PostId: $('.postid').val(), 
      UserName: $('#username').val(), 
      DateCreated: new Date(), 
      CommentText: $('#comment').val() 
     }, 

प्रयास करें

$('form').submit(function() { 
    var obj = { 
     PostId: $('.postid').val(), 
     UserName: $('#username').val(), 
     DateCreated: new Date(), 
     CommentText: $('#comment').val() 
    }; 

    $.ajax({ 
     ..., 
     data: JSON.stringify(obj), 
     ..., 
    }); 

    return false; 
}); 

आपको सर्वर पर भेजने से पहले डेटा को स्ट्रिंग में कनवर्ट करना होगा। और JSON.stringify वह काम करता है

Answer 3

आप FYI करें यह करने के लिए ग्राहक के पक्ष कोड की जरूरत नहीं है,।

एमवीसी में सफलतापूर्वक AJAX विधियों का उपयोग करने के लिए, आपको निम्न कार्य करने की आवश्यकता होगी। साथ ही विनीत ajax स्क्रिप्ट शामिल

<appSettings> 
    <add key="UnobtrusiveJavaScriptEnabled" value="true" /> 
    </appSettings> 

:

<script src="/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script> 

फिर अपने फार्म के आसपास div कंटेनर बना सकते हैं और Ajax.BeginForm

साथ Html.BeginForm की जगह web.config में appSettings को यह कुंजी जोड़ें

<div id="ajaxReplace"> 
@using (Ajax.BeginForm("BlogComment", "Blog", null, new AjaxOptions { UpdateTargetId = "ajaxReplace", OnSuccess = "doFunctionIfYouNeedTo", OnFailure = "ShowPopUpErrorIfYouWant" })) 
{ 
@Html.ValidationSummary(true) 
     <legend class="AddAComment">Add a comment</legend> 

     <div class="commentformwrapper"> 

      <div class="editor-text"> 
      <span class="editor-label">User Name:</span> 
      </div> 

      <div class="editor-text"> 
      <input type="text" id="username" /> 
      </div> 

      <div class="editor-text"> 
      <textarea id="comment" rows="6" cols="23"></textarea> 
      </div> 

      <div class="editor-field"> 
      <input type="hidden" id="hiddendate" /> 
      </div> 

      <input type="submit" id="submit" value="Create" /> 

     </div> 

    } 
</div> 

फिर अपने नियंत्रक में आप कुछ इस तरह वापसी करेंगे:

return PartialView(ajaxComment); 

यह आपको मैन्युअल रूप से ऐसा करने के लिए एक स्क्रिप्ट बनाए रखने में मदद करेगा और इच्छित रूप से ढांचे का उपयोग करने में आपको फ़नल करेगा। यह डेटा एनोटेशन सत्यापन और उसके साथ चलने वाली सभी रसदार सामग्री,

मुझे उम्मीद है कि यह किसी भी तरह से मदद करता है।

Answer 4

इस प्रयास करें:

मॉडल

public class Comment 
{ 
    public string CommentText { get; set; } 
    public DateTime? DateCreated { get; set; } 
    public long PostId { get; set; } 
    public string UserName { get; set; } 
} 

देखें और जे एस

@model SubmitMvcForWithJQueryAjax.Models.Comment 

@using (Html.BeginForm("BlogComment","Blog")) 
{ 
    @Html.ValidationSummary(true) 
    <legend class="AddAComment">Add a comment</legend> 

    <div class="commentformwrapper"> 

     <div class="editor-text"> 
     <span class="editor-label">User Name:</span> 
     </div> 

     <div class="editor-text"> 
      @Html.EditorFor(m => m.UserName) 
     </div> 

     <div class="editor-text"> 
      @Html.TextAreaFor(m => m.CommentText, new { rows="6", cols="23"}) 
     </div> 

     <div class="editor-field"> 
      @Html.HiddenFor(m => m.DateCreated)   
     </div> 

     <div class="editor-field"> 
      @Html.HiddenFor(m => m.PostId)   
     </div> 

     <input type="submit" id="submit" value="Create" /> 

    </div> 

} 

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

     $('form').submit(function() { 
      var serializedForm = $(this).serialize();      
      $.ajax({ 
       url: '@Url.Action("CommentForm")', 
       type: "POST",          
       data: serializedForm, 
       success: function (result) { 

        alert("success " + result.UserName); 
       }, 
       error: function (result) { 
        alert("Failed"); 
       } 

      }); 
      return false; 
     }); 
    }); 

</script> 

नियंत्रक

public class CommentController : Controller 
{ 
    // 
    // GET: /Comment/ 

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

    [HttpPost] 
    public ActionResult CommentForm(Comment comment) 
    { 
     Comment ajaxComment = new Comment(); 
     ajaxComment.CommentText = comment.UserName; 
     ajaxComment.DateCreated = comment.DateCreated ?? DateTime.Now; 
     ajaxComment.PostId = comment.PostId; 
     ajaxComment.UserName = comment.UserName; 

     //mRep.Add(ajaxComment); 
     //uow.Save(); 
     //Get all the comments for the given post id 

     return Json(ajaxComment); 


    } 

}