logo标签列表

在ASP.NET MVC 4中调用JSON文件

javascriptasp.netasp.net-mvcjson
6

我开始学习ASP.NET MVC 4，做了一些小东西...

在我的首页中，我想获取一些数据的JSON文件，并将其显示在主页面上。

在简单的HTML、JavaScript中，我使用ajax来GET/POST JSON数据。

<script>
$.ajax({
     type : "GET",
     dataType : "json",
     url : "www.site.com",
     success: function(data){
           alert(data);
     }
});
</script>

我创建了一个项目，我应该在哪里调用jQuery的$.ajax命令来获取数据并显示它呢？
我需要在视图中使用jQuery语法调用吗？
如果有示例，我会很高兴看到。
4个回答
13

您可以将此代码放在一个独立的 JavaScript 文件中，然后从您的视图中引用它。例如：

<script type="text/javascript" src="~/scripts/myscript.js"></script>

在脚本内部执行 AJAX 调用：

$.ajax({
    type : "GET",
    dataType : "json",
    url : "/SomeController/SomeAction",
    success: function(data) {
        alert(data);
    }
});

您调用的控制器操作显然应该返回一个JsonResult：

public ActionResult SomeAction()
{
    var model = new
    {
        Foo = "Bar",
    }
    return Json(model, JsonRequestBehavior.AllowGet);
}

这个 JavaScript 还可以进一步改善。您可能会注意到控制器操作的硬编码 URL：

url : "/SomeController/SomeAction",

这并不好，因为您的url的模式由路由控制，如果这些路由发生变化，您还必须修改您的javascript。另外，如果您在IIS中的虚拟目录中部署应用程序，则此路径将不再考虑虚拟目录名称。

因此，建议始终使用URL助手生成到控制器操作的URL。例如，您可以将其存储在视图中的全局javascript变量中：

<script type="text/javascript">
    var myActionUrl = '@Url.Action("SomeAction", "SomeController")';
</script>
<script type="text/javascript" src="~/scripts/myscript.js"></script>

然后在您的JavaScript文件中使用这个变量：

$.ajax({
    type : "GET",
    dataType : "json",
    url : myActionUrl,
    success: function(data) {
        alert(data);
    }
});
还有一个问题是 var model = new {} 这是什么意思，因为我是新手...请告诉我 @Darin Dimitrov - user7918630
2

请尝试以下操作

控制器(Controller)

public class JsonController : Controller
{
    public ActionResult Simple()
    {
        return View();
    }

    public JsonResult SimpleJson()
    {
        var persons = new List<Person>
        {
            new Person{Id=1, FirstName="Harry", LastName="Potter"},
            new Person{Id=1, FirstName="James", LastName="Potter"}
        };

        return Json(persons, JsonRequestBehavior.AllowGet);
    }
}

public class Person
{
    public int Id { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
}

在 simple.aspx 视图中

<head runat="server">
    <meta name="viewport" content="width=device-width" />
    <title>Simple</title>
    <script src="../../Scripts/jquery-2.0.3.intellisense.js"></script>
    <script src="../../Scripts/jquery-2.0.3.js"></script>
    <script src="../../Scripts/jquery-2.0.3.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#FillButton').click(function () {
                $.getJSON("/Json/SimpleJson", null, function (data) {
                    var div = $('#ajaxDiv');
                    $.each(data, function (i, item) {
                        div.append("<br /><br />First Name: " + item.FirstName);
                        div.append("<br />Last Name: " + item.LastName);
                    });
                });
            });
        });
    </script>


    <div>
          <div id="ajaxDiv">
        </div>
       <input id="FillButton" type="button" value="Get Persons" />        
    </div>
1

您需要在视图中进行ajax调用，只需调用返回json数据的MVC url并对该数据进行操作。

<script>
$.ajax({
 type : "GET",
 dataType : "json",
 url : "www.site.com/{controller}/{action}/{id}",
 success: function(data){
       alert(data);
 }
});
</script>

在ajax调用中，传递控制器、操作和id部分（如果适用）。希望这能帮到你。
1
您可以从视图中调用ajax函数，例如以下方式。
    var oModel = {};
    oModel.Id = $('#hiddenid').val();
    oModel.Name = $('#hiddenName').val();;  

      $.ajax({
            url: "/SomeController/SomeActionMethod",
            type: "POST",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(oModel),
        }).done(function (data) {
            alert(JSON.stringify(data));
        });

并且您需要在您的控制器中创建一个名为 "SomeActionMethod" 的方法，如下所示：

    [HttpGet]
    public ActionResult SomeActionMethod(oModel oVarModel)
    {
         //Do some stuff

        return someReturn;
    }

希望这可以帮助到您。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接