Ajax.BeginForm、用户控件和更新某些内容

Question

我在用户控件方面有一点问题。基本上，我想要做的是：

1. I有一个编辑发票的视图，在这个视图中，有一个带有发票项列表的用户控件
2. ，在添加发票项时，使用jQuery激活了一个div，以添加新的发票项
3. ，我只想用

的列表刷新用户控件。

如果没有黑客我怎么做？我在想的事情如下：

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

Answer 1

首先，您将调用aspx页面w/ jQuery (我们将使用在下面的web.config中映射的http处理程序，稍后将详细介绍)

基本思想是，我们希望服务器端将用户控件呈现为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，真正的工作是在下面的process中完成

当时我唯一的问题是，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调用中列出的aspx路径。

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

现在，您可以用UserDetails.aspx调用用户控件，并将用户控件呈现为html。然后，在呈现这个之后，它将返回html (在调用response.end之后)。

然后，在javascript中，您可以找到用户控件的父DOM元素，删除它并追加或innerHTML这个新的html。

更新

上面是我在webforms中使用的解决方案，但是使用MVC，下面的结果将是相同的，而且工作量要少得多。

jQuery函数是相同的，但是在服务器端，您只需创建一个新的控制器操作+ PartialView w/您想要的标记(基本上是一个用户控件)。

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

    Return PartialView("User", User)
End Function

现在，在我的ascx中，我只呈现html，这就是发送回浏览器进行container.innerHTML工作的内容(同样，在这个场景中，客户端代码对于MVC和Webforms都是相同的)。

<%@ 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中使用的代码要少得多，原因是我们不必围绕we表单中的普通aspx文件所需的页面生命周期进行工作。