Asp.net mvc में नियंत्रक के लिए एक साधारण अजाक्स कॉल करना


109

मैं ASP.NET MVC Ajax कॉल के साथ आरंभ करने का प्रयास कर रहा हूं।

नियंत्रक:

public class AjaxTestController : Controller
{
    //
    // GET: /AjaxTest/
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult FirstAjax()
    {
        return Json("chamara", JsonRequestBehavior.AllowGet);
    }   
}

राय:

<head runat="server">
    <title>FirstAjax</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var serviceURL = '/AjaxTest/FirstAjax';

            $.ajax({
                type: "POST",
                url: serviceURL,
                data: param = "",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: successFunc,
                error: errorFunc
            });

            function successFunc(data, status) {     
                alert(data);
            }

            function errorFunc() {
                alert('error');
            }
        });
    </script>
</head>

मुझे सिर्फ कंट्रोलर मेथड रिटर्निंग डेटा के साथ एक अलर्ट प्रिंट करने की आवश्यकता है। उपरोक्त कोड मेरे विचार पर सिर्फ "चामरा" प्रिंट करें। अलर्ट फायरिंग नहीं है।

अपडेट करें

मैंने नीचे के रूप में अपने नियंत्रक को संशोधित किया और यह काम करना शुरू कर देता है। मेरे पास स्पष्ट विचार नहीं है कि यह अब क्यों काम कर रहा है। कुछ एक कृपया समझाएं। पैरामीटर "ए" संबंधित नहीं है, मैंने इसे जोड़ा क्योंकि मैं एक ही विधि नाम और मापदंडों के साथ दो तरीके नहीं जोड़ सकता हूं। मुझे लगता है कि यह समाधान नहीं हो सकता है, लेकिन इसका काम करना

public class AjaxTestController : Controller
    {
        //
        // GET: /AjaxTest/
        [HttpGet]
        public ActionResult FirstAjax()
        {
            return View();
        }

        [HttpPost]
        public ActionResult FirstAjax(string a)
        {
            return Json("chamara", JsonRequestBehavior.AllowGet);
        }
    }

वापसी json स्वरूपित स्ट्रिंग {"name":"chamara"}। फिर पढ़ने की कोशिश करेंdata['name']
राब

1
दूसरे jQuery लाइब्रेरी को दृश्य से निकालें। आपका कोड इस प्रकार काम करना चाहिए। मुझे लगता है कि स्क्रिप्ट त्रुटि हो सकती है और अलर्ट को दिखाने से रोक सकती है।
टेरेंस

जवाबों:


23

आपके द्वारा किए गए अद्यतन के बाद,

  1. डिफ़ॉल्ट HttpGet अनुरोध के साथ FirstAjax कार्रवाई को कॉल करना और रिक्त Html दृश्य को प्रस्तुत करता है। (पहले आप यह नहीं कर रहे थे)
  2. बाद में उस डोम के तत्वों को लोड करने पर आपके अजाक्स कॉल को निकाल दिया जाता है और अलर्ट प्रदर्शित करता है।

इससे पहले आप किसी HTML को रेंडर किए बिना केवल JSON को ब्राउजर में लौटा रहे थे। अब इसमें एक HTML व्यू दिया गया है जहाँ यह आपके JSON डेटा को प्राप्त कर सकता है।

आप सीधे JSON को अपने सादे डेटा को HTML नहीं दे सकते।


52

डेटा विशेषता को हटा दें क्योंकि आप नहीं हैं POSTING सर्वर के लिए कुछ भी (आपका नियंत्रक किसी भी पैरामीटर की अपेक्षा नहीं करता है)।

और अपने AJAX मेथड में आप स्थैतिक स्ट्रिंग के बजाय उपयोग Razorऔर उपयोग कर सकते हैं @Url.Action:

$.ajax({
    url: '@Url.Action("FirstAjax", "AjaxTest")',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: successFunc,
    error: errorFunc
});

आपके अपडेट से:

$.ajax({
    type: "POST",
    url: '@Url.Action("FirstAjax", "AjaxTest")',
    contentType: "application/json; charset=utf-8",
    data: { a: "testing" },
    dataType: "json",
    success: function() { alert('Success'); },
    error: errorFunc
});

3
@चमरा - क्षमा करें, HttpPost को हटा दें (आप सर्वर पर कुछ भी पोस्ट नहीं कर रहे हैं ताकि यह एक निरर्थक विशेषता हो) और नियंत्रक हिट नहीं होगा। AJAX फ़ंक्शन में "प्रकार: POST" को भी हटा दें क्योंकि मैंने आपको बोया है।
डैरेन

18

इस तरह से अपनी कार्रवाई को कॉल करके अपने URL को गतिशील रूप से बदलने के लिए रेजर का उपयोग करें:

$.ajax({
    type: "POST",
    url: '@Url.Action("ActionName", "ControllerName")',
    contentType: "application/json; charset=utf-8",
    data: { data: "yourdata" },
    dataType: "json",
    success: function(recData) { alert('Success'); },
    error: function() { alert('A error'); }
});

Url.Action के लिए पैरामीटर इस उत्तर में पीछे की ओर हैं, यह Url.Action (कार्रवाईनाम, नियंत्रक नाम)
xd6_

