แอ็คชันคอนโทรลเลอร์ ASP.NET MVC ที่ส่งคืน JSON หรือ HTML บางส่วน


406

ฉันกำลังพยายามสร้างการกระทำของตัวควบคุมซึ่งจะส่งคืน JSON หรือ HTML บางส่วนขึ้นอยู่กับพารามิเตอร์ วิธีที่ดีที่สุดในการรับผลลัพธ์ที่ส่งคืนไปยังหน้า MVC แบบอะซิงโครนัสคืออะไร

คำตอบ:


519

ในวิธีการกระทำของคุณให้ส่งคืน Json (วัตถุ) เพื่อกลับ JSON ไปยังหน้า

public ActionResult SomeActionMethod() {
  return Json(new {foo="bar", baz="Blech"});
}

จากนั้นเพียงเรียกวิธีการดำเนินการโดยใช้ Ajax คุณสามารถใช้หนึ่งในวิธีการช่วยเหลือจาก ViewPage เช่น

<%= Ajax.ActionLink("SomeActionMethod", new AjaxOptions {OnSuccess="somemethod"}) %>

SomeMethod จะเป็นวิธี javascript ที่ประเมินค่าวัตถุ Json ที่ส่งคืน

หากคุณต้องการส่งคืนสตริงธรรมดาคุณสามารถใช้ ContentResult:

public ActionResult SomeActionMethod() {
    return Content("hello world!");
}

ContentResult โดยดีฟอลต์ส่งคืนข้อความ / ธรรมดาเป็น contentType
นี่เป็นภาระที่มากเกินไปดังนั้นคุณสามารถทำสิ่งต่อไปนี้

return Content("<xml>This is poorly formatted xml.</xml>", "text/xml");

9
ขอโทษฟิล! สิ่งนี้ไม่ตอบคำถามจริงหรือ? มันมีประโยชน์แน่นอน แต่อย่างที่แบรดบอกว่าคุณจำเป็นต้องค้นหาว่าพวกเขาต้องการอะไรและส่งคืนผลลัพธ์ตามนั้น
Simon_Weaver

ดูคำถามของฉันค่อนข้างเกี่ยวข้อง (คนที่ทำให้ฉันที่นี่) คำถามที่stackoverflow.com/questions/482363/ …
Simon_Weaver

9
หากคุณพบคำตอบให้เชื่อมโยงกับคำถามนั้น ๆ นอกจากนี้ฉันไม่คิดว่าตรวจสอบสิ่งนี้เพราะคำตอบคือสิ่งที่ถูกต้อง
Cherian

stackoverflow.com/questions/320291/…มีความเกี่ยวข้อง
Cherian

ชื่อเต็มของคลาส Json นั้นคืออะไร
Josh Withee

112

ฉันคิดว่าคุณควรพิจารณา AcceptTypes ของคำขอ ฉันใช้มันในโครงการปัจจุบันของฉันเพื่อคืนประเภทเนื้อหาที่ถูกต้องดังนี้

การกระทำของคุณในคอนโทรลเลอร์สามารถทดสอบได้บนวัตถุคำขอ

if (Request.AcceptTypes.Contains("text/html")) {
   return View();
}
else if (Request.AcceptTypes.Contains("application/json"))
{
   return Json( new { id=1, value="new" } );
}
else if (Request.AcceptTypes.Contains("application/xml") || 
         Request.AcceptTypes.Contains("text/xml"))
{
   //
}

จากนั้นคุณสามารถใช้ aspx ของมุมมองเพื่อรองรับกรณีตอบสนอง xhtml บางส่วน

จากนั้นใน jQuery คุณสามารถดึงมันผ่านพารามิเตอร์ประเภทเป็น json:

$.get(url, null, function(data, textStatus) {
        console.log('got %o with status %s', data, textStatus);
        }, "json"); // or xml, html, script, json, jsonp or text

หวังว่านี่จะช่วยเจมส์


5
ขอบคุณ James ที่อาจมีประโยชน์มากสำหรับการสร้างเว็บไซต์และ REST API โดยใช้ Controller Actions เดียวกัน
NathanD

หากฉันมีหลายวิธีเช่นนี้ในคอนโทรลเลอร์ของฉันมีวิธีใดบ้างที่ฉันสามารถทำได้มากกว่านี้?
Seph

Json คลาสใดในเนมสเปซ การพึ่งพา project.json คืออะไร? ขอบคุณล่วงหน้า
Andrei

1
นั่นคือคลาส JsonResult จาก System.Web.Mvc (ใน System.Web.Mvc.dll) @Andrei
James Green

ขอบคุณพบแล้ว อาจอัปเดตคำตอบเพื่อสะท้อนถึง API ใหม่หรือไม่ Btw ฉันใช้ dotnet core ซึ่งเป็น Microsoft.AspNetCore.Mvc.JsonResult
Andrei

78

อีกวิธีที่ดีในการจัดการกับข้อมูล JSON คือการใช้ฟังก์ชัน JQuery getJSON คุณสามารถโทรหา

public ActionResult SomeActionMethod(int id) 
{ 
    return Json(new {foo="bar", baz="Blech"});
}

วิธีการจากวิธี jquery getJSON เพียงแค่ ...

$.getJSON("../SomeActionMethod", { id: someId },
    function(data) {
        alert(data.foo);
        alert(data.baz);
    }
);

15
นี่ไม่ได้ตอบคำถามเลย
Aaronaught

2
@Aaronaught ที่จริงแล้วส่วนแรกreturn Json(new {foo="bar", baz="Blech"});ทำ!
SparK

ยังพิจารณา $ .post stackoverflow.com/questions/751218/... (ASP.Net MVC ค่าเริ่มต้นที่จะปิดการใช้งาน JSON รับการร้องขอสำหรับเหตุผลด้านความปลอดภัย)
เกร็ก

50

ฉันพบปัญหาสองสามข้อในการใช้ MVC ajax GET กับ JQuery ทำให้ฉันปวดหัวดังนั้นการแบ่งปันโซลูชันที่นี่

  1. ตรวจสอบให้แน่ใจว่าได้รวมประเภทข้อมูล "json" ไว้ในการโทร ajax สิ่งนี้จะทำการแยกวิเคราะห์ออบเจ็กต์ JSON ที่ส่งคืนให้คุณโดยอัตโนมัติ (เนื่องจากเซิร์ฟเวอร์ส่งคืน json ที่ถูกต้อง)
  2. รวมถึงJsonRequestBehavior.AllowGet; หากไม่มี MVC นี้จะส่งคืนข้อผิดพลาด HTTP 500 (ด้วยdataType: jsonตามที่ระบุไว้ในไคลเอนต์)
  3. เพิ่ม cache: falseไปยังการโทร $ .ajax มิฉะนั้นคุณจะได้รับการตอบกลับ HTTP 304 (แทนการตอบกลับ HTTP 200) ในที่สุดและเซิร์ฟเวอร์จะไม่ประมวลผลคำขอของคุณ
  4. ในที่สุด json จะคำนึงถึงขนาดตัวพิมพ์ดังนั้นการกำหนดองค์ประกอบต้องตรงกับฝั่งเซิร์ฟเวอร์และฝั่งไคลเอ็นต์

ตัวอย่าง JQuery:

$.ajax({
  type: 'get',
  dataType: 'json',
  cache: false,
  url: '/MyController/MyMethod',
  data: { keyid: 1, newval: 10 },
  success: function (response, textStatus, jqXHR) {
    alert(parseInt(response.oldval) + ' changed to ' + newval);                                    
  },
  error: function(jqXHR, textStatus, errorThrown) {
    alert('Error - ' + errorThrown);
  }
});

ตัวอย่างรหัส MVC:

[HttpGet]
public ActionResult MyMethod(int keyid, int newval)
{
  var oldval = 0;

  using (var db = new MyContext())
  {
    var dbRecord = db.MyTable.Where(t => t.keyid == keyid).FirstOrDefault();

    if (dbRecord != null)
    {
      oldval = dbRecord.TheValue;
      dbRecord.TheValue = newval;
      db.SaveChanges();
    }
  }

    return Json(new { success = true, oldval = oldval},
                JsonRequestBehavior.AllowGet);
}

13

หากต้องการตอบคำถามอีกครึ่งหนึ่งคุณสามารถโทร:

return PartialView("viewname");

เมื่อคุณต้องการส่งคืน HTML บางส่วน คุณจะต้องหาวิธีที่จะตัดสินใจว่าคำขอนั้นต้องการ JSON หรือ HTML ซึ่งอาจขึ้นอยู่กับส่วน / พารามิเตอร์ของ URL


2
ดังนั้นคำถามยังไม่ได้รับคำตอบใช่หรือไม่
Simon_Weaver

2
นี่ไม่ได้ตอบคำถาม
Aaronaught

