从提交中的另一部分视图中更新带有字符串的部分视图

我是MVC和Web API的新手，并且被卡住了。请注意：我正在使用apicontrollers，而不是控制器！

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

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

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

我尝试过的事情/我认为我无法从其他堆叠量答案中做什么：

我不能使用控制器方法返回部分视图，就像在这个非常类似地提出的问题相同的问题中，而不是与Apicontrollers提出的问题一样。
我无法将任何数据存储到类中，因此我无法使用@model esuppleclass强烈键入A视图，以访问使用 @Model.exampleProperty。
由于我无法将数据存储到类中，也无法从诸如视图（模型）之类的控制器方法返回模型，所以我也无法使用html.dropdownlistfor（model => model.selectedValue）将所选value存储在我的模型中并访问它在另一部分视图中。而是为了填充我的下拉列表，我手动添加了一个Div，称为返回列表的GET方法，并通过附加到它们来填充列表。

那么，我到底该怎么办？我还尝试了ViewData，但是在控制器方法完成后，存储的数据不会持续。我没有想法。我希望我对某些事情有误会，错过了一种方法，因为感觉这不应该这么困难。如果您甚至可以简要描述如何转移字符串和/或在按提交后更新第二部分视图的流程，那将是非常感谢的！

非常感谢！

模型类

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似乎无法保存其内容。我想使用第一个帖子方法将用户的选择存储到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）.dready（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的工作

$(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中获取存储的消息，但是它已经消失了并获得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>

看一下您的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();
}

看来，当调用第一个方法时，您正在尝试将数据存储到查看数据，并在您进行第二个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;
}

相关内容

最新更新

热门标签：