• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

ASP.NET MVC中 Jquery AJAX 获取数据利用MVC模型绑定实现输出

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

     在日常项目中我们经常使用ajax ,无论是webform 还是mvc ,jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯。jquery ajax 为我们实现ajax提供了一些非常方便的实现ajax的方法。我们利用ajax返回到前台的json字符串,需要我们自己去处理解析,很多时候我们需要自己手动的去拼html 字符串 很麻烦,那么有没有简单的方法呢,在MVC中,提供了一种机制模型绑定。

     在ASP.net MVC中,使用了一种称之为“模型绑定”的机制,将模型对象与HTTP请求的数据通过Action方法的参数进行映射绑定,无论从简单的数据或者到复杂的数据结构,应付模型绑定的一切工作,MVC框架都能游刃有余。在ajax的应用中,我们如何利用这个特性呢,我们可以把数据通过模型绑定 把数据绑定到视图,然后再获取视图输出的字符串,直接输出即可。

我们首先定义一个ApplicationController 继承 Controller 。在ApplicationController中定义如下:

 1  public class ApplicationController : Controller
 2     {
 3         protected string RenderPartialViewToString(string viewName, object model)
 4         {
 5             if (string.IsNullOrEmpty(viewName))
 6                 viewName = ControllerContext.RouteData.GetRequiredString("action");
 7 
 8             ViewData.Model = model;
 9 
10             using (var sw = new StringWriter())
11             {
12                 ViewEngineResult viewResult = ViewEngines.Engines.FindPartialView(ControllerContext, viewName);
13                 var viewContext = new ViewContext(ControllerContext, viewResult.View, ViewData, TempData, sw);
14                 viewResult.View.Render(viewContext, sw);
15 
16                 return sw.GetStringBuilder().ToString();
17             }
18         }
19 
20     }


我们只需要传入视图名称,和实体数据,就可以输出我们定义好格式的字符串。

定义控制器 继承 ApplicationController

 

 1  public class HomeController : ApplicationController
 2     {
 3         private static Users _usrs = new Users();
 4  
 5         public ActionResult Index()
 6         {
 7             return View(_usrs._usrList);
 8         }
 9 
10         public ActionResult Create()
11         {
12             return View();
13         }
14 
15         [HttpPost]
16         public ActionResult Create(UserModel item)
17         {
18             _usrs.Create(item);
19             return View();
20         }
21 
22         public ActionResult Edit(string id)
23         {
24             return View(_usrs.GetUser(id));
25         }
26 
27         [HttpPost]
28         public ActionResult Edit(UserModel um)
29         {
30             _usrs.Update(um);
31             return View();
32         }
33 
34         public ActionResult About()
35         {
36             return View();
37         }
38 
39         public ViewResult Delete(string id)
40         {
41             return View(_usrs.GetUser(id));
42         }
43 
44         [HttpPost]
45         public RedirectToRouteResult Delete(string id, FormCollection collection)
46         {
47             _usrs.Remove(id);
48             return RedirectToAction("Index");
49         }
50 
51         public JsonResult Details(string id)
52         {
53             UserModel user = _usrs.GetUser(id);
54             var m = new { Status = 1, Message = "Ok", Content = RenderPartialViewToString("Details", user) };
55             return Json(m);
56         }
57       
58 
59     }


Details 方法中 我们返回一个JsonResult,调用了RenderPartialViewToString 方法。

Details 视图中定义:

   <h2>Details</h2>

    <fieldset>
        <legend>Fields</legend>
        <div class="display-label">UserName</div>
        <div class="display-field">@Model.UserName</div>
        
        <div class="display-label">FirstName</div>
        <div class="display-field">@Model.FirstName</div>
        
        <div class="display-label">LastName</div>
        <div class="display-field">@Model.LastName</div>
        
        <div class="display-label">City</div>
        <div class="display-field">@Model.City</div>
    </fieldset>

    <p>
    @Html.ActionLink("Edit", "Edit", new {  [email protected] }) |
        @Html.ActionLink("Back to List", "Index")
    </p>

 

客户端js写法(必须引入jquery文件):

<script language="javascript" type="text/javascript">
    function showDetails(id) {
        $.post("/Home/Details?> (data) {
            if (data.Status <= 0) {
                alert(data.Message);
                return;
            }
            $("#detailsinfo").html(data.Content);
        });
        }

</script>


运行结果:

直接上代码:

 点我下载

 

 

    

 

 

 

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
asp.net邮件发送,使用外部stmp服务器,呵呵!简单例子发布时间:2022-07-10
下一篇:
Mixing ASP.NET and MVC routing发布时间:2022-07-10
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap