none
MVC4, Partial View, Formulario de Consulta / Renderização Grid RRS feed

  • Pergunta

  • Ola,

    Estou tentado fazer algo simples que se tornou complexo.

    Eu tenho uma view bem simples:

    @using (Html.BeginForm("Rechercher", "Client", FormMethod.Post))
    {
        <fieldset>
            @Html.Label("Nom:")
            @Html.TextBox("Nom")
            <input type="submit" id="recherche" value="recherche_simple" />
        </fieldset>
    }
    
    <div id="grid">
        @Html.Partial("ClientGrid");
    </div>

    minha partial view (Client Grid)

    @model IEnumerable<SC_SGC.ViewModels.Client>
    @{
        ViewBag.Title = "ClientGrid";
    }
    <h2>ClientGrid</h2>
    @if (Model != null)
    {
        <table>
    
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.cp12)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.nomComplet)
                </th>
                <th></th>
            </tr>
            @foreach (var item in Model)
            {
                        <tr>
                            <td>
                                @Html.DisplayFor(modelItem => item.cp12)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.nomComplet)
                            </td>
                        </tr>
            }
        </table>
    }
    else
    {
        <h1>
            <b>Vide!</b>
        </h1>
    }


    Meu controle:

      public PartialViewResult ClientGrid()
            {
                return PartialView("GridClients");
            }
    
            public PartialViewResult ClientGrid(IEnumerable<SC_SGC.Models.Client> clients)
            {
                return PartialView("GridClients", clients);
            }
    
            public ActionResult Rechercher(SC_SGC.ViewModels.ClientSearchModel model)
            {
                IEnumerable<SC_SGC.Models.Client> clients = dbContext.Clients.Where(p => p.prenom.Contains(model.nom) || p.nom.Contains(model.nom)).AsEnumerable();
                
                AutoMapper.Mapper.CreateMap<SC_SGC.Models.Client, SC_SGC.ViewModels.Client>();
                IEnumerable<SC_SGC.ViewModels.Client> clientsview = AutoMapper.Mapper.Map<IEnumerable<SC_SGC.Models.Client>, IEnumerable<SC_SGC.ViewModels.Client>>(clients);
                return PartialView("GridClients", clientsview );
            }

    O que ocorre: Quando eu clic no submit é renderizado um novo form.. Eu gortaria de renderizar somente :

    @Html.Partial("ClientGrid");

    ou seja, que quando o submit fosse enviado, somente o techo acima fosse renderizado.

    Eu creio que isso nao seja complicado de fazer. Vi exemplos complexo usando JavaScript, mas eu quero antes tentar uma soluçao pura. Se não for possivel, entao eu parto para uma soluçao JS.

    Obrigado


    William John Adam Trindade
    Analyste-programmeur
    ----------------------------------------------------------

    Sogi informatique ltée





    domingo, 18 de novembro de 2012 20:23
    Moderador

Respostas

  • William, acredito que você possa utilizar o Ajax.BeginForm com a própriedade UpdateTargetId:

    @using (Ajax.BeginForm("Rechercher", "Client", new AjaxOptions { UpdateTargetId = "grid", InsertionMode = InsertionMode.Replace}))
    {
        <fieldset>
            @Html.Label("Nom:")
            @Html.TextBox("Nom")
            <input type="submit" id="recherche" value="recherche_simple" />
        </fieldset>
    }
    
    <div id="grid">
        @Html.Partial("ClientGrid");
    </div>

    e na sua action você retorna os clients caso o post tenha sido feito com ajax(se o cliente desativar o js, então a página será recarrega):

    public ActionResult Rechercher()
    {
        ///ModelState.IsValid
        if (Request.IsAjaxRequest())
        {
            return PartialView("gridClients" listaDosClients);
        }
       //etc
    }

    Ou seja, o post será feito via ajax e o retorno será o código html da partial, e este retorno será atualizado dentro da div "grid".


    http://www.linkedin.com/pub/murilo-kunze/44/191/455

    domingo, 18 de novembro de 2012 23:18

Todas as Respostas

  • William, acredito que você possa utilizar o Ajax.BeginForm com a própriedade UpdateTargetId:

    @using (Ajax.BeginForm("Rechercher", "Client", new AjaxOptions { UpdateTargetId = "grid", InsertionMode = InsertionMode.Replace}))
    {
        <fieldset>
            @Html.Label("Nom:")
            @Html.TextBox("Nom")
            <input type="submit" id="recherche" value="recherche_simple" />
        </fieldset>
    }
    
    <div id="grid">
        @Html.Partial("ClientGrid");
    </div>

    e na sua action você retorna os clients caso o post tenha sido feito com ajax(se o cliente desativar o js, então a página será recarrega):

    public ActionResult Rechercher()
    {
        ///ModelState.IsValid
        if (Request.IsAjaxRequest())
        {
            return PartialView("gridClients" listaDosClients);
        }
       //etc
    }

    Ou seja, o post será feito via ajax e o retorno será o código html da partial, e este retorno será atualizado dentro da div "grid".


    http://www.linkedin.com/pub/murilo-kunze/44/191/455

    domingo, 18 de novembro de 2012 23:18
  • Obrigado Murilo,

    Só que nao entrou no if:

     if (Request.IsAjaxRequest())
        {
            return PartialView("gridClients" listaDosClients);
        }

    Usei o mesmo codigo para view que vc postou.

    Inspencionando request eu obtive:

    {System.Web.HttpRequestWrapper}
        [System.Web.HttpRequestWrapper]: {System.Web.HttpRequestWrapper}
        AcceptTypes: {string[4]}
        AnonymousID: null
        ApplicationPath: "/"
        AppRelativeCurrentExecutionFilePath: "~/Client/Rechercher"
        Browser: {System.Web.HttpBrowserCapabilitiesWrapper}
        ClientCertificate: {System.Web.HttpClientCertificate}
        ContentEncoding: {System.Text.UTF8Encoding}
        ContentLength: 11
        ContentType: "application/x-www-form-urlencoded"
        Cookies: {System.Web.HttpCookieCollection}
        CurrentExecutionFilePath: "/Client/Rechercher"
        CurrentExecutionFilePathExtension: ""
        FilePath: "/Client/Rechercher"
        Files: {System.Web.HttpFileCollectionWrapper}
        Filter: {System.Web.HttpInputStreamFilterSource}
        Form: {Nom=William}
     
        HttpChannelBinding: {System.Web.HttpChannelBindingToken}
        HttpMethod: "POST"
        InputStream: {System.Web.HttpInputStream}
        IsAuthenticated: true
        IsLocal: true
        IsSecureConnection: false
        LogonUserIdentity: {System.Security.Principal.WindowsIdentity}
      
        Path: "/Client/Rechercher"
        PathInfo: ""
        PhysicalApplicationPath: "C:\\Sources\\StrategieCarriere\\SC_SGC\\SC_SGC\\"
        PhysicalPath: "C:\\Sources\\StrategieCarriere\\SC_SGC\\SC_SGC\\Client\\Rechercher"
        QueryString: {}
        RawUrl: "/Client/Rechercher"
        ReadEntityBodyMode: Classic
        RequestContext: {System.Web.Routing.RequestContext}
        RequestType: "POST"
     
        TimedOutToken: IsCancellationRequested = false
        TotalBytes: 11
        Unvalidated: {System.Web.UnvalidatedRequestValuesWrapper}
        Url: {http://localhost:12082/Client/Rechercher}
        UrlReferrer: {http://localhost:12082/Client/ListAll}
        UserAgent: "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.19 (KHTML, like Gecko) Chrome/25.0.1323.1 Safari/537.19"
        UserHostAddress: "127.0.0.1"
        UserHostName: "127.0.0.1"
        UserLanguages: {string[7]}


    Masi uma vez, obrigado


    William John Adam Trindade
    Analyste-programmeur
    ----------------------------------------------------------

    Sogi informatique ltée


    domingo, 18 de novembro de 2012 23:36
    Moderador
  • Você está incluindo o jquery.unobtrusive-ajax.js?

    http://www.linkedin.com/pub/murilo-kunze/44/191/455

    domingo, 18 de novembro de 2012 23:53
  • Nao.. Estava verificando isso.. Eu pensei que era incluido por padrao em projetos MVC4.

    Aparentemente funciona.. 

    Agora estou vendo se funciona com o Grid da Telerik (Kendo UI grid). Aparentemente tem um problema com a paginaçao, mas creio que seja um problema do controle. Quando clico no controle para avançar ele faz um post, e eu perco tudo:

    depois do clique, o modelo fica nulo, como se fosse um novo submit.

    Grato mais uma vez


    William John Adam Trindade
    Analyste-programmeur
    ----------------------------------------------------------

    Sogi informatique ltée

    segunda-feira, 19 de novembro de 2012 00:05
    Moderador