मॉडल को दृढ़ता से टाइप किए गए MVC3 दृश्य से पास करने के लिए jQuery में AJAX पोस्ट का उपयोग करने का उचित तरीका

Question

मैं एक नौसिखिया वेब प्रोग्रामर हूं इसलिए मुझे क्षमा करें अगर मेरा "शब्दजाल" कुछ सही नहीं है। मुझे MVC3 ढांचे का उपयोग करके ASP.NET का उपयोग करके एक प्रोजेक्ट मिला है।

मैं एक व्यवस्थापक दृश्य पर काम कर रहा हूं जहां व्यवस्थापक उपकरणों की एक सूची को संशोधित करेगा। कार्यों में से एक "अपडेट" बटन है जिसे मैं एमवीसी नियंत्रक को एक पोस्ट भेजने के बाद वेबपेज पर प्रविष्टि को गतिशील रूप से संपादित करने के लिए jquery का उपयोग करना चाहता हूं।

मुझे लगता है कि यह दृष्टिकोण एक एकल व्यवस्थापक सेटिंग में "सुरक्षित" है जहां डेटाबेस के साथ वेबपेज के सिंक से बाहर निकलने की न्यूनतम चिंता है।

मैंने एक ऐसा दृश्य बनाया है जो दृढ़ता से टाइप किया गया है और एक AJAX पोस्ट का उपयोग करके MVC नियंत्रण के लिए मॉडल डेटा पास करने की उम्मीद कर रहा था।

निम्नलिखित पोस्ट में, मुझे कुछ ऐसा मिला, जो मैं जो कर रहा हूँ, उसके समान है: JQuery के अजाक्स और ASP.NET MVC3, शून्य मापदंडों के अनुसार

मैं उपरोक्त पोस्ट से कोड नमूने का उपयोग करूंगा।

नमूना:

public class AddressInfo 
{
    public string Address1 { get; set; }
    public string Address2 { get; set; }
    public string City { get; set; }
    public string State { get; set; }
    public string ZipCode { get; set; }
    public string Country { get; set; }
}

नियंत्रक:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Check(AddressInfo addressInfo)
    {
        return Json(new { success = true });
    }
}

दृश्य में स्क्रिप्ट:

<script type="text/javascript">
var ai = {
    Address1: "423 Judy Road",
    Address2: "1001",
    City: "New York",
    State: "NY",
    ZipCode: "10301",
    Country: "USA"
};

$.ajax({
    url: '/home/check',
    type: 'POST',
    data: JSON.stringify(ai),
    contentType: 'application/json; charset=utf-8',
    success: function (data.success) {
        alert(data);
    },
    error: function () {
        alert("error");
    }
});
</script>

मुझे अभी तक उपरोक्त का उपयोग करने का मौका नहीं मिला है। लेकिन मैं सोच रहा था कि क्या यह AJAX का उपयोग करके मॉडल डेटा को MVC नियंत्रण में वापस करने के लिए "सबसे अच्छा" तरीका था?

क्या मुझे मॉडल जानकारी को उजागर करने के बारे में चिंतित होना चाहिए?

Answer 1

आप var घोषणा और स्ट्रिंग को छोड़ सकते हैं। अन्यथा, यह ठीक काम करेगा।

$.ajax({
    url: '/home/check',
    type: 'POST',
    data: {
        Address1: "423 Judy Road",
        Address2: "1001",
        City: "New York",
        State: "NY",
        ZipCode: "10301",
        Country: "USA"
    },
    contentType: 'application/json; charset=utf-8',
    success: function (data) {
        alert(data.success);
    },
    error: function () {
        alert("error");
    }
});

Comments

मामूली समायोजन को इंगित करने के लिए धन्यवाद। क्या सुरक्षा ढांचे से मॉडल संरचना को उजागर करने के बारे में कोई चिंता है?

— जॉन स्टोन

कुछ भी नहीं मेरे लिए एक सुरक्षा मुद्दा के रूप में बाहर खड़ा है। यदि आप वास्तव में इसके बारे में चिंतित हैं, तो आप हमेशा पीवीसी मॉडल पर एक कस्टम मॉडल बाइंडर बना सकते हैं।

— क्रेग एम

यह मेरे लिए असफल रहा। मुझे MVC5 में काम करने के लिए कॉल के लिए JSON.stringify ({...}) का उपयोग करना था।

— जॉनक्ले

