none
Ajax Asp.net mvc razor RRS feed

  • Pergunta

  • Galera!

    Estou tentando usar o ajax no projeto mvc no qual estou trabalhando..

    eu adicionei os seguin tes arquivos na aplicaçao :

    microsoftAjax;

    microsoftMvcAjax

     

    e depois fiz o seguinte codigo em tutoriais que achei na internet :

    @Ajax.ActionLink(

    "laaaaaaaa", "DetalhesDoProcesso/TesteAjax", new AjaxOptions

    ()

    {

    InsertionMode = System.Web.Mvc.Ajax.

    InsertionMode

    .Replace,

    UpdateTargetId =

    "BarraInformacoes"

    ,

    })

    

    Mas a pagina continua dando post...

    

    alguem poderia me ajudar?

    

    Obrigada desde já.


    Luana - Programadora Junior
    segunda-feira, 11 de abril de 2011 12:29

Respostas

  • Olá Luana!

    Para criar um formulário Ajax com ASP.NET MVC, siga esses passos:

    • Verifique se seu web.config habilitou Javscript Não instrusivo

     

    <appSettings>
      <add key="ClientValidationEnabled" value="true"/>
      <add key="UnobtrusiveJavaScriptEnabled" value="true"/>
    </appSettings>

     

    • Crie uma view:

     

    <div name="emailDialog">
     
        @using (Ajax.BeginForm(new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "emailDialog" }))
        {
            @Html.ValidationSummary(true)
            <fieldset>
                <div class="editor-label">
                    @Html.LabelFor(model => model.FromName)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.FromName)
                    @Html.ValidationMessageFor(model => model.FromName)
                </div>
     
                <div class="editor-label">
                    @Html.LabelFor(model => model.FromEmail)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.FromEmail)
                    @Html.ValidationMessageFor(model => model.FromEmail)
                </div>
     
                <div class="editor-label">
                    @Html.LabelFor(model => model.ToName)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.ToName)
                    @Html.ValidationMessageFor(model => model.ToName)
                </div>
     
                <div class="editor-label">
                    @Html.LabelFor(model => model.ToEmail)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.ToEmail)
                    @Html.ValidationMessageFor(model => model.ToEmail)
                </div>
                <p style="margin-top8px;">
                    <input type="submit" value="Enviar" />
                </p>
            </fieldset>
        }
     
    </div>

     

    • Crie seu controlador:

     

            public ActionResult EmailUserControl(string url)
            {
                return PartialView();
            }
     
            [HttpPost]
            public ActionResult EmailUserControl(string url, EmailModel email)
            {
                if (!ModelState.IsValid)
                    return PartialView(email);
     
                return PartialView("ObrigadoUserControl", email);
            }
    • Inclusa esses scripts na sua view de layout:

     

        <script type="text/javascript" language="javascript" src="@Url.Content("/Scripts/jquery-1.4.4.min.js")"></script>
        <script type="text/javascript" language="javascript" src="@Url.Content("/Scripts/jquery.validate.min.js")"></script>
        <script type="text/javascript" language="javascript" src="@Url.Content("/Scripts/jquery.validate.unobtrusive.min.js")"></script>
        <script type="text/javascript" language="javascript" src="@Url.Content("/Scripts/jquery.unobtrusive-ajax.min.js")"></script>
        <script type="text/javascript" language="javascript" src="@Url.Content("/Scripts/MicrosoftAjax.js")"></script>
        <script type="text/javascript" language="javascript" src="@Url.Content("/Scripts/MicrosoftMvcAjax.js")"></script>

     

    Bons códigos!

    Abraços


    MCPD, MCSD, MCAD, MCDBA, MCP e colaborador do 100loop.com
    segunda-feira, 11 de abril de 2011 16:50

