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

【问题标题】：send @Model from view to controller with ajax使用ajax将@Model从视图发送到控制器
【发布时间】：2021-04-16 00:47:09
【问题描述】：

我有预订表格，其中一个选择选项卡中的值取决于其他选择选项卡中的值。
在一个选项卡中更改值时，调用 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);
    }

【问题讨论】：

您好@sasko,@Model是服务器端操作，当您在客户端进行任何更改时，它不会更改值。您需要避免使用这种方式。
嗨@Rena！感谢回复！您有什么建议我如何在不提交该表单的情况下将值从表单发送到控制器中的操作？
嗨@sasko，请在下面查看我的答案。

标签： .net model-view-controller razor asp.net-core-mvc asp.net-ajax

【解决方案1】：

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

型号：

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

结果：

【讨论】：

谢谢@Rena 这正是我所需要的

【解决方案2】：

@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

【讨论】：