send @Model from view to controller with ajax

Question

I have reservation form where values from one select tab depend on values from other select tab.
On change of value in one tab ajax is called and sends model to controller without submiting form.
In controller action i cant get @Model value.
What can i do to fix it?
(code works only need to get value of @Model to action in controller)
Thanks for trying to help!!

Here is my form

        <div class="row">
            <div class="col-md-12 form-group">
                <label asp-for="poslovnice">Odabir poslovnice</label>
                <select asp-for="PoslovnicaID" asp-items="Model.poslovnice" class="form-control ">
                    <option selected disabled>Odabir poslovnice</option>

                </select>
                <span asp-validation-for="PoslovnicaID" class="text-danger"></span>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6 form-group">
                <label asp-for="Ime">Ime</label>
                <input type="text" class="form-control" asp-for="Ime">
                <span asp-validation-for="Ime" class="text-danger"></span>
            </div>
            <div class="col-md-6 form-group">
                <label asp-for="Prezime">Prezime</label>
                <input type="text" class="form-control" asp-for="Prezime">
                <span asp-validation-for="Prezime" class="text-danger"></span>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 form-group">
                <label asp-for="Email">Email</label>
                <input type="email" class="form-control" asp-for="Email">
                <span asp-validation-for="Email" class="text-danger"></span>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6 form-group">
                <label asp-for="brojOsoba">Broj osoba</label>
                <select asp-for="brojOsobaID" asp-items="Model.brojOsoba" class="form-control">
                    <option selected disabled>Odabir</option>

                </select>
                <span asp-validation-for="brojOsobaID" class="text-danger"></span>
            </div>
            <div class="col-md-6 form-group">
                <label asp-for="BrojTelefona">Telefon</label>
                <input type="text" class="form-control" asp-for="BrojTelefona">
                <span asp-validation-for="BrojTelefona" class="text-danger"></span>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6 form-group">
                <label asp-for="DatumRezervacije">Datum rezervacije</label>
                <input type="date" class="form-control" asp-for="DatumRezervacije" onkeypress="return false;">
                <span asp-validation-for="DatumRezervacije" class="text-danger"></span>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6 form-group">
                <label asp-for="TerminRezervacije">Termin</label>
                <select asp-for="TerminRezervacijeID" asp-items="Model.TerminRezervacije" class="form-control">
                    <option selected disabled>Termin</option>

                </select>
                <span asp-validation-for="TerminRezervacijeID" class="text-danger"></span>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12 form-group">
                <label asp-for="Napomena">Message</label>
                <textarea class="form-control" asp-for="Napomena" cols="30" rows="7"></textarea>
                <span asp-validation-for="Napomena" class="text-danger"></span>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12 form-group">
                <input type="submit" class="btn btn-primary btn-lg btn-block" value="Reserve Now" data-save="modal">
            </div>
        </div>

    </form>

my js code

<script>




$("select, #DatumRezervacije").change(function () {
   
    //window.alert("aa");
     $.get("/Rezervacija/RezervacijaPartial?mod=@Model", function (data) {
        $("#rezervacijaPlaceholder").html(data)
    })

})

and my controller action

 public IActionResult RezervacijaPartial(RezervacijaVM mod)
    {
        RezervacijaVM model = new RezervacijaVM();

        
          //logic

        return PartialView(model);
    }

Hi @sasko,@Model is server side operation,it will not change the value when you did any change in client side.You need avoid using such way. — Rena
– Rena, Commented Jan 11, 2021 at 2:45
Hi @Rena !! Thanks for respoding! Do you have any suggestion how could i send values from form to action in controller without submiting that form ? — sasko
– sasko, Commented Jan 11, 2021 at 20:31

Patrick Xavier · Accepted Answer · 2021-01-12 01:04:47Z

2

@Model is compiled and evaluated when the page is requested from the server. Any changes to the model on the client-side will not be reflected.

You're also trying to pass an entire object as a query parameter. You should flatten your model before passing it to your controller. So you'll have