Todas as Respostas

  • Prezado(a),

    Estou migrando seu post para o fórum de ASP.NET.

    Por favor, das próximas vezes que tiver alguma dúvida relacionada a esse assunto, poste por lá.

    Obrigado pelo apoio.


    André Alves de Lima
    Microsoft MVP - Client App Dev
    Visite o meu site: http://www.andrealveslima.com.br
    Me siga no Twitter: @andrealveslima
    segunda-feira, 11 de abril de 2011 13:23
  • Vc já tentou parcial post? vou passar para o forum de mvc
    Não esqueça de usar o componente </> na barra para posta seu código.
    segunda-feira, 11 de abril de 2011 13:56
  • Ola Luanadev,

    Você está utilizando o MVC3? Vou assumir que sim, ok? Para que sua validação funcione, você deve adicionar a seguitne referência a sua view:

    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
    

    Além disto, no web.config, o javascript não intrusivo deve estar setado como true da seguinte forma:

    <configuration>
      <appSettings>    
    <
    add key="UnobtrusiveJavaScriptEnabled" value="true"/>    <!-- outra chaves que você necessite -->
    </
    appSettings> </configuration>

    Por padrão, no MVC3, esta chave já vem como true.

    Isto deve resolver seu problema.

    Espero ter ajudado


    Allan
    segunda-feira, 11 de abril de 2011 14:53
  • Continua dando post na página :(
    Luana - Programadora Junior
    segunda-feira, 11 de abril de 2011 16:19
  • Olá Luana!

    Para criar um formulário Ajax com ASP.NET MVC, siga esses passos:

    • Verifique se seu web.config habilitou Javscript Não instrusivo

     

    <appSettings>
      <add key="ClientValidationEnabled" value="true"/>
      <add key="UnobtrusiveJavaScriptEnabled" value="true"/>
    </appSettings>

     

    • Crie uma view:

     

    <div name="emailDialog">
     
        @using (Ajax.BeginForm(new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "emailDialog" }))
        {
            @Html.ValidationSummary(true)
            <fieldset>
                <div class="editor-label">
                    @Html.LabelFor(model => model.FromName)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.FromName)
                    @Html.ValidationMessageFor(model => model.FromName)
                </div>
     
                <div class="editor-label">
                    @Html.LabelFor(model => model.FromEmail)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.FromEmail)
                    @Html.ValidationMessageFor(model => model.FromEmail)
                </div>
     
                <div class="editor-label">
                    @Html.LabelFor(model => model.ToName)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.ToName)
                    @Html.ValidationMessageFor(model => model.ToName)
                </div>
     
                <div class="editor-label">
                    @Html.LabelFor(model => model.ToEmail)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.ToEmail)
                    @Html.ValidationMessageFor(model => model.ToEmail)
                </div>
                <p style="margin-top8px;">
                    <input type="submit" value="Enviar" />
                </p>
            </fieldset>
        }
     
    </div>

     

    • Crie seu controlador:

     

            public ActionResult EmailUserControl(string url)
            {
                return PartialView();
            }
     
            [HttpPost]
            public ActionResult EmailUserControl(string url, EmailModel email)
            {
                if (!ModelState.IsValid)
                    return PartialView(email);
     
                return PartialView("ObrigadoUserControl", email);
            }
    • Inclusa esses scripts na sua view de layout:

     

        <script type="text/javascript" language="javascript" src="@Url.Content("/Scripts/jquery-1.4.4.min.js")"></script>
        <script type="text/javascript" language="javascript" src="@Url.Content("/Scripts/jquery.validate.min.js")"></script>
        <script type="text/javascript" language="javascript" src="@Url.Content("/Scripts/jquery.validate.unobtrusive.min.js")"></script>
        <script type="text/javascript" language="javascript" src="@Url.Content("/Scripts/jquery.unobtrusive-ajax.min.js")"></script>
        <script type="text/javascript" language="javascript" src="@Url.Content("/Scripts/MicrosoftAjax.js")"></script>
        <script type="text/javascript" language="javascript" src="@Url.Content("/Scripts/MicrosoftMvcAjax.js")"></script>

     

    Bons códigos!

    Abraços


    MCPD, MCSD, MCAD, MCDBA, MCP e colaborador do 100loop.com
    segunda-feira, 11 de abril de 2011 16:50