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

在asp.net mvc模式中使用PartialView返回部分HTML

时间:2014-10-02 20:16:13      阅读:218      评论:0      收藏:0      [点我收藏+]

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

PartialView(返回HTML(局部))

在asp.net mvc中返回View时使用的是ViewResult,它继承自ViewResultBase 同时它还有个兄弟PartialViewResult 

相信聪明的你已经知道了它俩的区别了,没错 一个用于返回整体,另一个返回局部(部分)。 

假设我有这样一个需求,输入用户名,然后返回相关信息。之前的做法可能会是用json格式来返回用户的相关信息,然后到页面去渲染相关的HTML,如果产生的相关HTML比较大的话,我还是建议你沿用之前的方案(返回json),因为传输的数据少,响应快一些。 

反之,PartialViewResult 则是返回部分HTML 的不错选择。

下面就让我们看下如何使用PartialViewResult: 

Layout.cshtml

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>@ViewBag.Title</title>
 5     <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
 6 </head>
 7    <body>
 8 
 9       @RenderBody()
10 
11    </body>
12 </html>

 

Index.cshtml

 

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>PartialView Demo</h2>

<div>
    Please write your name here
    <input type=‘text‘ id=‘txtName‘ />
    <input type=‘button‘ value=‘submit‘ id=‘btnOK‘ />
</div>
<br />
<div id=‘content‘>
</div>

<script type="text/javascript">
    $(function () {
        $(#btnOK).click(function () {
            var data = { Name: $(#txtName).val()};
            $.ajax({
                type: "POST",
                url: @Url.Action("PartialViewDemo", "Home"),
                data: data,
                datatype: "html",
                success: function (data) {
                        $(#content).html(data);
                },
                error: function () {
                    alert("处理失败!");
                }
            });
        });
    });
</script>

 

ViewUserControl.cshtml (Partial View)

 1 @model Sample.Models.PartialViewDemoViewModel 
 2 
 3 <div>
 4 
 5 <h2>ViewUserControl.cshtml</h2> 
 6 
 7 @Model.dt<br /><br />
 8 
 9 Hello~  @Model.Name
10 
11 </div>

 

or ViewUserControl.ascx

 1 <%@ Control Language="C#"Inherits="System.Web.Mvc.ViewUserControl<Vancl.Sample.Models.PartialViewDemoViewModel>" %>
 2 
 3 <div>
 4 <h2>ViewUC.ascx</h2> 
 5 
 6 <%=Model.dt %><br /><br />
 7 
 8 Hello~  <%=Model.Name %>
 9 
10 </div>


 

Model

 

1 public class PartialViewDemoViewModel
2 
3 {
4 
5         public string Name { set; get; }
6 
7         public DateTime? dt { set; get; }
8 
9 }

Action

 

1 [HttpPost]
2 public ActionResult PartialViewDemo(PartialViewDemoViewModel model)
3 {
4      model.dt = DateTime.Now;
5      return PartialView("ViewUserControl", model); 
6 
7      //return PartialView("ViewUC", model); 
8 }

 

调用 Controller.PartialView方法时,可以指定 Partial View or View User Control 效果是一样的 

不写后缀时,会查找同目录和Shared目录下的文件,也就是在同目录或Shared目录下时可以省略后缀名。 

如果目录下存在同名的情况,会找第一个并返回。 

eg: 同目录下有 ViewUserControl.ascx 和 ViewUserControl.cshtml 

这时使用 return PartialView("ViewUserControl"); 

会返回 ViewUserControl.ascx 的内容,因为字母a在c前 :) 

如果在这种情况下想调用 ViewUserControl.cshtml 

则需要写全路径,return PartialView("~/Views/Home/ViewUserControl.cshtml"); 

当想访问的 Partial View or View User Control 在不同目录时,也可以通过全路径的方式访问。

 

在asp.net mvc模式中使用PartialView返回部分HTML

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

原文地址:http://www.cnblogs.com/abc1069/p/4004256.html

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