Question

我是MVC和Web Api的新手，并且卡住了。请注意：我使用的是ApiControllers，而不是控制器！

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

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

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

我尝试过的事情/我相信其他StackOverflow答案无法做到的事情：

我不能使用Controller方法返回部分视图，就像这个非常类似的问题Same question but not with ApiControllers一样。
我无法将任何数据存储到类中，因此我无法使用@model ExampleClass强烈键入视图以使用@ Model.ExampleProperty访问存储的内容。
由于我无法将数据存储到类中或从View（模型）等控制器方法返回模型，因此我也无法使用Html.DropDownListFor（model =＆gt; model.SelectedValue）将SelectedValue存储到我的模型中在其他局部视图中访问它。而是填充我的下拉列表，我手动添加了一个div，称为返回列表的GET方法，并通过附加到列表来填充列表。

那么，我到底能做什么？我也尝试过ViewData，但存储的数据在Controller方法完成后不会持续。我没有想法。我希望我对某些事情感到错误并错过了一种方法，因为它感觉不应该这么难。如果您甚至可以简单地描述在按下提交后如何传输字符串和/或更新第二个局部视图的流程，那将非常感谢！

提前非常感谢！

模型类

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; }
        }
    }

ApiController类。 ViewData似乎没有保存其内容。我想用第一个POST方法将用户的选择存储到ViewData中，并使用第二个方法获取选择，但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工作，因为我无法存储任何东西，因为我无法从控制器方法返回类似View（模型）的东西。

$(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为空。

<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控制器端点应该纯粹是为了返回数据。

在你的情况下，你应该做的是，只需让你的第一个方法返回你想要的字符串消息。在第一个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控制器方法返回您想要的字符串

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

在提交时使用其他部分视图中的字符串更新部分视图？

1 个答案: