文章/答案/技术大牛

发布

社区首页 >问答首页 >包含视图中模型数据的ASP.NET核心MVC弹出模式

问包含视图中模型数据的ASP.NET核心MVC弹出模式
EN

Stack Overflow用户

提问于 2021-10-13 18:08:37

回答 1查看 142关注 0票数 1

目标:我正在尝试创建一个让用户输入地址的页面，然后单击一个按钮，该按钮将使用FedEx应用程序接口进行验证。有了新的验证地址(现在有来自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>

jquery

asp.net-core-mvc

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-10-13 18:44:29

我最好的猜测是，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');
        })
    })

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69560344

复制

相似问题

问包含视图中模型数据的ASP.NET核心MVC弹出模式
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问包含视图中模型数据的ASP.NET核心MVC弹出模式EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问包含视图中模型数据的ASP.NET核心MVC弹出模式
EN