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

我有一个个人资料页，其中包含来自的邮政编码查找功能。到目前为止，我使用以下代码对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>
}

我尝试了一个新的视图模型，并将结果分配给视图模型，但没有成功。尝试使用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 ParentViewModel
    {
        public string City { get; set; }
        public string County { get; set; }
    }
}

旁白：出于某种原因，当我停留在

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

---

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

我将用两种方法回答这个问题；首先使用您最初询问的方法，然后我希望如何实现这一点

解决方案1

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

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

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

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

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

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

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

将js函数UpdateProfile添加到父视图的末尾：

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

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

@节脚本{
函数UpdateProfile（）
{
var City=$（“#City”）.val（）；
警报（城市）；
$（“城市概况”）.val（城市）；
}
}

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

@部分脚本

代码将被注入到您的

\u Layout.cshtml

中，在那里它调用

@RenderSection（“脚本”，必需：false）

，这是默认MVC项目的一部分

---

未来可能会出现的一个问题是，当您将父视图构建到

表单中时，出于布局原因，您可能会尝试嵌套表单元素，但不允许嵌套表单元素；首先使用您最初询问的方法，然后我希望如何实现这一点

解决方案1

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

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

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

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

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

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

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

将js函数UpdateProfile添加到父视图的末尾：

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

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

@节脚本{
函数UpdateProfile（）
{
var City=$（“#City”）.val（）；
警报（城市）；
$（“城市概况”）.val（城市）；
}
}

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

@部分脚本
代码将被注入到您的
\u Layout.cshtml
中，在那里它调用
@RenderSection（“脚本”，必需：false）
，这是默认MVC项目的一部分

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

这种方法使用jQuery的ajax（）
方法获取数据并直接填充表单上的相关字段

建立模型

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

这是
AddressLookupViewModel
的副本，因为它包含所有必需的字段。我只是将其重命名，以表明其用于主配置文件表单本身

创建视图

视图现在只有一个
Html.BeingForm（）
，其中的查找按钮绑定到ajax函数，而不是提交ajax表单

我并不100%清楚您是否希望用户能够在查找后编辑县和市字段。在下面的代码中，他们可以

@model TestingView.Models.ProfileViewModel
@using (Html.BeginForm())
{
    <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-offset-2 col-md-10">
            <button type="button" class="btn btn-primary" onclick="Lookup()">Look Up</button>
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(m => m.County, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.County, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.City, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.City, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" class="btn btn-primary" value="Submit" />
        </div>
    </div>
}

@section scripts {
    <script>
        function Lookup() {
            $.ajax("/Home/CityLookup", {
                type: "POST",
                dataType: 'json',
                data: {
                    postcode: $("#PostCode").val()
                }
            })
            .success(function (response) {
                console.log("Success");
                console.log(response);
                var cityObj = response;
                $("#City").val(cityObj.City);
                console.log("City " + cityObj.City);
                $("#County").val(cityObj.County);
            })
            .error(function () {
                alert("There was a problem looking up the postcode");
            })
        };
    </script>
    }

解决方案2

这种方法使用jQuery的ajax（）

方法获取数据并直接填充表单上的相关字段

建立模型

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

这是

AddressLookupViewModel

的副本，因为它包含所有必需的字段。我只是将其重命名，以表明其用于主配置文件表单本身

创建视图

视图现在只有一个

Html.BeingForm（）

，其中的查找按钮绑定到ajax函数，而不是提交ajax表单

我并不100%清楚您是否希望用户能够在查找后编辑县和市字段。在下面的代码中，他们可以

@model TestingView.Models.ProfileViewModel
@using (Html.BeginForm())
{
    <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-offset-2 col-md-10">
            <button type="button" class="btn btn-primary" onclick="Lookup()">Look Up</button>
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(m => m.County, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.County, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.City, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.City, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" class="btn btn-primary" value="Submit" />
        </div>
    </div>
}

@section scripts {
    <script>
        function Lookup() {
            $.ajax("/Home/CityLookup", {
                type: "POST",
                dataType: 'json',
                data: {
                    postcode: $("#PostCode").val()
                }
            })
            .success(function (response) {
                console.log("Success");
                console.log(response);
                var cityObj = response;
                $("#City").val(cityObj.City);
                console.log("City " + cityObj.City);
                $("#County").val(cityObj.County);
            })
            .error(function () {
                alert("There was a problem looking up the postcode");
            })
        };
    </script>
    }

---

在父视图中使用

@model

指令声明的模型是什么？该

postcode

参数是否包含邮政编码字符串并获取任何错误？此时，我怀疑您没有将所有必需的数据从部分视图传递到部分视图后操作，因此父视图中的viewmodel属性没有更新。听起来您想要一个包含一些由ajax助手填充的字段的“概要文件”表单。是这样吗？如果是这样的话，你能展示外形视图、模型和控制器吗？@TetsuyaYamamoto。我不明白你的意思，我已经添加了ViewModels，如果这能给你一个更好的画面的话。@Khyron，当然那也行，但我不知道如何实现它。此外，我还添加了父视图。我不需要使用局部视图，请解释我如何实现它