เขากำลังมองหาคำขอ ajax เพื่อรับ html โดยใช้ PartialView ต้องรีเฟรชหน้าเว็บเว้นแต่คุณจะคืนมุมมองจากวิธีการดำเนินการโดยใช้การโทร ajax
Chris McGrath

7

โซลูชันทางเลือกที่มีกรอบการเข้ารหัส

แอ็คชันส่งคืน json

ตัวควบคุม

    [HttpGet]
    public ActionResult SomeActionMethod()
    {
        return IncJson(new SomeVm(){Id = 1,Name ="Inc"});
    }

หน้ามีดโกน

@using (var template = Html.Incoding().ScriptTemplate<SomeVm>("tmplId"))
{
    using (var each = template.ForEach())
    {
        <span> Id: @each.For(r=>r.Id) Name: @each.For(r=>r.Name)</span>
    }
}

@(Html.When(JqueryBind.InitIncoding)
  .Do()
  .AjaxGet(Url.Action("SomeActionMethod","SomeContoller"))
  .OnSuccess(dsl => dsl.Self().Core()
                              .Insert
                              .WithTemplate(Selector.Jquery.Id("tmplId"))
                              .Html())
  .AsHtmlAttributes()
  .ToDiv())

Action ส่งคืน html

ตัวควบคุม

    [HttpGet]
    public ActionResult SomeActionMethod()
    {
        return IncView();
    }

หน้ามีดโกน

@(Html.When(JqueryBind.InitIncoding)
  .Do()
  .AjaxGet(Url.Action("SomeActionMethod","SomeContoller"))
  .OnSuccess(dsl => dsl.Self().Core().Insert.Html())
  .AsHtmlAttributes()
  .ToDiv())


4

PartialViewResult และ JSONReuslt สืบทอดมาจากคลาสฐาน ActionResult ดังนั้นหากประเภทการส่งคืนได้รับการตัดสินใจประกาศวิธีการส่งออกแบบไดนามิกเป็น ActionResult

public ActionResult DynamicReturnType(string parameter)
        {
            if (parameter == "JSON")
                return Json("<JSON>", JsonRequestBehavior.AllowGet);
            else if (parameter == "PartialView")
                return PartialView("<ViewName>");
            else
                return null;


        }


2
    public ActionResult GetExcelColumn()
    {            
            List<string> lstAppendColumn = new List<string>();
            lstAppendColumn.Add("First");
            lstAppendColumn.Add("Second");
            lstAppendColumn.Add("Third");
  return Json(new { lstAppendColumn = lstAppendColumn,  Status = "Success" }, JsonRequestBehavior.AllowGet);
            }
        }

คุณสามารถเพิ่มข้อมูลเพิ่มเติมเล็กน้อยเกี่ยวกับสิ่งนี้ได้อย่างไร
RealCheeseLord

เนื่องจากรหัสของคุณแสดงว่าเป็นคืน JSON ประเภทส่งคืนควรเป็น JsonResult ไม่ใช่ ActionResult
noobprogrammer

0

วิธีการที่ยืดหยุ่นในการผลิตผลที่แตกต่างตามคำขอ

public class AuctionsController : Controller
{
  public ActionResult Auction(long id)
  {
    var db = new DataContext();
    var auction = db.Auctions.Find(id);

    // Respond to AJAX requests
    if (Request.IsAjaxRequest())
      return PartialView("Auction", auction);

    // Respond to JSON requests
    if (Request.IsJsonRequest())
      return Json(auction);

    // Default to a "normal" view with layout
    return View("Auction", auction);
  }
}

Request.IsAjaxRequest()วิธีค่อนข้างง่าย: มันเป็นเพียงการตรวจสอบส่วนหัว HTTP สำหรับการร้องขอเข้ามาเพื่อดูว่าค่าของ X-ขอ-ด้วยส่วนหัวXMLHttpRequestซึ่งถูกผนวกโดยอัตโนมัติจากเบราว์เซอร์ส่วนใหญ่และกรอบ AJAX

วิธีการขยายที่กำหนดเองเพื่อตรวจสอบว่าการร้องขอสำหรับ json หรือไม่เพื่อให้เราสามารถโทรได้จากทุกที่เช่นเดียวกับวิธีการร้องขอ Request.IsAjaxRequest ():

using System;
using System.Web;

public static class JsonRequestExtensions
{
  public static bool IsJsonRequest(this HttpRequestBase request)
  {
    return string.Equals(request["format"], "json");
  }
}

ที่มา: https://www.safaribooksonline.com/library/view/programming-aspnet-mvc/9781449321932/ch06.html#_javascript_rendering

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.