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, Jan 11 '21 at 02: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, Jan 11 '21 at 20:31

score 2 · Answer 1 · answered Jan 12 '21 at 01:04

@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

score 1 · Accepted Answer · answered Jan 12 '21 at 02:43

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:

Thank you @Rena this is exactly what i needed – sasko Jan 12 '21 at 13:28 — sasko, Jan 12 '21 at 13:28

send @Model from view to controller with ajax

2 Answers2