提交时使用来自另一个局部视图的字符串更新局部视图？

Question

我是 MVC 和 Web Api 的新手，遇到困难。请注意：我使用的是 Api控制器，而不是控制器！

情况我有两个片面的看法。第一个有下拉列表和一个提交按钮。第二个只是一个确认视图，显示用户在提交后选择的内容。单击提交后，我想将一个字符串（包含用户的组合选择）发送到第二个部分视图并更新它。

问题当我在第一个局部视图上按下提交时，我想将一个字符串发送到第二个局部视图并更新第二个局部视图。我怎样才能做到这一点？当然，字符串的发送可以是间接的，比如视图到控制器然后返回到视图。我只想知道至少一种方式。

再次注意，我使用的是 Web Api 控制器，而不是控制器。大多数人使用普通控制器，这不适用于我。它们不一样。

我尝试过的事情/我认为我无法从其他 Whosebug 答案中做到的事情：

我不能使用控制器方法 return 局部视图，就像这个非常相似的问题 Same question but not with ApiControllers 一样。
我无法将任何数据存储到 class 中，因此我无法使用 @model ExampleClass 强类型视图来使用 @Model.ExampleProperty.
因为我无法将数据存储到 class 或 return 控制器方法（如 View(model)）中的模型中，我也无法使用 Html.DropDownListFor(model => model.SelectedValue) 将 SelectedValue 存储到我的模型中并在另一个局部视图中访问它。为了填充我的下拉列表，我手动添加了一个 div，调用了一个 returned 列表的 GET 方法，并通过附加到列表来填充列表。

那么，我到底能做什么？我也试过 ViewData，但存储的数据不会在 Controller 方法完成后持续存在。我没主意了。我希望我弄错了什么，错过了一个方法，因为感觉不应该这么难。如果您能简单描述一下我将如何传输字符串 and/or 并在按下提交后更新第二个局部视图的流程，将不胜感激！

提前致谢！

型号class

public class Vehicle
    {
        public class Make
        {
            public int MakeId { get; set; }
            public string MakeName { get; set; }
        }

        public class Model
        {
            public int ModelId { get; set; }
            public string ModelName { get; set; }
        }
    }

Api控制器class。 ViewData 似乎不保存其内容。我想用第一种方法 POST 将用户的选择存储到 ViewData 中，然后使用第二种方法 GET 选择，但是 ViewData 的内容已经变为 null。

public class VehicleController : ApiController
    {
        public ViewDataDictionary ViewData = new ViewDataDictionary();

        [HttpPost]
        public void StoreMakeAndModel(string user_selections){
            ViewData["message"] = user_selections;
        }

        [HttpGet]
        public string ConfirmationMessage(){
            ViewData["message"] = "You selected the " + ViewData["message"].ToString();
            return ViewData["message"].ToString();
        }

        //This returns a list to populate a drop down list
        [HttpGet]
        public IEnumerable<Vehicle.Make> Makes(){
            //This function reads from xml and returns List<Vehicle.Make>
            ...
            return makesList;
        }

        //This returns a list to populate a drop down list
        [HttpGet]
        public IEnumerable<Vehicle.Model> Models(int id){
            //This function reads from xml the car models that match the make id
            ...
            return modelsList;
        }
    }

第一个局部视图 它有 2 个下拉列表和提交按钮。有一个隐藏的 div 在表单提交后显示第二个局部视图。我希望它只在显示时加载，以便我可以使用 $(document).ready(function()) 在那里显示我的字符串，但它会在主页加载时加载，即使它是隐藏的。所以我不知道如何在第一个局部视图提交后用字符串更新它。

<select required id="makes_DDL" name="makes_DDL"></select>

<select required id="models_DDL" name="models_DDL"></select>

<input type="submit" id="submit_button" value="Submit Form" onclick="formSubmit()" />

<div id="thank_you_div" style="display:none;">
    @Html.Partial("_ThankYou");
