Ajax.BeginForm, пользовательский контроль и обновление чего-либо

Question

У меня небольшая проблема с пользовательскими элементами управления. По сути, я хочу сделать следующее:

1. У меня есть вид для редактирования счета.
2. В этом представлении у меня есть пользовательский контроль со списком пунктов счета
3. У меня также есть div, который активируется с помощью jQuery для добавления нового элемента счета
4. Когда я добавляю элемент счета-фактуры, я хочу обновить только пользовательский элемент управления списком элементов

Как бы я сделал это без хаков? Я думал о следующем:

[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 с 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

Ниже было сделано с .NET 1.1 (но я уверен, что вы можете сделать это в .NET 2.0+) класс ниже реализует IHttpHandler, и реальная работа находится в подпрограмме запроса процесса, как вы можете видеть ниже

Единственная проблема, с которой я столкнулся в то время, заключалась в том, что элементы управления asp.net не отображали без тега формы пользователя контроль, поэтому я использовал обычный 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 вам нужно определить обработчик и сопоставить его с aspx-путем, который вы указали при вызове ajax

  <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

Обновление

Выше приведено решение, которое я использовал с веб-формами, но с 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, и это то, что отправляется обратно в браузер для работы container.innerHTML (опять-таки, код на стороне клиента одинаков для MVC и веб-форм в этом сценарии)

<%@ 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, заключается в том, что нам не нужно обходить жизненный цикл страницы, который требуется с обычным файлом aspx в веб-формах.