jQuery के पद ASP.NET एपीआई नियंत्रक को

Question

मैं एक फार्म jQuery के माध्यम से उत्पन्न होता है कि है:

$.get("/api/get/getListItems", function (data) { 
       var table = ""; 
       table += "<table>"; 
       $.each(data, function (y, z) { 
        console.log(z); 
        table += '<tr>'; 
        $.each(this, function (k, v) { 
         table += '<td><input type="text" name="' + k + '" id="' + k + '" value="' + v + '" /></td>'; 
        }); 
        table += '<td><input type="checkbox" name="selected" id="selected" /></td>'; 

        table += '</tr>'; 
       }); 
       table += '<tr><td><input type="submit" id="submit" name="submit" value="Save To Database" /></td></tr>'; 
       table += '</table>'; 
       $('#form').html(table); 
      }); 

और यह इस एचटीएमएल (इनपुट फ़ील्ड 10 पंक्तियाँ, 7 कॉलम और 1 चेकबॉक्स) उत्पन्न करता है: http://jsfiddle.net/8zpr2fkL/1/

और मैं प्रपत्र जब सबमिट बटन पर क्लिक किया जाता है प्रस्तुत करने हूँ:

$("#form").submit(function (event) { 
     $.post("/api/update/", $("#form").serialize(), alert('success')); 
    }); 

अब मैं अपने ASP.NET एपीआई नियंत्रक करने के लिए डेटा गुजर रहा हूँ:

, कोशिकाओं 0 गिनती, कुछ मैं कर रहा हूँ

public class CellModel 
    { 
     public uint scheduleTaskID { get; set; } 
     public string task { get; set; } 
     public string baselineDate { get; set; } 
     public string scheduledDate { get; set; } 
     public string actualDate { get; set; } 
     public string finishedDate { get; set; } 
     public bool selected { get; set; } 

     public override string ToString() 
     { 
      return scheduleTaskID.ToString(); 
     } 
    } 

मेरे समस्या है जब मैं डेटा सबमिट करें और नियंत्रक विधि पर एक ब्रेकपाइंट डाल करने के लिए प्रस्तुत मारा वहाँ है:

[HttpPost] 
     public dynamic Post([FromBody]CellModel cells) 
     { 
       UpdateClass jobs = new UpdateClass(); 
       return jobs; 
     } 

और यहाँ मेरी CellModel वर्ग है यहाँ याद आ रही है? मैं इनपुट पाठ में सभी डेटा को नियंत्रक को पास करने की कोशिश कर रहा हूं। मेरे नियंत्रक को कुछ भी नहीं मिला है। मैं क्या गलत कर रहा हूं?

इस डेटा jQuery $ ('# प्रपत्र') के माध्यम से पारित करने के लिए कोशिश कर रहा im है क्रमानुसार():।