</div>

    function formSubmit() {
        //Combines the make and model into one string, Ex: Chevrolet Malibu
        var parameter = $("#makes_DDL").children(":selected").text() + " " 
             + $("#models_DDL").children(":selected").text();
        var uri = "api/vehicle/storemakeandmodel/" + parameter;

        $.ajax({
            url: uri,
            type: "post",
            updatetargetid: "thank_you_div",
            success: function (data) {
                $("#thank_you_div").show();
            },
            });
}

我的名单人口是这样的；这是我的第一份清单。我无法让 @Html.DropDownListFor 工作，因为我无法存储任何东西，因为我无法从控制器方法 return 像 View(model) 这样的东西。

$(document).ready(function () {
        $.getJSON("api/vehicle/makes", function (makes) {
            $("#makes_DDL").append("<option value= ''>Select a make</option>");
            $.each(makes, function (id, make) {
                $("#makes_DDL").append("<option value=" + make.MakeId + ">" + make.MakeName + "</option>");
            });
        });
    });

第二个局部视图它试图获取 ViewData 中存储的消息，但它已经消失并且 GETS null。

<div id="thank_you_div">Thank you!</div>

<script type="text/javascript">
    $(document).ready(function () {
        alert("Thank You Partial View ready!");
        $.ajax({
            url: "api/vehicle/confirmationmessage",
            type: "get",
            updatetargetid: "thank_you_div",
            success: function (message) {
                $("#thank_you_div").html(message)
            }
        });
    })
</script>

Answer 1

看看您的 ApiController 操作方法。

[HttpPost]
public void StoreMakeAndModel(string user_selections)
{
   ViewData["message"] = user_selections;
}
[HttpGet]
public string ConfirmationMessage()
{
    ViewData["message"] = "You selected the " + ViewData["message"].ToString();
    return ViewData["message"].ToString();
}

看起来您正在尝试在调用第一个方法时将数据存储到 ViewData，并在您进行第二次 ajax 调用时在第二个方法中读取它。 但这行不通！因为 http 是无状态的。你的第二个电话不知道你的第一个电话做了什么。您不能将数据存储在 ViewData 中以在多个 http 请求之间进行访问。在 api 控制器中使用 ViewData 根本没有意义。 Api 控制器端点应该纯粹是 return 数据。

在你的情况下，你应该做的是，简单地让你的第一个方法 return 你想要的字符串消息。在第一个 ajax 调用的成功处理程序中，您将在成功回调中获得此字符串（来自 api 方法的响应）。您可以根据需要使用它来更新 DOM。

也不需要局部视图。您只需要一个容器 div 元素来显示响应。

<select required id="makes_DDL" name="makes_DDL"></select>
<select required id="models_DDL" name="models_DDL"></select>

<input type="submit" id="submit_button" value="Submit Form" onclick="formSubmit()" />

<div id="thank_you_div" style="display:none;"></div>

现在，在您的第一个 ajax 调用的成功回调中，使用返回的响应更新 DOM。

另外 $.ajax 没有名为 updatetargetid 的设置属性 !

function formSubmit() {
    //Combines the make and model into one string, Ex: Chevrolet Malibu
    var parameter = $("#makes_DDL").children(":selected").text() + " " 
        + $("#models_DDL").children(":selected").text();
    var uri = "api/vehicle/?user_selections=" + parameter;
    $.ajax({
        url: uri,
        type: "post"
    }).done(function(res) {
        $("#thank_you_div").html(res).show();
    }).fail(function(x, v, e) {
        console.log(e);
    });
}

假设您的 api 控制器方法 return 是您想要的字符串

[HttpPost]
public string StoreMakeAndModel(string user_selections)
{
    return  "You selected the "+user_selections;
}

提交时使用来自另一个局部视图的字符串更新局部视图？

Update a partial view with a string from another partial view on submit?

c#

asp.net-mvc

jquery

asp.net-mvc-4

asp.net-web-api