ASP.NET 核心 MVC 弹出模式，其中包含来自视图的模型数据

Posted 2023-04-12

【中文标题】ASP.NET 核心 MVC 弹出模式，其中包含来自视图的模型数据

【英文标题】：ASP.NET core MVC Popup Modal with data from model from view

【发布时间】：2021-12-02 05:16:02

【问题描述】：

目标： 我正在尝试创建一个让用户输入地址的页面，然后单击一个按钮，该按钮将使用 FedEx API 进行验证。使用经过验证的新地址（现在使用来自 FedEx 的额外邮政编码），我想让用户使用模式弹出窗口验证新地址是否正确，而无需重新加载页面。

问题：我已经完成了大部分工作，但是在将数据从视图传输到控制器时遇到了困难。它传递一个空模型，而不是用户输入到字段中的内容。

这是用户将填写的表格：

这是控制器：

这是视图：

@model AirmotionEcommerceWebsite.Models.Home.DeliveryAddressModel

@
    ViewBag.Title = "Shipping Address";
    Layout = "~/Views/Shared/_Layout.cshtml";


<br />
<div class="container">
    @Html.AntiForgeryToken()

<div class="form-horizontal">
    <h4>Shipping Address</h4>
    <hr />

        @Html.ValidationSummary(true, "", new  @class = "text-danger" )

    <div id="PlaceHolderHere"></div>

    <div class="form-group">
        <h5>Name</h5>
        <div class="col-md-10">
            @Html.EditorFor(model => model.strName, new  htmlAttributes = new  @class = "form-control"  )
            @Html.ValidationMessageFor(model => model.strName, "", new  @class = "text-danger" )
        </div>
    </div>

    <div class="form-group">
        <h5>Attention To</h5>
        <div class="col-md-10">
            @Html.EditorFor(model => model.strAttnTo, new  htmlAttributes = new  @class = "form-control"  )
            @Html.ValidationMessageFor(model => model.strAttnTo, "", new  @class = "text-danger" )
        </div>
    </div>

    <div class="form-group">
        <h5>Street</h5>
        <div class="col-md-10">
            @Html.EditorFor(model => model.strStreet1, new  htmlAttributes = new  @class = "form-control"  )
            @Html.ValidationMessageFor(model => model.strStreet1, "", new  @class = "text-danger" )
        </div>
    </div>

    <div class="form-group">
        <h5>Street 2</h5>
        <div class="col-md-10">
            @Html.EditorFor(model => model.strStreet2, new  htmlAttributes = new  @class = "form-control"  )
            @Html.ValidationMessageFor(model => model.strStreet2, "", new  @class = "text-danger" )
        </div>
    </div>

    <div class="form-group">
        <h5>City</h5>
        <div class="col-md-10">
            @Html.EditorFor(model => model.strCity, new  htmlAttributes = new  @class = "form-control"  )
            @Html.ValidationMessageFor(model => model.strCity, "", new  @class = "text-danger" )
        </div>
    </div>

    <div class="form-group">
        @
            IEnumerable<SelectListItem> dataItems = ViewBag.states;
        
        <div class="form-group">
            <h5>State</h5>
            <div class="col-md-10">
                @Html.DropDownListFor(model => model.State.IntStateId, dataItems, "-- Select --", new  @class = "form-control" )
                @Html.ValidationMessageFor(model => model.State.IntStateId, "", new  @class = "text-danger" )
            </div>
        </div>
    </div>

    <div class="form-group">
        <h5>Zip</h5>
        <div class="col-md-10">
            @Html.EditorFor(model => model.strZip, new  htmlAttributes = new  @class = "form-control"  )
            @Html.ValidationMessageFor(model => model.strZip, "", new  @class = "text-danger" )
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <button type="button" class="btn btn-primary" data-ajax-method="get" data-toggle="ajax-modal" data-target="#ValidateAddress" 
                    data-url="@Url.Action("GetValidationOnAddress", new  model = Model )">Verify Address</button>
        </div>
    </div>

</div>
</div>

<script>



    $(function () 
        var PlaceHolderElement = $('#PlaceHolderHere');
        $('button[data-toggle="ajax-modal"]').click(function (event) 
            var url = $(this).data('url');
            var $j = jQuery.noConflict();
            $j.get(url).done(function (data) 
                PlaceHolderElement.html(data);
                PlaceHolderElement.find('.modal').modal('show');
            )
        )

        //PlaceHolderElement.on('click', '[data-save="modal"]', function (event) 
        //  var form = $(this).parents('.modal').find('form');
        //  var actionUrl = form.attr('action');
        //  var sendData = form.serialize();
        //)
    )