scheduleTaskID=194&task=Permit&baselineDate=6%2F23%2F2005+8%3A00%3A00+AM&scheduledDate=6%2F23%2F2005+8%3A00%3A00+AM&actualDate=6%2F23%2F2005+8%3A00%3A00+AM&finishedDate=&scheduleTaskID=195&task=Office+Files&baselineDate=7%2F13%2F2005+8%3A00%3A00+AM&scheduledDate=7%2F13%2F2005+8%3A00%3A00+AM&actualDate=7%2F13%2F2005+8%3A00%3A00+AM&finishedDate=&scheduleTaskID=196&task=Foundation&baselineDate=7%2F27%2F2005+8%3A00%3A00+AM&scheduledDate=7%2F27%2F2005+8%3A00%3A00+AM&actualDate=8%2F13%2F2005+8%3A00%3A00+AM&finishedDate=&scheduleTaskID=197&task=Framing&baselineDate=8%2F5%2F2005+8%3A00%3A00+AM&scheduledDate=8%2F5%2F2005+8%3A00%3A00+AM&actualDate=8%2F23%2F2005+8%3A00%3A00+AM&finishedDate=&scheduleTaskID=198&task=Finishes+Exterior&baselineDate=8%2F26%2F2005+8%3A00%3A00+AM&scheduledDate=8%2F26%2F2005+8%3A00%3A00+AM&actualDate=9%2F14%2F2005+8%3A00%3A00+AM&finishedDate=&scheduleTaskID=199&task=Drywall&baselineDate=9%2F2%2F2005+8%3A00%3A00+AM&scheduledDate=9%2F2%2F2005+8%3A00%3A00+AM&actualDate=9%2F16%2F2005+8%3A00%3A00+AM&finishedDate=&scheduleTaskID=200&task=Flooring&baselineDate=9%2F1%2F2005+8%3A00%3A00+AM&scheduledDate=9%2F1%2F2005+8%3A00%3A00+AM&actualDate=9%2F20%2F2005+8%3A00%3A00+AM&finishedDate=&scheduleTaskID=201&task=General+Finish&baselineDate=9%2F12%2F2005+8%3A00%3A00+AM&scheduledDate=9%2F12%2F2005+8%3A00%3A00+AM&actualDate=&finishedDate=&scheduleTaskID=202&task=Final+PDI&baselineDate=10%2F11%2F2005+8%3A00%3A00+AM&scheduledDate=10%2F11%2F2005+8%3A00%3A00+AM&actualDate=&finishedDate=&scheduleTaskID=203&task=Permit&baselineDate=4%2F6%2F2005+8%3A00%3A00+AM&scheduledDate=4%2F6%2F2005+8%3A00%3A00+AM&actualDate=4%2F6%2F2005+8%3A00%3A00+AM&finishedDate= 

अद्यतन

मैं बदल गया है:

$("#form").submit(function (event) { 
      $.post("/api/update/", $("#form").serialize(), alert('success')); 
     }); 

$("#form").submit(function (event) { 
     var array = []; 
     $('#form > table > tbody > tr').each(function (elem) { 
      var item = {}; 
      item.scheduleTaskID = $(this).find("td > #scheduleTaskID").val(); 
      item.task = $(this).find("td > #task").val(); 
      item.baselineDate = $(this).find("td > #baselineDate").val(); 
      item.scheduledDate = $(this).find("td > #scheduledDate").val(); 
      item.actualDate = $(this).find("td > #actualDate").val(); 
      item.finishedDate = $(this).find("td > #finishedDate").val(); 
      item.selected = $(this).find("td > #selected").val(); 
      array.push(item); 
     }); 
     console.log(JSON.stringify(array)); 
     $.post("/api/update/", JSON.stringify(array), alert('success'), 'json'); 
    }); 

मेरे कंसोल में अपने डेटा लॉग ऑन इस तरह दिखता है:

[{"scheduleTaskID":"203","task":"Permit","baselineDate":"4/6/2005 8:00:00 AM","scheduledDate":"4/6/2005 8:00:00 AM","actualDate":"4/6/2005 8:00:00 AM","finishedDate":"","selected":"on"},{"scheduleTaskID":"195","task":"Office Files","baselineDate":"7/13/2005 8:00:00 AM","scheduledDate":"7/13/2005 8:00:00 AM","actualDate":"7/13/2005 8:00:00 AM","finishedDate":"","selected":"on"},{"scheduleTaskID":"196","task":"Foundation","baselineDate":"7/27/2005 8:00:00 AM","scheduledDate":"7/27/2005 8:00:00 AM","actualDate":"8/13/2005 8:00:00 AM","finishedDate":"","selected":"on"},{"scheduleTaskID":"197","task":"Framing","baselineDate":"8/5/2005 8:00:00 AM","scheduledDate":"8/5/2005 8:00:00 AM","actualDate":"8/23/2005 8:00:00 AM","finishedDate":"","selected":"on"},{"scheduleTaskID":"198","task":"Finishes Exterior","baselineDate":"8/26/2005 8:00:00 AM","scheduledDate":"8/26/2005 8:00:00 AM","actualDate":"9/14/2005 8:00:00 AM","finishedDate":"","selected":"on"},{"scheduleTaskID":"199","task":"Drywall","baselineDate":"9/2/2005 8:00:00 AM","scheduledDate":"9/2/2005 8:00:00 AM","actualDate":"9/16/2005 8:00:00 AM","finishedDate":"","selected":"on"},{"scheduleTaskID":"200","task":"Flooring","baselineDate":"9/1/2005 8:00:00 AM","scheduledDate":"9/1/2005 8:00:00 AM","actualDate":"9/20/2005 8:00:00 AM","finishedDate":"","selected":"on"},{"scheduleTaskID":"201","task":"General Finish","baselineDate":"9/12/2005 8:00:00 AM","scheduledDate":"9/12/2005 8:00:00 AM","actualDate":"","finishedDate":"","selected":"on"},{"scheduleTaskID":"202","task":"Final PDI","baselineDate":"10/11/2005 8:00:00 AM","scheduledDate":"10/11/2005 8:00:00 AM","actualDate":"","finishedDate":"","selected":"on"},{"scheduleTaskID":"203","task":"Permit","baselineDate":"4/6/2005 8:00:00 AM","scheduledDate":"4/6/2005 8:00:00 AM","actualDate":"4/6/2005 8:00:00 AM","finishedDate":"","selected":"on"},{}] 

