Return a class in jQuery

Asked

Viewed 314 times

-2

I have these Hidden fields in my cshtml:

<input type="hidden" id="txtGeoTo" name="txtGeoTo" />
<input type="hidden" id="txtDateStart" name="txtDateStart" />
<input type="hidden" id="txtDateEnd" name="txtDateEnd" />

Estates:

public string txtOrigem { get; set; }
public string datIda { get; set; }
public string datVolta { get; set; }

How I do for this direct class in my jquery

function PegaHotelPacote() {

    $.ajax({
        url: '/Passo/PegaHotelPacote',
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        type: "POST",
        data: JSON.stringify({ aqui entra minha classe, acho}),
        sucess: function (data) {

        },
        error: function (error) {

        }
    });
}
javascript jquery ajax asp.net-mvc-5
  • 1

    I did not understand the question. Please re-read the question, because it is not clear.

  • I serialized like this and I will test it. I got the question wrong. result = jQuery.parseJSON('{"txtDestino": "' + $("#txtGeoTo"). val() + '" , "datIda": "' + $("#txtDateStart"). val() + '", "datVolta": "' + $("#txtDateEnd"). val() + '", "intAdultos": "' + $("#txtAdulto"). val() + '" }'); $.ajax({ url: '/Step/Pegahotelpackage', dataType: "json", contenttype: "application/json; charset=utf-8", type: "POST", date: JSON.stringify({_hotel: result}), sucess: Function (date) { },

  • 3

    You could edit the question with the new information as well as comment gets very confusing.

2 answers

1

Option 1:

You can use the method itself serialize jQuery:

$.ajax({
    ...
    data: $('#form').serialize(),
    ...
});

HTML

<form id="form">
    <input type="hidden" id="txtGeoTo" name="txtGeoTo" />
    <input type="hidden" id="txtDateStart" name="txtDateStart" />
    <input type="hidden" id="txtDateEnd" name="txtDateEnd" />
</form>

Option 2:

Passing an object as parameter:

$.ajax({
    ...
    data: {
           txtOrigem : $('#txtGeoTo').val(),
           datIda: $('#txtDateStart').val(),
           datVolta: $('#txtDateEnd').val()
    },
    ...
});

In both cases you only need to do this, the . Net takes care of mapping to the model/viewmodel passed as parameter in Action.

0

Solution

Create a Template class

public class Modelo
{
     public string txtOrigem { get; set; }
     public DateTime datIda { get; set; }
     public DateTime datVolta { get; set; }
}

Create Your Controller

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MvcApplication1.Controllers
{
    public class ModelosController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
        [HttpPost]
        public ActionResult PostModelo(MvcApplication1.Models.Modelo modelo)
        {
            return Json(modelo, JsonRequestBehavior.DenyGet);
        }
    }
}

Create a View from the controller like this:

@{ Layout = null; }
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-1.8.2.intellisense.js"></script>
    <script src="~/Scripts/jquery-1.8.2.js"></script>
    <script>
        $(document).ready(function (e) {            
            $("#ButEnviar").click(function () {    
                var dados = "txtOrigem=" + $("#txtGeoTo").val()
                dados = dados + "&datIda=" + $("#txtDateStart").val();
                dados = dados + "&datVolta=" + $("#txtDateEnd").val();                
                $.post("/Modelos/PostModelo", dados, function (data) {
                    alert(data.txtOrigem + "\n" + data.datIda + "\n" + data.datVolta)
                }, 'json');
            });
        });
    </script>
</head>
<body>
    <div>        
        <input type="hidden" id="txtGeoTo" name="txtGeoTo" value="Origem 1" />
        <input type="hidden" id="txtDateStart" name="txtDateStart" value="10/10/2010" />
        <input type="hidden" id="txtDateEnd" name="txtDateEnd" value="12/10/2010" />
        <button type="button" id="ButEnviar">Enviar</button>        
    </div>
</body>
</html>

When you click Submit it will run the Jquery.post, who is in $("#ButEnviar") event click, it will fetch the information in the fields of the type hidden, and send via for the controller method (/Modelos/PostModelo), as shown in the figure below.

inserir a descrição da imagem aqui

After processing the method it re-sends the same data to View

inserir a descrição da imagem aqui

But you can use it in the best possible way.

Note: I put the datIda and datVolta as Datetime

Browser other questions tagged javascript jquery ajax asp.net-mvc-5

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