c# - ejemplos - peticiones ajax desde asp net mvc

Postback en UserControl de ASP.NET cargado con jQuery

Question

Estoy usando este WebService y Class para renderizar UserControl y cargarlo dinámicamente con jQuery:

using System;
using System.Collections.Generic;
using System.IO;
using System.Reflection;
using System.Text.RegularExpressions;
using System.Web;
using System.Web.Script.Services;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.HtmlControls;

namespace TestJQueryAjax
{
    public class KeyVal
    {
        public string Key { set; get; }
        public object Value { set; get; }
    }

    /// <summary>
    /// Summary description for Ajax
    /// </summary>
    [ScriptService]
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    public class Ajax : WebService
    {
        /// <summary>
        /// Removes Form tags using Regular Expression
        /// </summary>
        private static string cleanHtml(string html)
        {
            return Regex.Replace(html, @"<[/]?(form)[^>]*?>", string.Empty, RegexOptions.IgnoreCase);
        }
        [WebMethod(EnableSession = true)]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public string RenderUserControl(string path,
              List<KeyVal> properties)
        {
            Page pageHolder = new Page();

            UserControl viewControl =
               (UserControl)pageHolder.LoadControl(path);

            viewControl.EnableViewState = false;

            Type viewControlType = viewControl.GetType();

            if (properties != null)
                foreach (var pair in properties)
                {
                    if (pair.Key != null)
                    {
                        PropertyInfo property =
                            viewControlType.GetProperty(pair.Key);

                        if (property != null)
                        {
                            if (pair.Value != null) property.SetValue(viewControl, pair.Value, null);
                        }
                        else
                        {
                            throw new NotImplementedException(string.Format(
                                                                  "UserControl: {0} does not have a public {1} property.",
                                                                  path, pair.Key));
                        }
                    }
                }

            //Form control is mandatory on page control to process User Controls
            HtmlForm form = new HtmlForm();

            //Add user control to the form
            form.Controls.Add(viewControl);

            //Add form to the page 
            pageHolder.Controls.Add(form);

            //Write the control Html to text writer
            StringWriter textWriter = new StringWriter();

            //execute page on server 
            HttpContext.Current.Server.Execute(pageHolder, textWriter, false);

            // Clean up code and return html
            return cleanHtml(textWriter.ToString());
        }
    }
}

y aquí está el complemento que proporciona para cargar usercontrol;

$.fn.advloaduc = function(options) {
    var defaults = {
        webServiceName: ''Ajax.asmx'', //Web Service name
        renderUCMethod: ''RenderUserControl'', //web service method
        ucMethodJsonParams: ''{path:/'/'}'', //parameters
        completeHandler: null //complete handler
    };
    var options = $.extend(defaults, options);

    return this.each(function() {
        var obj = $(this);
        obj.prepend("<div align=''center''> loading... <img src=/"images/loading.gif/"/></div>");

        $.ajax({
            type: "POST",
            url: options.webServiceName + "/" + options.renderUCMethod,
            data: options.ucMethodJsonParams,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success:
                    function(msg) {
                        obj.html(msg.d);

                        // if specified make callback and pass element
                        if (options.completeHandler)
                            options.completeHandler(this);
                    },
            error:
                    function(XMLHttpRequest, textStatus, errorThrown) {
                        obj.html("error");
                    }
        });
    });
};

entonces ambos códigos funcionan bien con esta muestra:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/jquery.advloaduc.js" type="text/javascript"></script>
    <script src="js/json2.js" type="text/javascript"></script>

    <script type="text/javascript">
        function showAlert() {
            alert(''finished!'');
        }

        var fileName = ''part1.ascx'';
        var props = [{ ''Key'': ''Text1'', ''Value'': ''test1'' }, { ''Key'': ''Text2'', ''Value'': ''test2''}];

        var jsonText = JSON.stringify({ path: fileName, properties: props });

        $(document).ready(function() {
            $("#loadMyUc").advloaduc({
                webServiceName: ''Ajax.asmx'',
                renderUCMethod: ''RenderUserControl'',
                ucMethodJsonParams: jsonText,
                completeHandler: showAlert
            });
        });

    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div id="loadMyUc" align="center">
    </div>
    </form>
</body>
</html>

Pero quiero realizar acciones de Postback y servidor en Loaded UserControl. Es posible ? cuando realizo la devolución de datos en usercontrol cargado, ocurre el error: Viewstate está dañado ¿existe alguna forma de hacerlo? ¿Es necesario cargar la muestra con este código para una mejor revisión?

Answer 1

Sin renderizar inicialmente el UserControl dentro del ciclo de vida de la página estándar, los eventos de devolución de datos no pueden procesarse correctamente: su servicio web no realizará un seguimiento de ViewState de una manera que esté disponible para el resto del contexto de AppDomain.

Es una solución bastante elaborada que tiene aquí, pero puede ser más simple para 1. manejar manualmente AJAX desde el servicio web o 2. incluir (dinámicamente o no) una instancia de UserControl en la página y usar jQuery para colocarla en la página .

Y por mucho que no me guste recomendar UpdatePanels, esta puede ser una opción para evitar tener que volver a escribir UserControl para usar AJAX en lugar del modelo tradicional de devolución posterior, pero aún así le doy la versatilidad de cargar dinámicamente el UserControl.