经过一天的练习,asp.net mvc 的ajax实现起来比jquery 实现起来还简单,这里的简单是不用写过多的代码。使用ajax.beginform(),ajax.linkaction(),就可以简单实现,不过未来实现不是太乱,用了dialog.js,弹出一个简单的层,来实现添加,更新。使用到的action ,index,list,create(页面),create(添加),edit(页面),edit(编辑),delete.对应的页面及控件,index.aspx,list.ascx,create.ascx,edit.ascx。页面可以根据脚手架自动的建立,不用写太多的代码。代码的还和以前的一样,只不过是在调用的时候有些改变。
主要知识点:
ajax.bengform(),ajax.linkaction()的使用,报考的参数:
UpdateTargetId="list" 调用的结果放在list里面。
OnSuccess=“对待" 执行成功调用的js函数 还想不能加参数。
HttpMethod=“post” method 的方式。
InsertionMode=InsertionMode.InsertAfter 添加到后面,还有两种 InsertBefore,Replace(默认)
url=“” 还不太清楚具体的用法。可以把url值的内容放到更新对象里面。
LoadingElementId=“” 正在调用缓冲的时候显示的内容。
OnBegin=“”,OnComplete=“”,OnFailure=“” 这些容易里面。
 
代码如下:
index

 Code
Code
 1 <script src="http://www.cnblogs.com/Scripts/MicrosoftAjax.debug.js" type="text/javascript"></script>
 2 <script src="http://www.cnblogs.com/Scripts/MicrosoftMvcAjax.debug.js" type="text/javascript"></script>
 3  <script src="http://www.cnblogs.com/content/dialog.js" type="text/javascript"></script>
 4 <script type="text/javascript">
 5     function add() {
 6         dialog("添加栏目", "id:a1", "400px", "auto", "text");
 7     }
 8     function edit() {
 9         dialog("添加栏目", "id:a2", "400px", "auto", "text");
10     }
11     function add1() {
12         alert("添加成功");
13     }
14     function edit1() {
15         alert("修改成功");
16     }
17 </script>
18 <div class="cont">
19 <div id="show">
20 <%Html.RenderPartial("list", Model); %>
21 
22 </div>
23 <div id="a1" style="display:none;">
24 
25  </div>
26 <div id="a2" style="display:none;">
27 
28 </div>
29 <div    style="text-align:left; margin:15px;">
30 <%=Ajax.ActionLink("添加","create", new AjaxOptions{UpdateTargetId="a1",HttpMethod="get",  OnSuccess="add"}) %>
31 
32 </div>
33 </div>list.ascx
 

 Code
Code
 1  <table class="details" style="width:100%">
 2         <tr>
 3             <th></th>
 4             <th>
 5                 编号
 6             </th>
 7             <th>
 8                 标题
 9             </th>
10             <th>
11                 图片
12             </th>
13             <th>
14                 链接
15             </th>
16             
17             <th>
18                 时间
19             </th>
20         </tr>
21 
22     <% foreach (var item in Model) { %>
23     
24         <tr>
25             <td style="width:80px">
26 <%=Ajax.ActionLink("编辑","edit",new{ controller="sgame", id=item.sid }, new AjaxOptions{UpdateTargetId="a2",HttpMethod="get",  OnSuccess="edit"}) %>
27                 <%=Ajax.ActionLink("删除","delete",new{id=item.sid},new AjaxOptions{UpdateTargetId="show"}) %> 
28 
29             </td>
30             <td>
31                 <%= Html.Encode(item.sid) %>
32             </td>
33             <td>
34                 <%= Html.Encode(item.title) %>
35             </td>
36             <td>
37                 <%= Html.Encode(item.pic) %>
38             </td>
39             <td>
40                 <%= Html.Encode(item.url) %>
41             </td>
42             
43             <td>
44                 <%= Html.Encode(String.Format("{0:g}", item.adddate)) %>
45             </td>
46         </tr>
47     
48     <% } %>
49 
50     </table> 
create.ascx
 

 Code
Code
 1   <%= Html.ValidationSummary("Create was unsuccessful. Please correct the errors and try again.") %>
 2 
 3     <% using (Ajax.BeginForm("create", new AjaxOptions { UpdateTargetId="show", HttpMethod="post", OnSuccess="add1" }))
 4        {%>
 5  
 6                 <%= Html.Hidden("sid")%>
 7               <table  class="details"  ><tr><td style="width:80px"> 
 8                 <label for="title">名称:</label></td><td>
 9                 <%= Html.TextBox("title")%>
10                 <%= Html.ValidationMessage("title", "*")%>
11            </td></tr><tr><td>
12                 <label for="pic">图片:</label></td><td>
13                 <%= Html.TextBox("pic")%>
14                 <%= Html.ValidationMessage("pic", "*")%>
15              </td></tr><tr><td>
16                 <label for="url">链接:</label></td><td>
17                 <%= Html.TextBox("url")%>
18                 <%= Html.ValidationMessage("url", "*")%>
19            
20              </td></tr><tr><td colspan="2">
21                 <input type="submit" value="保存" />
22            </td></tr></table>
23         
24     <% } %>edit.ascx
 

 Code
Code
 <% using (Ajax.BeginForm("edit", new AjaxOptions { UpdateTargetId="show", OnSuccess="edit1"}))
       {%>
      
                <%= Html.Hidden("sid")%>
             <table  class="details"  ><tr><td style="width:80px">
                <label for="title">名称:</label></td><td>
                <%= Html.TextBox("title")%>
                <%= Html.ValidationMessage("title", "*")%>
           </td></tr><tr><td>
                <label for="pic">图片:</label></td><td>
                <%= Html.TextBox("pic")%>
                <%= Html.ValidationMessage("pic", "*")%>
             </td></tr><tr><td>
                <label for="url">链接:</label></td><td>
                <%= Html.TextBox("url")%>
                <%= Html.ValidationMessage("url", "*")%>
            </td></tr><tr><td>
            
                <label for="adddate">时间:</label></td><td>
                <%= Html.Encode(Model.adddate)%>
                <%= Html.ValidationMessage("adddate", "*")%>
             </td></tr><tr><td colspan="2">
                <input type="submit" value="保存" />
           </td></tr></table>
    
    <% } %>