码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-08-27 16:25:48      阅读:203      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   os   java   使用   io   ar   

一、

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

 

二、客户端处理

bubuko.com,布布扣
@{
    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>
View Code

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

bubuko.com,布布扣
 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);
        }
    }
View Code

四、运行结果

bubuko.com,布布扣

 

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

标签:style   blog   http   color   os   java   使用   io   ar   

原文地址:http://www.cnblogs.com/Luxuan/p/3939503.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!