Open another page in modal Jquery

Asked

Viewed 1,344 times

0

I have a problem that I can’t solve in any way. Well, I have a project on Asp.NET MVC as follows:
Model

public class Objeto
    {
        public Objeto()
        {
        }
        public Objeto(string nome, double valor, double percentual)
        {
            Nome = nome;
            Valor = valor;
            Percentual = percentual;
        }
        public string Nome{ get; set; }
        public double Valor { get; set; }
        public double Percentual { get; set; }
    }


Controller

public class HomeController : Controller
{
      public ActionResult Index()
      {
          return View();
      }

      [HttpPost]
      public ActionResult Dados(Objeto teste)
      {
          return View(dados);
      }
}


View Index:

@using (Ajax.BeginForm("Dados", "Home", new AjaxOptions { OnSuccess = "Sucesso()", OnComplete = "unlockPage()", OnBegin = "lockPage()", OnFailure = "ajaxHandleError" }, new { @id = "meuForm" }))
{
    @Html.LabelFor(model => model.Nome)
    <br />
    @Html.TextBoxFor(model => model.Nome)
    <br />
    <br />
    @Html.LabelFor(model => model.Valor)
    <br />
    @Html.TextBoxFor(model => model.Valor)
    <br />
    <br />
    @Html.LabelFor(model => model.Percentual)
    <br />
    @Html.TextBoxFor(model => model.Percentual)
    <br />
    <br />
    <input type="submit" value="Enviar" />
}


View Dados

<label>Os dados inseridos foram:</label>
@Model.Nome
<br />
@Model.Valor
<br />
@Model.Percentual
<br />


Well, what I need to do is introduce View Dados within the View Index in a popup or modal, using Jquery or Telerik, but the data needs to come from controller, previously sent via POST by the page Index.

jquery asp.net-mvc ajax mvc telerik

  • but you need to present this in a new guide?

  • No, I need to present this on the same screen that called, in case the index, and also I cannot lose data from the page that called. In case I should use Ajax, send the data via POST to the controller and return to the page that called it by mounting a popup or modal of Telerik presenting the data page. The problem is how to do it.

  • I commented below the use of viewbag, you know?

  • 1

    you added the jquery.unobtrusive-ajax.min.js? if yes you can get the return of the Ajax request in the method Sucesso(response), then you will work with the content of the Sponse (return of your Controller) and call the API of your Modal... but the declaration of the method is without the (), getting OnSuccess = "Sucesso"

2 answers

1


Since I have no knowledge of your UI, and you left open the technology to be used to open the Dialogo, then I will focus on the Ajax request itself.

Model

using System;

namespace HelloWorldMvcApp
{
    public class Objeto
    {
        public Objeto()
        {
        }

        public Objeto(string nome, double valor, double percentual)
        {
            Nome = nome;
            Valor = valor;
            Percentual = percentual;
        }

        public string Nome{ get; set; }
        public double Valor { get; set; }
        public double Percentual { get; set; }
    }
}

Controller

using System;
using System.Web.Mvc;

namespace HelloWorldMvcApp
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public JsonResult Dados(Objeto teste)
        {           
            return Json(teste);
        }
    }
}

View

@model HelloWorldMvcApp.Objeto
@{
Layout = null;
}

<!DOCTYPE html>
<!-- template from http://getbootstrap.com/getting-started -->

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js" ></script>        
        <script type="text/javascript" src="https://rawgit.com/aspnet/jquery-ajax-unobtrusive/master/jquery.unobtrusive-ajax.js" ></script>

    </head>

    <body>
        @using (Ajax.BeginForm("Dados", "Home", new AjaxOptions { 
            OnSuccess = "onSucess"
        }, new { @id = "meuForm" }))
        {
        @Html.LabelFor(model => model.Nome)
        <br />
        @Html.TextBoxFor(model => model.Nome)
        <br />
        <br />
        @Html.LabelFor(model => model.Valor)
        <br />
        @Html.TextBoxFor(model => model.Valor)
        <br />
        <br />
        @Html.LabelFor(model => model.Percentual)
        <br />
        @Html.TextBoxFor(model => model.Percentual)
        <br />
        <br />
        <input type="submit" value="Enviar" />
        }
        <script>
            var onSucess = function (response) {
                alert(
                    "Rcebi com sucesso os seguintes dados: \n" +
                    "Nome: " + (response.Nome || "Não Informado") + "\n" +
                    "Valor: " + response.Valor + "\n" +
                    "Percentual: " + response.Percentual
                );
            }
        </script>
    </body>
</html>

You can check the above example by working on the following Dotnetfiddle

Note that includes the script jquery.unobtrusive-ajax.js in the view, without it Ajax.Beginform does not work as expected. I also added the success method onSucess in Javascript.

I used a JsonResult to return a Json as a response, I did this due to Dotnetfiddle’s limitation that you cannot have two views, but you can return one ActionResult hassle-free.

In the example below I am performing only one alert(), but you can easily use the framework you want,

Follow an example with the Jqueryui and using as a return ActionResult.

Controller

[HttpPost]
public ActionResult Dados(Objeto teste)
{           
    return View(teste);
}

Javascript

var onSucess = function (response) {
    var dialogo = $(response);
    dialogo.dialog();
}

0

Because you don’t use viewbag? 

 ViewBag.variavelQueVoceQuerMandarParaAView = "teste";

on the screen you use it like this: 

@ViewBag.variavelQueVoceQuerMandarParaAView

  • In fact the code presented is just an example of the original. I cannot use Viewbag, because I need to send the data from the Index page of preference via Ajax to the Controller to be validated, and then return as a popup or modal from Telerik with the Data page, without losing other possible data from the View that called.

  • 1

    if you use Ajax, in Success you can make the modal appear, it would be like this?

  • I won’t even post this as an answer because it’s not indicated, but you can use @TempData["variavelQueVoceQuerMandarParaAView"]

Browser other questions tagged jquery asp.net-mvc ajax mvc telerik

You are not signed in. Login or sign up in order to post.