और मेरे ASP.NET एपीआई नियंत्रक में, मैं इस के लिए मेरे तरीके को बदल दिया:

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Net; 
using System.Net.Http; 
using System.Web.Http; 
using MvcApplication1.Models; 

namespace MvcApplication1.Controllers 
{ 
    public class UpdateController : ApiController 
    { 
     [HttpPost] 
     public dynamic Post(List<CellModel> cells) 
     { 
       UpdateClass jobs = new UpdateClass(); 
       //jobs.PostScheduledTasks(cells); 
       return cells; 
     } 

    } 
} 

मैं के शुरू में एक ब्रेकपाइंट डाल विधि पोस्ट और जब यह ब्रेकपॉइंट हिट करता है, तो यह कहता है कि सेल गणना = 0..मैं नेटवर्क कॉल देखता हूं, केवल तभी जब मैं अपनी पोस्ट कॉल के बाद झूठी वापसी करता हूं और प्रतिक्रिया खाली होती है [] डेटा मेरे नियंत्रक को क्यों नहीं गुजर रहा है, क्या ऐसा इसलिए है क्योंकि फॉर्म jquery द्वारा उत्पन्न किया जा रहा है?

अद्यतन

फिर भी कोई समाधान नहीं है, मैं अपने नेटवर्क कॉल यह AM और स्थिति कोड को देखा 301 है:

Answer 1

$ .post ajax पोस्ट उपयोग का उपयोग न करें और करने के लिए सामग्री प्रकार सेट "application/json; charset = utf-8"

var data = JSON.stringify(array); 
$.ajax({ 
    url:"/api/update/", 
    type:"POST", 
    data:data, 
    contentType:"application/json; charset=utf-8", 
    dataType:"json", 
    success: function(data){ 
    console.log(data); 
    } 
}); 

समस्या यह है कि आपको उस वेबसर्वर से कहने की ज़रूरत है जिसे आप जेसन भेज रहे हैं और $ के साथ संभव नहीं है।पोस्ट

यह वास्तव में सामान्य है, और मैं यह भी साथ संघर्ष कर दिया गया है (और कभी कभी मैं अभी भी भूल जाते हैं), यहाँ आप देख सकते हैं आप का उपयोग करने के लिए $ .ajax

Jquery - How to make $.post() use contentType=application/json?

Answer 2

मुझे पता है कि, यह .post के बजाय .ajax का उपयोग कर हल हो चुका है। मैंने इसे साझा करने के बारे में सोचा, क्योंकि मैंने इसे .post का उपयोग करके हल किया है। जैसा ऊपर बताया गया है, चूंकि यह सामग्री प्रकार Content-Type:application/x-www-form-urlencoded; charset=UTF-8 के साथ पोस्ट करता है, पोस्ट विधि में पैरामीटर cells में count = 0 होगा।

