การโทร Ajax อย่างง่ายไปยังคอนโทรลเลอร์ใน 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>

ฉันต้องพิมพ์การแจ้งเตือนด้วยวิธีการควบคุมที่ส่งคืนข้อมูล รหัสด้านบนเพียงพิมพ์ "chamara" ในมุมมองของฉัน การแจ้งเตือนไม่เริ่มทำงาน

อัปเดต

ฉันแก้ไขคอนโทรลเลอร์ของฉันตามด้านล่างและมันเริ่มทำงาน ฉันไม่รู้ชัดเจนว่าทำไมถึงใช้งานได้ในตอนนี้ บางคนโปรดอธิบาย พารามิเตอร์ "a" ไม่เกี่ยวข้องฉันเพิ่มเพราะฉันไม่สามารถเพิ่มสองวิธีที่มีชื่อวิธีการและพารามิเตอร์เดียวกันฉันคิดว่านี่อาจไม่ใช่วิธีแก้ปัญหา แต่ใช้งานได้

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

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

— Chamara
แหล่งที่มา

กลับ JSON {"name":"chamara"}สตริงที่จัดรูปแบบ แล้วลองอ่านเป็นdata['name']

— Raab

1

ลบไลบรารี jQuery ที่สองออกจากมุมมอง รหัสของคุณควรทำงานตามที่เป็นอยู่ ฉันคิดว่าข้อผิดพลาดของสคริปต์อาจเกิดขึ้นและทำให้การแจ้งเตือนไม่ปรากฏขึ้น

— Terence

23

หลังจากการอัปเดตที่คุณทำเสร็จแล้ว

เป็นครั้งแรกที่เรียกแอ็คชัน FirstAjax พร้อมคำขอ HttpGet เริ่มต้นและแสดงผลมุมมอง Html ที่ว่างเปล่า (ก่อนหน้านี้คุณไม่มี)
ในภายหลังเมื่อโหลดองค์ประกอบ DOM ของมุมมองนั้นการโทร Ajax ของคุณจะเริ่มทำงานและแสดงการแจ้งเตือน

ก่อนหน้านี้คุณเพียงส่งคืน JSON ไปยังเบราว์เซอร์โดยไม่ต้องแสดง HTML ใด ๆ ตอนนี้มีมุมมอง HTML ที่แสดงผลซึ่งสามารถรับข้อมูล JSON ของคุณได้

คุณไม่สามารถแสดง JSON ได้โดยตรงข้อมูลธรรมดาไม่ใช่ HTML

— asb
แหล่งที่มา

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

@chamara - ขออภัยลบ HttpPost (คุณไม่ได้โพสต์อะไรไปยังเซิร์ฟเวอร์ดังนั้นมันจะเป็นแอตทริบิวต์ซ้ำซ้อน) และคอนโทรลเลอร์จะไม่ถูกโจมตี ลบ "type: POST" ในฟังก์ชัน AJAX ตามที่ฉันหว่านให้คุณด้วย

— Darren

18

ใช้ Razor เพื่อเปลี่ยน 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'); }
});

— gdmanandamohon
แหล่งที่มา

พารามิเตอร์สำหรับ Url.Action จะย้อนกลับในคำตอบนี้นั่นคือ Url.Action (actionName, controllerName)

— xd6_

1

ไม่ใช่แฟนของสิ่งนี้มันสนับสนุนให้มีการเชื่อมต่อของมุมมองและจาวาสคริปต์ แต่เอ่อชื่อผู้ใช้ตรวจสอบ?

— Halter

@Halter UX ปรับปรุงอย่างมากเมื่อคุณไม่บังคับให้ผู้ใช้เปลี่ยนเส้นทางในทุกการกระทำ และมีหลายสิ่งหลายอย่างที่เกิดขึ้นในฝั่งไคลเอ็นต์ที่ฝั่งเซิร์ฟเวอร์ไม่ควรสนใจ

— Kolob Canyon

@KolobCanyon คุณถูกต้อง 100% ความคิดเห็นของฉันอ้างถึงการแสดงผล URL ด้วยมีดโกนในจาวาสคริปต์มากกว่าซึ่งจะจับคู่จาวาสคริปต์ของคุณกับมุมมอง (cshtml) อย่างแน่นหนา เป็นคำตอบที่ดี แต่ในการแก้ไขการมีเพศสัมพันธ์ที่แน่นคุณอาจจะถ่ายโอน URL ลงในแอตทริบิวต์ข้อมูลใน chstml และอ่านในจาวาสคริปต์ ขอโทษสำหรับความสับสน!

— Halter

5

สิ่งแรกไม่จำเป็นต้องมีไลบรารี jquery สองเวอร์ชันที่แตกต่างกันในหน้าเดียวทั้ง "1.9.1" หรือ "2.0.0" ก็เพียงพอที่จะทำให้การโทร ajax ทำงานได้ ..

นี่คือรหัสคอนโทรลเลอร์ของคุณ:

    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>

— Lokesh_Ram
แหล่งที่มา

5

หากคุณเพียงแค่ต้องกด C # Method ใน Ajax Call ของคุณคุณเพียงแค่ต้องส่งเรื่องสองประเภทและ url หากได้รับคำขอคุณเพียงแค่ระบุ url เท่านั้น โปรดปฏิบัติตามรหัสด้านล่างซึ่งใช้งานได้ดี

รหัส C #:

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

Java Script Code หากได้รับการร้องขอ

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

Java Script Code ถ้า Post Request และ [HttpGet] ถึง [HttpPost]

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

หมายเหตุ: หากคุณ FirstAjax ในคอนโทรลเลอร์เดียวกันกับ View Controller ของคุณก็ไม่จำเป็นต้องใช้ชื่อ Controller ใน url ชอบurl: 'FirstAjax',

— มูฮัมหมัดอัษฎา
แหล่งที่มา

4

สำหรับคำถาม UPDATE ของคุณ

เนื่องจากคุณไม่สามารถมีสองวิธีที่มีชื่อและลายเซ็นเดียวกันคุณจึงต้องใช้แอ็ตทริบิวต์ 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();
}

และโปรดอ้างอิงลิงค์นี้เพื่ออ้างอิงเพิ่มเติมว่าวิธีการกลายเป็นการกระทำอย่างไร แม้ว่าการอ้างอิงที่ดีมาก

— RGR
แหล่งที่มา

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);
 }

— oyenigun
แหล่งที่มา

0

แทนที่จะurl: serviceURL, ใช้

url: '<%= serviceURL%>',

และคุณกำลังส่ง 2 พารามิเตอร์ไปสู่ successFunc หรือไม่?

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

— แลกเปลี่ยน
แหล่งที่มา

0

เพิ่ม "JsonValueProviderFactory" ใน global.asax:

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

— ยาช
แหล่งที่มา

JsonValueProviderFactory คืออะไร?

— Kiquenet