मैंने देखा है कि मुझे एपीआई नियंत्रकों के साथ काम करते समय ऐसा ही करना है। यह उत्तर 4 साल पहले लिखा गया था, हालांकि पहले एपीआई नियंत्रक मौजूद थे।

— क्रेग एम

भगवान बांधो, मेरे पास कंटेंट टाइप के बजाय डेटाटाइप था, जो हमेशा मुझे मिलता है !!

— फिल

Answer 2

मुझे इसे लागू करने के 3 तरीके मिले:

सी # क्लास:

public class AddressInfo {
    public string Address1 { get; set; }
    public string Address2 { get; set; }
    public string City { get; set; }
    public string State { get; set; }
    public string ZipCode { get; set; }
    public string Country { get; set; }
}

क्रिया:

[HttpPost]
public ActionResult Check(AddressInfo addressInfo)
{
    return Json(new { success = true });
}

जावास्क्रिप्ट आप इसे तीन तरीके से कर सकते हैं:

1) क्वेरी स्ट्रिंग:

$.ajax({
    url: '/en/Home/Check',
    data: $('#form').serialize(),
    type: 'POST',
});

यहां डेटा एक स्ट्रिंग है।

"Address1=blah&Address2=blah&City=blah&State=blah&ZipCode=blah&Country=blah"

2) वस्तु सरणी:

$.ajax({
    url: '/en/Home/Check',
    data: $('#form').serializeArray(),
    type: 'POST',
});

यहां डेटा कुंजी / मान जोड़े का एक सरणी है:

=[{name: 'Address1', value: 'blah'}, {name: 'Address2', value: 'blah'}, {name: 'City', value: 'blah'}, {name: 'State', value: 'blah'}, {name: 'ZipCode', value: 'blah'}, {name: 'Country', value: 'blah'}]

3) JSON:

$.ajax({
      url: '/en/Home/Check',
      data: JSON.stringify({ addressInfo:{//missing brackets
          Address1: $('#address1').val(),
          Address2: $('#address2').val(),
          City: $('#City').val(),
          State: $('#State').val(),
          ZipCode: $('#ZipCode').val()}}),
      type: 'POST',
      contentType: 'application/json; charset=utf-8'
});

यहाँ डेटा एक क्रमबद्ध JSON स्ट्रिंग है। ध्यान दें कि नाम को सर्वर में पैरामीटर नाम से मेल खाना है !!

='{"addressInfo":{"Address1":"blah","Address2":"blah","City":"blah","State":"blah", "ZipCode", "blah", "Country", "blah"}}'

Comments

बस इस महान, पूरी तरह से जवाब है जो सवालों के हल मुझे नहीं पता था कि मैं अभी तक आया था। +1, धन्यवाद!

— सीनकेलेन

# 2 वही था जिसकी मुझे तलाश थी। इसका उत्तर होना चाहिए।

— द गीकन

EDIT: data: $('input, textarea, select').serialize(),मेरा काम करने के लिए उपयोग करना था।

— द गीक ज़ेन

हे जज़रेत !! कैसे 3 जी दृष्टिकोण के साथ मॉडल के लिए तारीख पारित करने के लिए ??

— गुरुप्रसाद राव

देरी के लिए क्षमा करें @GuruprasadRao एक तारीख पास करने के लिए आपके पास दिनांक और समय जावास्क्रिप्ट कोड में एक स्ट्रिंग हो सकता है और MVC इसे डेटाइम ऑब्जेक्ट में अनुवाद करेगा।

— जजरेट

Answer 3

यह मेरे लिए काम करने का तरीका है:

$.post("/Controller/Action", $("#form").serialize(), function(json) {       
        // handle response
}, "json");

[HttpPost]
public ActionResult TV(MyModel id)
{
    return Json(new { success = true });
}

Answer 4

आपके पास जो ठीक है - हालांकि कुछ टाइपिंग को बचाने के लिए, आप बस अपने डेटा के लिए उपयोग कर सकते हैं

डेटा: $ ('# formId')। क्रमबद्ध करें ()

देखें http://www.ryancoughlin.com/2009/05/04/how-to-use-jquery-to-serialize-ajax-forms/ विवरण के लिए, वाक्यविन्यास बहुत बुनियादी है।

Comments

क्रमबद्ध फ़ंक्शन का उपयोग करने के लिए, मेरी समझ यह है कि कक्षा के प्रत्येक सदस्य को फॉर्म ऑब्जेक्ट में उपयोग करने की आवश्यकता है। अगर यह सही है, तो मैं एसओएल हो सकता हूं।