$.get("/Rezervacija/RezervacijaPartial?poslovnice=value&Ime=value&Prezime=value&Email=value&brojOsoba=value&BrojTelefona=value&DatumRezervacije=value&TerminRezervacije=value&Napomena=value", function(data){...}

The values here you should get using JavaScript as this is already client-side operation. Consider: Flatten a javascript object to pass as querystring

answered Jan 12, 2021 at 1:04

Patrick Xavier

1164 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rena · Accepted Answer · 2021-01-12 02:43:16Z

Here is a whole working demo:

Model:

public class RezervacijaVM
{
    public int PoslovnicaID { get; set; }
    public int brojOsobaID { get; set; }
    public int TerminRezervacijeID { get; set; }
    public IEnumerable<SelectListItem> poslovnice { get; set; }
    public IEnumerable<SelectListItem> brojOsoba { get; set; }
    public IEnumerable<SelectListItem> TerminRezervacije { get; set; }
    public string Ime { get; set; }
    public string Prezime { get; set; }
    public string Email { get; set; }
    public string BrojTelefona { get; set; }
    public string Napomena { get; set; }
    public DateTime DatumRezervacije { get; set; }
}

View:

@model RezervacijaVM
<form id="form1">
    <div class="row">
        <div class="col-md-12 form-group">
            <label asp-for="poslovnice">Odabir poslovnice</label>
            <select asp-for="PoslovnicaID" asp-items="Model.poslovnice" class="form-control ">
                <option selected disabled>Odabir poslovnice</option>

            </select>
            <span asp-validation-for="PoslovnicaID" class="text-danger"></span>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6 form-group">
            <label asp-for="Ime">Ime</label>
            <input type="text" class="form-control" asp-for="Ime">
            <span asp-validation-for="Ime" class="text-danger"></span>
        </div>
        <div class="col-md-6 form-group">
            <label asp-for="Prezime">Prezime</label>
            <input type="text" class="form-control" asp-for="Prezime">
            <span asp-validation-for="Prezime" class="text-danger"></span>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 form-group">
            <label asp-for="Email">Email</label>
            <input type="email" class="form-control" asp-for="Email">
            <span asp-validation-for="Email" class="text-danger"></span>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 form-group">
            <label asp-for="brojOsoba">Broj osoba</label>
            <select asp-for="brojOsobaID" asp-items="Model.brojOsoba" class="form-control">
                <option selected disabled>Odabir</option>

            </select>
            <span asp-validation-for="brojOsobaID" class="text-danger"></span>
        </div>
        <div class="col-md-6 form-group">
            <label asp-for="BrojTelefona">Telefon</label>
            <input type="text" class="form-control" asp-for="BrojTelefona">
            <span asp-validation-for="BrojTelefona" class="text-danger"></span>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6 form-group">
            <label asp-for="DatumRezervacije">Datum rezervacije</label>
            <input type="date" class="form-control" asp-for="DatumRezervacije" onkeypress="return false;">
            <span asp-validation-for="DatumRezervacije" class="text-danger"></span>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 form-group">
            <label asp-for="TerminRezervacije">Termin</label>
            <select asp-for="TerminRezervacijeID" asp-items="Model.TerminRezervacije" class="form-control">
                <option selected disabled>Termin</option>

            </select>
            <span asp-validation-for="TerminRezervacijeID" class="text-danger"></span>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12 form-group">
            <label asp-for="Napomena">Message</label>
            <textarea class="form-control" asp-for="Napomena" cols="30" rows="7"></textarea>
            <span asp-validation-for="Napomena" class="text-danger"></span>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12 form-group">
            <input type="submit" class="btn btn-primary btn-lg btn-block" value="Reserve Now" data-save="modal">
        </div>
    </div>

</form>

JS:

@section scripts
{
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}

    <script>
            $("select, #DatumRezervacije").change(function () {
                var data = $("#form1").serialize();
                console.log(data);
                $.get("/Rezervacija/RezervacijaPartial?"+data, function (data) {
            $("#rezervacijaPlaceholder").html(data)
        })

    })
    </script>
}

Result:

Collectives™ on Stack Overflow

send @Model from view to controller with ajax

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related