Ajax retrieve JSON data and Html data from MVC Controllers in ASP.NET MVC

一、

准备好后台测试数据,过程略

二、客户端处理

@{
    ViewBag.Title = "Index";
}

<h2>Ajax Demo</h2>

<div style="width: 600px; ">
    <div style="background-color:lightgray">
        <h2>Meals</h2>
    </div>
    <p>Click the button to Get Meals with an Ajax call</p>
    <input id="btnAjax" name="btnAjax" type="button" value="Get Meals" />
    <div id="meals" style="background-color:lightskyblue"></div>
    <div id="jsonResult" style="background-color:lightsalmon"></div>
</div>

<div style="background-color:lightpink;display:none;" id="updateMealDiv">
    <table>
        <tr>
            <th>Name</th>
            <th>Comments</th>
            <th>Picture</th>
        </tr>
        <tr>
            <td><input type="text" id="txtName" name="txtName" /></td>
            <td><input type="text" id="txtComment" name="txtComment" /></td>
        </tr>
    </table>
    <input type="button" value="update meal" id="btnUpdateMeal" name="btnUpdateMeal">
</div>

<script type="text/javascript">
    $("#btnAjax").click(function () {
        $.ajax({
            url: ‘/AjaxDemo/GetMeal‘,
            contentType: ‘application/html; charset=utf-8‘,
            type: ‘Get‘,
            datatype: ‘html‘
        })
        .success(function (data) {
            $("#meals").html(data);
            $("#updateMealDiv").show().appendTo($("#meals"));
        })
        .error(function (xhr, status, errorThrown) {
            alert(errorThrown);
        })
    });

    $("#btnUpdateMeal").click(function () {
        var nameVal = $("#txtName").val();
        var commentVal = $("#txtComment").val();

        $.ajax({
            url: ‘/AjaxDemo/GetJsonString‘,
            data: JSON.stringify({ name: nameVal, comment: commentVal }),
            type: ‘Post‘,
            contentType: "application/json; charset=utf-8"
        })
        .success(function (data) {
            var resultStr = "<ul><li>" + data.newName + "</li><li>" + data.newComment + "</li></ul>";
            $("#jsonResult").html(resultStr);
        })
        .error(function (xhr, status, errorMsg) {
            alert(errorMsg);
        })
    });
</script>

三、Controller 处理
使用Json.stringify()来处理json字符串

 public class AjaxDemoController : Controller
    {
        private Db dbContext = new Db();
        //
        // GET: /AjaxDemo/
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult GetMeal()
        {
            Meal[] meals = dbContext.Meals.Where(m => m.Id <= 5).ToArray();
            return PartialView("GetMeals", meals);
        }

        public ActionResult GetJsonString(string name, string comment)
        {
            return Json(new { newName = name + "Luxuan", newComment = comment + "LLLLL" });
        }

        public ActionResult UpdateMeal(string mName, string comment)
        {
            IList<Meal> mealList = dbContext.Meals.ToList();
            Meal updatedMeal = mealList.Where(m => m.Name == mName).Single();
            updatedMeal.Name = mName;
            updatedMeal.Comments = comment;

            dbContext.SaveChanges();

            mealList = mealList.Where(m => m.Id <= 5).ToArray();
            return PartialView("GetMeals", mealList);
        }
    }

四、运行结果

时间: 2024-11-05 22:42:02

Ajax retrieve JSON data and Html data from MVC Controllers in ASP.NET MVC的相关文章

jq ajax传递json对象到服务端及contentType的用法

目录 0.一般情况下,通过键值对的方式将参数传递到服务端 1.ajax 传递复杂json对象到服务端 2.content-Type 对asp.net mvc项目的重要性 0.一般情况下,通过键值对的方式将参数传递到服务端 0.1 客户端代码: $.ajax({ url: 'TestHandler.ashx', type: 'post', data: { name: "admin", age: 10 }, dataType: 'text', success: function (data

ASP.NET MVC ajax处理 AjaxResult

1.统一ASPNET MVC 对ajax请求响应格式定义,方便前端统一处理ajax结果. 1)定义程序返回结果数据格式 1 /// <summary> 2 /// 执行结果 3 /// </summary> 4 /// <typeparam name="T"></typeparam> 5 public class RunResult<T> 6 { 7 /// <summary> 8 /// 操作状态 9 /// &

[Fine Uploader] 用Fine Uploader+ASP.NET MVC实现ajax文件上传[代码示例]

Fine Uploader(http://fineuploader.com/)是一个实现 ajax 上传文件的 Javascript 组件 This project attempts to achieve a user-friendly file-uploading experience over the web. It's built as a Javascript plugin for developers looking to incorporate file-uploading into

用Fine Uploader+ASP.NET MVC实现ajax文件上传[代码示例]

Fine Uploader(http://fineuploader.com/)是一个实现 ajax 上传文件的 Javascript 组件. This project attempts to achieve a user-friendly file-uploading experience over the web. It's built as a Javascript plugin for developers looking to incorporate file-uploading int

asp.net MVC之整合AJAX

本文转自 http://www.cnblogs.com/leoo2sk/archive/2008/11/03/1325840.html 摘要本文将从完成“输入数据验证”这个功能出发,逐渐展开ASP.NET MVC与Ajax结合的方法.首先,本文将使用ASP.NET MVC提供的同步方式完成数据验证.而后,将分别结合ASP.NET AJAX和JQuery将这个功能重构成异步形式. 数据验证 原来录入页面时没有数据验证的:在标题或内容没有输入的情况下仍能保存.如下图 首先,我们要修改一下Releas

jQuery Ajax请求(关于火狐下SyntaxError: missing ] after element list ajax返回json,var json = eval(&quot;(&quot;+data+&quot;)&quot;); 报错)

$.ajax({ contentType: "application/x-www-form-urlencoded;charset=UTF-8" , type: "POST", url:url, dataType: 'json', data:{}, success: function(data){ } }); 如果后台返回的是一个string类型的json串,则谷歌和IE下将它解析成string类型,而火狐下则会显示成[object xmlDocument],是一个o

ajax异步上传文件之data参数----小哈学js

下载ajaxFileUpload.js(下载网址:http://fileuploadajax.codeplex.com/downloads/get/20976) 修改ajaxFileUpload.js内部程序 1 一.大约在32行 2 createUploadForm: function(id, fileElementId,data) 3 二.大约在47行 4 jQuery(form).appendTo('body');前添加一下代码 5 if (data) { 6 for (var i in

DataTables学习:从最基本的入门静态页面,使用ajax调用Json本地数据源实现前端开发深入学习,根据后台数据接口替换掉本地的json本地数据,以及报错的处理地方,8个例子(显示行附加信息,回调使用api,动态显示和隐藏列...),详细教程

一.DataTables  个人觉得学习一门新的插件或者技术时候,官方文档是最根本的,入门最快的地方,但是有时候看完官方文档,一步步的动手写例子,总会出现各种莫名其妙的错误,需要我们很好的进行研究出错的地方. 官方网站(中文):http://datatables.club/ 官方网站:https://www.datatables.net/  二.简单的例子 怎样简单地使用DataTables?使用下方简单的几行代码,一个方法初始化table. $(document).ready(function

Struts2.5 利用Ajax将json数据传值到JSP

AJAX +JSON=>JSP AJAX AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面. JSON JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式.它基于 ECMAScript (w3c制定的js规范