1
इसका प्रशंसक नहीं है, यह दृश्य और जावास्क्रिप्ट के युग्मन को प्रोत्साहित करता है, लेकिन उह, उपयोगकर्ता नाम की जाँच करता है?
हाल्टर

जब आप उपयोगकर्ता को हर क्रिया पर पुनर्निर्देशित करने के लिए बाध्य नहीं करते हैं तो @Halter UX बड़े पैमाने पर सुधार करता है। और क्लाइंट-साइड पर बहुत सारी चीजें होती हैं जिनके बारे में सर्वर-साइड को ध्यान नहीं देना चाहिए।
कोलोब कैनियन

@KolobCanyon आप 100% सही हैं। मेरी टिप्पणी जावास्क्रिप्ट में उस्तरा के साथ url प्रदान करने के लिए अधिक संदर्भित है, यह कसकर जोड़े को आपकी जावास्क्रिप्ट को दृश्य (cshtml) के साथ देखता है। यह एक अच्छा जवाब है, लेकिन चुस्त युग्मन को ठीक करने के लिए आप url को chml में डेटा विशेषता में डंप कर सकते हैं और इसे जावास्क्रिप्ट में पढ़ सकते हैं। गलतफहमी के लिए खेद है!
हाल्टर

5

पहली बात तो यह है कि एक पृष्ठ में दो अलग-अलग संस्करणों के जुकरी पुस्तकालयों के होने की कोई आवश्यकता नहीं है, या तो "1.9.1" या "2.0.0" अजाक्स कॉल काम करने के लिए पर्याप्त है ..

यहां आपका नियंत्रक कोड है:

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

    public ActionResult FirstAjax(string a)
    {
        return Json("chamara", JsonRequestBehavior.AllowGet);
    }   

इस तरह आपका दृष्टिकोण कैसा होना चाहिए:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function () {
    var a = "Test";
    $.ajax({
        url: "../../Home/FirstAjax",
        type: "GET",
        data: { a : a },
        success: function (response) {
            alert(response);
        },
        error: function (response) {
            alert(response);
        }
    });
});
</script>

5

यदि आपको अपने Ajax Call पर C # Method को हिट करने की आवश्यकता है, तो आपको केवल दो मामले टाइप करने और url पास करने की आवश्यकता है, यदि आपका अनुरोध मिलता है, तो आपको केवल url निर्दिष्ट करने की आवश्यकता है। कृपया नीचे दिए गए कोड का पालन करें यह ठीक काम कर रहा है।

C # कोड:

    [HttpGet]
    public ActionResult FirstAjax()
    {
        return Json("chamara", JsonRequestBehavior.AllowGet);
    }   

जावा स्क्रिप्ट कोड यदि अनुरोध प्राप्त करें

    $.ajax({
        url: 'home/FirstAjax',
        success: function(responce){ alert(responce.data)},
        error: function(responce){ alert(responce.data)}
    });

यदि पोस्ट रिक्वेस्ट और [HttpGet] [HttpPost] पर भी जावा स्क्रिप्ट कोड

        $.ajax({
            url: 'home/FirstAjax',
            type:'POST',
            success: function(responce){ alert(responce)},
            error: function(responce){ alert(responce)}
        });

नोट: यदि आप फर्स्टअजैक्स उसी कंट्रोलर में जिसमें आपका व्यू कंट्रोलर है तो आपको url में कंट्रोलर नाम की कोई आवश्यकता नहीं है। पसंदurl: 'FirstAjax',


4

यह आपके अद्यतन प्रश्न के लिए है।

चूंकि आपके पास ActionName विशेषता का उपयोग करने के लिए एक ही नाम और हस्ताक्षर के साथ दो विधियाँ नहीं हो सकती हैं:

अपडेट करें:

[HttpGet]
public ActionResult FirstAjax()
{
    Some Code--Some Code---Some Code
    return View();
}

[HttpPost]
[ActionName("FirstAjax")]
public ActionResult FirstAjaxPost()
{
    Some Code--Some Code---Some Code
    return View();
}

और कृपया इस लिंक को आगे देखें कि कैसे एक विधि एक क्रिया बन जाती है। हालांकि बहुत अच्छा संदर्भ।


1

राय;

 $.ajax({
        type: 'GET',
        cache: false,
        url: '/Login/Method',
        dataType: 'json',
        data: {  },
        error: function () {
        },
        success: function (result) {
            alert("success")
        }
    });

नियंत्रक विधि;

 public JsonResult Method()
 {
   return Json(new JsonResult()
      {
         Data = "Result"
      }, JsonRequestBehavior.AllowGet);
 }

0

url: serviceURL, उपयोग के बजाय

url: '<%= serviceURL%>',

और क्या आप सफलता के लिए 2 मानदंड पार कर रहे हैं?

function successFunc(data)
 {
   alert(data);
 }

0

Global.asax में "JsonValueProviderFactory" जोड़ें

protected void Application_Start()
{
    AreaRegistration.RegisterAllAreas();
    ValueProviderFactories.Factories.Add(new JsonValueProviderFactory());
}

JsonValueProviderFactory क्या है?
कीकनीत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.