使用 ajax 将 @Model 从视图发送到控制器

Question

我有一个预订表格，其中一个 select 选项卡的值取决于其他 select 选项卡的值。
在一个选项卡中更改值时 ajax 被调用并在不提交表单的情况下将模型发送到控制器。
在控制器操作中我无法获得@Model 值。
我能做些什么来修复它？
（代码工作只需要获取@Model 的值以在控制器中执行操作）
感谢您的帮助！！

这是我的表格

        <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代码

<script>




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

})

和我的控制器动作

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

        
          //logic

        return PartialView(model);
    }

Answer 1

当从服务器请求页面时，

@Model 被编译和评估。客户端对模型的任何更改都不会反映出来。

您还试图将整个对象作为查询参数传递。在将模型传递给控制器之前，您应该展平模型。所以你会有

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

您应该使用 JavaScript 获取此处的值，因为这已经是客户端操作。考虑：Flatten a javascript object to pass as querystring

Answer 2

这是一个完整的工作演示：

型号：

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; }
}

查看：

@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>
}

结果：

使用 ajax 将 @Model 从视图发送到控制器

send @Model from view to controller with ajax

.net

model-view-controller

asp.net-ajax

razor

asp.net-core-mvc