</script>

【问题讨论】：

很确定这些字段需要在表单中。你可以使用助手Html.BeginForm

@hijinxbassist 我试图添加它并没有改变任何东西。我应该在开始表单中添加任何属性吗？

在你调试你的jQuery的时候，你的url有没有表单的所有参数？

如果您不想做手动工作，请添加表单标签并将按钮类型从“按钮”更改为“提交”

【参考方案1】：

我最好的猜测是jQuery 代码没有填充发送回controller 的模型。如果是这种情况，您可以尝试将包含的div 更改为form：

<form class="form-horizontal">
    <h4>Shipping Address</h4>
    <hr />

        @Html.ValidationSummary(true, "", new  @class = "text-danger" )

    <div id="PlaceHolderHere"></div>

    <div class="form-group">
        <h5>Name</h5>
        <div class="col-md-10">
            @Html.EditorFor(model => model.strName, new  htmlAttributes = new  @class = "form-control"  )
            @Html.ValidationMessageFor(model => model.strName, "", new  @class = "text-danger" )
        </div>
    </div>

    <div class="form-group">
        <h5>Attention To</h5>
        <div class="col-md-10">
            @Html.EditorFor(model => model.strAttnTo, new  htmlAttributes = new  @class = "form-control"  )
            @Html.ValidationMessageFor(model => model.strAttnTo, "", new  @class = "text-danger" )
        </div>
    </div>

    <div class="form-group">
        <h5>Street</h5>
        <div class="col-md-10">
            @Html.EditorFor(model => model.strStreet1, new  htmlAttributes = new  @class = "form-control"  )
            @Html.ValidationMessageFor(model => model.strStreet1, "", new  @class = "text-danger" )
        </div>
    </div>

    <div class="form-group">
        <h5>Street 2</h5>
        <div class="col-md-10">
            @Html.EditorFor(model => model.strStreet2, new  htmlAttributes = new  @class = "form-control"  )
            @Html.ValidationMessageFor(model => model.strStreet2, "", new  @class = "text-danger" )
        </div>
    </div>

    <div class="form-group">
        <h5>City</h5>
        <div class="col-md-10">
            @Html.EditorFor(model => model.strCity, new  htmlAttributes = new  @class = "form-control"  )
            @Html.ValidationMessageFor(model => model.strCity, "", new  @class = "text-danger" )
        </div>
    </div>

    <div class="form-group">
        @
            IEnumerable<SelectListItem> dataItems = ViewBag.states;
        
        <div class="form-group">
            <h5>State</h5>
            <div class="col-md-10">
                @Html.DropDownListFor(model => model.State.IntStateId, dataItems, "-- Select --", new  @class = "form-control" )
                @Html.ValidationMessageFor(model => model.State.IntStateId, "", new  @class = "text-danger" )
            </div>
        </div>
    </div>

    <div class="form-group">
        <h5>Zip</h5>
        <div class="col-md-10">
            @Html.EditorFor(model => model.strZip, new  htmlAttributes = new  @class = "form-control"  )
            @Html.ValidationMessageFor(model => model.strZip, "", new  @class = "text-danger" )
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <button type="button" class="btn btn-primary" data-ajax-method="get" data-toggle="ajax-modal" data-target="#ValidateAddress" 
                    data-url="@Url.Action("GetValidationOnAddress", new  model = Model )">Verify Address</button>
        </div>
    </div>

</form>

然后修改您的jQuery 代码以序列化表单中的所有字段：

    $('button[data-toggle="ajax-modal"]').click(function (event) 
        event.preventDefault();
        var url = $(this).data('url');
        // get the form containing the submit button
        var form = $(this).closest('form')
        var $j = jQuery.noConflict();
        // serialize all the fields in the form
        var model = form.serialize();
        // the the request to the url along with the form (model) data
        $j.get(url, model).done(function (data) 
            PlaceHolderElement.html(data);
            PlaceHolderElement.find('.modal').modal('show');
        )
    )

【讨论】：

就是这样！ form.serialize();是我最想念的东西。谢谢！现在只是让它真正出现..

@ScottUphus 很高兴我能提供帮助。您可以尝试通过jQuery 打开模态框，因此在done 函数中您可以尝试$('#ValidateAddress').modal('show'); 之类的操作，您必须将模态框的主体替换为您正在重新调整的partialView。

我将为此提出另一个问题。请你看看好吗？

@ScottUphus 肯定没问题。