2009-02-08 127 views
1

我對用戶控件有點問題。基本上我想要完成的是以下內容:Ajax.BeginForm,用戶控件和更新內容

  1. 我有編輯發票的視圖。
  2. 在這個觀點我有發票項目列表的用戶控件
  3. 我也有一個與jQuery的激活添加新的發票項目
  4. 當我添加發票項目我想刷新只是一個div用戶控制項目列表

我該怎麼做這個沒有黑客?這是我想的是以下幾點:

[AcceptVerbs(HttpVerbs.Post), ValidateAntiForgeryToken] 
public ActionResult Create(InvoiceLine line) 
{ 
if (Request.IsAjaxRequest()) 
{ 
    if (!ModelState.IsValid) 
    { 
     return PartialView("CreateLineControl", product); 
    } 
}   
return PartialView("DisplayLinesControl", product); 
} 

回答

0

首先,你會叫一個aspx頁面瓦特/ jQuery的(我們將使用一個HTTP處理程序,我們將在下面的web.config文件映射,以後會更多)

的基本想法是,我們要在服務器端呈現用戶控件作爲XHTML和轉儲這一「更新」標記回到我們的成功方法的DOM(客戶端)

$.ajax({ 
    type: "GET", 
    url: "UserDetails.aspx?id=" + id, 
    dataType: "html", 
    error: function(XMLHttpRequest, textStatus, errorThrown) 
    { 
     alert(XMLHttpRequest.responseText); 
    }, 
    success: function(xhtml) 
    { 
     var container = document.createElement('div'); 

     container.innerHTML = xhtml; 

     document.getElementById('someElement').appendChild(container); 
    } 
}); 

下面的方法是我曾經通過HttpHandler來利用用戶控件重用兩個Ajax和.NET工作控制

下面做W/.NET 1.1(但我相信你能做到這一點在.NET 2.0+) 下面的類實現IHttpHandler的,而真正的工作是在處理請求子文件中,您可以看到下面的代碼

我當時遇到的唯一問題是,asp.net控件無法在用戶 控件中呈現w/out窗體標記,所以我使用普通html和一切都很好

Public Class AJAXHandler 

    Implements IHttpHandler 

    Public ReadOnly Property IsReusable() As Boolean Implements System.Web.IHttpHandler.IsReusable 
     Get 
      Return False 
     End Get 
    End Property 

    Public Sub ProcessRequest(ByVal context As System.Web.HttpContext) Implements System.Web.IHttpHandler.ProcessRequest 
     Dim Request As System.Web.HttpRequest = context.Request 
     Dim path As String = Request.ApplicationPath 
     Dim newHtml As String 
     Dim pg As New System.Web.UI.Page 

     context.Response.Cache.SetCacheability(HttpCacheability.NoCache) 
     context.Response.ContentType = "text/html" 

           Dim uc As New UserDetail 
           uc = CType(pg.UserControl(path + "/Controls/UserDetail.ascx"), UserDetail) 
           Dim sb As New System.Text.StringBuilder 
           Dim sw As New System.IO.StringWriter(sb) 
           Dim htmlTW As New HtmlTextWriter(sw) 

           uc.LoadPage(custid, CType(pro, Integer)) 
           uc.RenderControl(htmlTW) 
           context.Response.Write(sb.ToString()) 
           context.Response.End() 

    End Sub 


End Class 

最後在你的web.config中,你需要定義處理程序並將其映射到你在Ajax調用

<system.web> 
    <httpHandlers> 
     <add verb="*" path="UserDetails.aspx" type="project.AJAXHandler, project" /> 
    </httpHandlers> 
    </system.web> 

上市現在,可以調用與UserDetails.aspx用戶控制和呈現用戶控制爲HTML ASPX路徑。然後你呈現此之後,它會返回HTML(是到Response.End調用後)

然後在JavaScript,你可以找到父DOM元素,用戶控件,刪除和添加或innerHTML的這個新的HTML

更新

上面是我用webforms的解決方案,但與MVC下面將產生相同的結果與更少的工作。

jQuery的功能是相同的,但在服務器端,你會簡單地創建一個新的控制器動作+ PartialView瓦特/你想要的標記(基本上是一個用戶控件)

Function Edit(ByVal id As Integer) As ActionResult 
    Dim User As User = UserService.GetUserById(id) 

    Return PartialView("User", User) 
End Function 

現在我的ascx我裏面只需呈現html,這就是發回給容器的瀏覽器的內容。innerHTML的工作(同樣的客戶端代碼是兩個MVC和在這種情況下Web表單相同)

<%@ Control Language="VB" Inherits="System.Web.Mvc.ViewUserControl(Of User)" %> 
<% Dim User As User = DirectCast(Model, User)%> 
<div id="innerDetail"> 
    <label for='username'>Username</label> 
    <input type="text" id='username' name='username' value="<%= User.Username %>" /><br /> 

    <a id='lnkUpdate' href='/Application/User.aspx/Edit/<%= User.ID %>' onclick='UpdateUser(this); return false;'>Update User Information</a> 
    <span id='lblUpdateStatus' style='display: inline;'></span> 
    </div> 
</div> 

這個作品在MVC更少的代碼的原因是,我們沒有解決頁面生命週期這對於webforms中的普通aspx文件是必需的。

+0

這是一個非常好的解決方案。我還沒有時間去玩。將在此回覆你。時間飛逝:) – mhenrixon 2009-02-23 07:46:44