asp.net mvc ajax实现1

经过一天的练习，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

 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");
     }
     function add1() {
         alert("添加成功");
     }
     function edit1() {
         alert("修改成功");
     }
 </script>
 <div class="cont">
 <div id="show">
 <%Html.RenderPartial("list", Model); %>
 
 </div>
 <div id="a1" style="display:none;">
 
  </div>
 <div id="a2" style="display:none;">
 
 </div>
 <div    style="text-align:left; margin:15px;">
 <%=Ajax.ActionLink("添加","create", new AjaxOptions{UpdateTargetId="a1",HttpMethod="get",  OnSuccess="add"}) %>
 
 </div>
 </div>

list.ascx

 

 1  <table class="details" style="width:100%">
 2         <tr>
 3             <th></th>
 4             <th>
 5                 编号
 6             </th>
 7             <th>
 8                 标题
 9             </th>
             <th>
                 图片
             </th>
             <th>
                 链接
             </th>
             
             <th>
                 时间
             </th>
         </tr>
 
     <% foreach (var item in Model) { %>
     
         <tr>
             <td style="width:80px">
 <%=Ajax.ActionLink("编辑","edit",new{ controller="sgame", id=item.sid }, new AjaxOptions{UpdateTargetId="a2",HttpMethod="get",  OnSuccess="edit"}) %>
                 <%=Ajax.ActionLink("删除","delete",new{id=item.sid},new AjaxOptions{UpdateTargetId="show"}) %> 
 
             </td>
             <td>
                 <%= Html.Encode(item.sid) %>
             </td>
             <td>
                 <%= Html.Encode(item.title) %>
             </td>
             <td>
                 <%= Html.Encode(item.pic) %>
             </td>
             <td>
                 <%= Html.Encode(item.url) %>
             </td>
             
             <td>
                 <%= Html.Encode(String.Format("{0:g}", item.adddate)) %>
             </td>
         </tr>
     
     <% } %>
 
     </table>

 

create.ascx

 

 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")%>
                 <%= 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 colspan="2">
                 <input type="submit" value="保存" />
            </td></tr></table>
         
     <% } %>

edit.ascx

 

 <% 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>
    

    <% } %>