इसे हल करने के लिए, आपको मैन्युअल रूप से अनुरोध ऑब्जेक्ट को कैप्चर करना होगा और पोस्ट डेटा प्राप्त करना होगा और फिर deserialize करना होगा और List<CellModel> के रूप में ऑब्जेक्ट प्राप्त करना होगा। मैंने ओपी द्वारा सभी पोस्ट कोड का उपयोग किया है, और निम्नलिखित में दिखाए गए अनुसार post विधि को संशोधित किया है, और यह काम करता है।

[HttpPost] 
public dynamic Post(List<CellModel> cells) 
{ 
    string content = string.Empty; 
    if (HttpContext.Current.Request.InputStream.CanSeek) 
    { 
     HttpContext.Current.Request.InputStream.Seek(0, System.IO.SeekOrigin.Begin); 
    } 
    using (System.IO.StreamReader reader = new System.IO.StreamReader(HttpContext.Current.Request.InputStream)) 
    { 
     content = reader.ReadToEnd(); 
    } 
    if (!string.IsNullOrEmpty(content)) 
    { 
     // Deserialize and operate over cells. 
     try 
     { 
      var obj = Newtonsoft.Json.JsonConvert.DeserializeObject(content, typeof(List<CellModel>)); 
     } 
     catch (Exception ex) 
     { 
      return ex; 
     } 

    } 
    return cells; 
} 

डीबगिंग के दौरान मुझे यह मिलता है।

Answer 3

आप @dariogriffo द्वारा एक वैकल्पिक दृष्टिकोण मिल गया है, मैं $ .post साथ अपने प्रारंभिक दृष्टिकोण का उपयोग कर आप एक पूर्ण समाधान देना चाहते हैं।

आपका प्रपत्र क्रमबद्धता के साथ प्रारंभिक दृष्टिकोण सही था, तो निम्न कोड सही है:

$("#form").submit(function (event) { 
    $.post("/api/update/", $("#form").serialize(), alert('success')); 
}); 

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

actionattributename[index].propertyname 

आप कर रहे हैं:

स्पष्ट करने के लिए है कि क्या मतलब है, ASP.NET यदि आप एक नियमित रूप से MVC 5 नियंत्रक पोस्ट कर रहे हैं प्रत्येक इनपुट क्षेत्र है कि एक मॉडल के गुण से मेल खाता निम्न नाम प्रारूप की अपेक्षा करता है एक वेब एपीआई 2 नियंत्रक से पोस्टिंग यह होना चाहिए:

[index].propertyname 

के बाद से अपनी कार्रवाई विशेषता cells नाम पर है और यह एक संपत्ति scheduledTaskID है, और आप एक वेबएपीआई नियंत्रक आपके इनपुट में से एक की तरह लग रहे हैं पोस्ट कर रहे हैं:

<input type="text" name="[0].scheduleTaskID" id="scheduleTaskID" value="194"> 

इसे बनाने के लिए एक फार्म की संरचना में कुछ और नियम शामिल हैं। आप यहाँ इसके बारे में एक अच्छा ब्लॉग पोस्ट पा सकते हैं:

http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx/

आप JSON दृष्टिकोण का उपयोग किए बिना उस प्रपत्र सम्मेलन आप अपने नियंत्रक एक List<CellModel> cellsउम्मीद करने के लिए अपने धारावाहिक रूप पोस्ट करने में सक्षम होगा अनुसरण किया है, जो अन्य उत्तरों में सुझाए गए अनुसार अधिक महंगा है।

http://jsfiddle.net/8zpr2fkL/12/

आप इस फार्म के लिए अपने वेब एपीआई नियंत्रक और करने के लिए $ .post का उपयोग कर .post $ करने की कोशिश कर सकते हैं:

नीचे एक उदाहरण प्रपत्र वेब एपीआई 2 डिफ़ॉल्ट बांधने की मशीन के नियमों के अनुसार सही ढंग से संरचित के साथ एक बेला है यह एक आकर्षण की तरह काम करना चाहिए!