— जॉन स्टोन

आह हां .. यदि आप नहीं कर सकते तो serialize का उपयोग करें। आप हमेशा DOM को हेरफेर कर सकते हैं और उन तत्वों के साथ एक फॉर्म बना सकते हैं और इसे क्रमबद्ध कर सकते हैं - लेकिन ... यह संभवतः केवल तब फ़ील्ड्स को मैन्युअल रूप से टाइप करने के लिए क्लीनर होगा।

— एडम टलीपर - एमएसएफटी

@TahaRehmanSiddiqui सीरियल वास्तव में IE में काम करता है, क्या काम नहीं करता है? क्या आपको कोई त्रुटि मिलती है?

— एडम टलीपर - एमएसएफटी

मेरे मॉडल की प्रत्येक संपत्ति अशक्त है

— ताहा रहमान सिद्दीकी

@TahaRehmanSiddiqui आपके फ़ॉर्म फ़ील्ड के 'नाम' आपके मॉडल गुणों के नाम से मेल खाते हैं?

— MongooseNX

Answer 5

यदि MVC 5 का उपयोग कर इस समाधान को पढ़ें!

मैं विशेष रूप से एमवीसी 3 के लिए बुलाए गए प्रश्न को जानता हूं, लेकिन मैं एमवीसी 5 के साथ इस पृष्ठ पर ठोकर खाई और मेरी स्थिति में किसी और के लिए एक समाधान पोस्ट करना चाहता था। मैंने उपरोक्त समाधानों की कोशिश की, लेकिन उन्होंने मेरे लिए काम नहीं किया, एक्शन फ़िल्टर कभी नहीं पहुंचा था और मैं इसका पता नहीं लगा सका। मैं अपनी परियोजना में संस्करण 5 का उपयोग कर रहा हूं और निम्नलिखित एक्शन फिल्टर के साथ समाप्त हुआ:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Mvc.Filters;

namespace SydHeller.Filters
{
    public class ValidateJSONAntiForgeryHeader : FilterAttribute, IAuthorizationFilter
    {
        public void OnAuthorization(AuthorizationContext filterContext)
        {
            string clientToken = filterContext.RequestContext.HttpContext.Request.Headers.Get(KEY_NAME);
            if (clientToken == null)
            {
                throw new HttpAntiForgeryException(string.Format("Header does not contain {0}", KEY_NAME));
            }

            string serverToken = filterContext.HttpContext.Request.Cookies.Get(KEY_NAME).Value;
            if (serverToken == null)
            {
                throw new HttpAntiForgeryException(string.Format("Cookies does not contain {0}", KEY_NAME));
            }

            System.Web.Helpers.AntiForgery.Validate(serverToken, clientToken);
        }

        private const string KEY_NAME = "__RequestVerificationToken";
    }
}

- नोट करें using System.Web.Mvcऔर using System.Web.Mvc.Filters, नहींhttp पुस्तकालयों (मुझे लगता है कि चीजों में से एक है कि MVC v5 के साथ बदल रहा है। -

फिर सिर्फ फ़िल्टर लागू करें [ValidateJSONAntiForgeryHeader] को अपनी कार्रवाई (या नियंत्रक) पर और इसे सही ढंग से बुलाया जाना चाहिए।

मेरे लेआउट पृष्ठ के ठीक ऊपर </body>मेरे पास है@AntiForgery.GetHtml();

अंत में, मेरे रेजर पेज में, मैं ajax कॉल निम्नानुसार करता हूं:

var formForgeryToken = $('input[name="__RequestVerificationToken"]').val();

$.ajax({
  type: "POST",
  url: serviceURL,
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  data: requestData,
  headers: {
     "__RequestVerificationToken": formForgeryToken
  },
     success: crimeDataSuccessFunc,
     error: crimeDataErrorFunc
});

Comments

क्या आप अपने सभी फ़ॉर्म मानों को मैन्युअल रूप से प्राप्त कर रहे हैं? क्यों नहीं data: $("#the-form").serialize()?

— सिनजाई

@Sinjai मुझे फिर से अपने कोड को देखना होगा, लेकिन मुझे विश्वास है कि मैं वहां कुछ अन्य प्रसंस्करण भी कर रहा हूं। ".serialize ()" भी काम करेगा यदि आपको इनपुट मूल्यों की आवश्यकता है

— ब्लबरो

कोई चिंता नहीं, मैं बस उत्सुक था।

— सिंजई