时间戳

首页 > 解决方案 > 将数据从局部视图传递到父视图

c# - 将数据从局部视图传递到父视图

问题描述

我有一个带有来自https://postcodes.io的邮政编码查找功能的个人资料页面。到目前为止，我有一个使用以下代码的 Ajax 表单的部分视图。

@using (Ajax.BeginForm("_CityLookUp", "Home", new AjaxOptions
{
    HttpMethod = "POST",
    UpdateTargetId = "div1",
    InsertionMode = InsertionMode.Replace
}))
{
    <div id="div1">
        <div class="form-group">
            @Html.LabelFor(m => m.PostCode, new { @class = "col-md-2 control-label" })
            <div class="col-md-10">
                @Html.TextBoxFor(m => m.PostCode, new { @class = "form-control" })
            </div>
        </div>
        <div class="form-group">
                <div class="col-md-10">
                    @Html.HiddenFor(m => m.County, new { @class = "form-control", id = "County" })
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-10">
                    @Html.HiddenFor(m => m.City, new { @class = "form-control", id = "City" })
                </div>
            </div>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" class="btn btn-primary" value="Look Up" />
            </div>
        </div>
    </div>
}

这行得通。然后，我使用主配置文件表单在主配置文件页面上呈现部分页面。

我只想将其他两个隐藏字段的值分配给主页中的字段。

部分控制器

    [HttpGet]
    public PartialViewResult _CityLookUp()
    {
        return PartialView();
    }

    [HttpPost]
    public PartialViewResult _CityLookUp(string postcode)
    {
        var client = new PostcodesIOClient();
        var result = client.Lookup(postcode);
        var jst = new AddressLookupViewModel();
        jst.City = result.AdminDistrict;
        jst.County = result.AdminCounty;
        jst.PostCode = postcode;
        ViewBag.City = jst.City;
        ViewBag.County = jst.County;

        var results = new BooksViewModel();
        results.City = jst.City;
        results.County = jst.County;

        return PartialView(jst);
    }

我尝试了一个新的视图模型并将结果分配给视图模型，但它不起作用。尝试使用 JavaScript 获取隐藏字段的值，没有运气。如果您更愿意使用单独的方法，请说明您将如何实现它。

父视图

@model TestingView.Models.ParentViewModel
<div class="container">

    @Html.Partial("_CityLookUp")

    <div class="form-group">
        <div class="col-md-10">
            @Html.TextBoxFor(v => v.City, new { @class = "form-control", id = "City" })
        </div>
    </div>
</div>

部分视图模型

namespace TestingView.Models
{
    public class AddressLookupViewModel
    {
        public string PostCode { get; set; }
        public string County { get; set; }
        public string City { get; set; }

    }
}

父视图模型

namespace TestingView.Models
{
    public class ParentViewModel
    {
        public string City { get; set; }
        public string County { get; set; }
    }
}

附带问题：出于某种原因，当我将鼠标悬停在

@Html.HiddenFor(m => m.City, new { @class = "form-control", id = "City" })

在父视图上，它引用父视图中的 AddressLookUpViewModel 而不是 BooksViewModel。我添加了两个视图模型。

标签： c#ajaxasp.net-mvc

解决方案

我将以两种方式回答；首先使用您最初询问的方法，然后我希望如何实现它。

解决方案 1

使用这种方法，我们会将 City 元素的值从局部视图复制到父视图。

我们需要修复的第一件事是，当您现在查看配置文件时，将有两个元素的 Id 为“City”；一份来自父页面，一份来自部分页面。那是无效的标记，它会给任何潜在的解决方案带来问题。

重命名父视图中​​的 Id 属性：

@Html.TextBoxFor(v => v.City, new { @class = "form-control", id = "Profile_City" })

更新部分视图以在成功检索一组邮政编码值时调用 js 函数：

@using (Ajax.BeginForm("_CityLookUp", "Home", new AjaxOptions
{
    HttpMethod = "POST",
    UpdateTargetId = "div1",
    InsertionMode = InsertionMode.Replace,
    OnSuccess = "UpdateProfile" // Add this
}))

在父视图末尾添加一个js函数UpdateProfile：

@section scripts {
    <script>
        function UpdateProfile()
        {
            var City = $("#City").val();
            alert(City);
            $("#Profile_City").val(City);
        }
    </script>
    }

这应该是所有需要的。警报只是用于调试。

代码将@section scripts被注入到_Layout.cshtml它调用的地方@RenderSection("scripts", required: false)，这是默认 MVC 项目的一部分。

未来可能会出现的一个问题是，当您将父视图构建到一个视图中时，form您可能出于布局原因想要嵌套表单元素，但不允许嵌套表单元素。

推荐阅读