Question

我有一个下拉列表，我想根据选择的项目来渲染局部视图。为此，我正在使用jquery和MVC5。在控制器中放置了断点之后，当我更改下拉选择时，我的Url.Action（）调用似乎没有到达那里。我不确定我是否了解如何正确使用路由值。这就是我所拥有的：

开始视图的相关部分

<div>
        @if (role == "admin")
         {
            <p>Choose state to view:</p>
            <select id="stateList">
                <option value="AL">Alabama</option>
                <option value="AR">Arkansas</option>
                <option value="DE">Delaware</option>
                <option value="FL">Florida</option>
                <option value="GA">Georgia</option>
                <option value="IA">Iowa</option>
                <option value="IL">Illinois</option>
                <option value="IN">Indiana</option>
                <option value="KS">Kansas</option>
                <option value="KY">Kentucky</option>
                <option value="LA">Louisiana</option>
                <option value="MD">Maryland</option>
                <option value="MS">Mississippi</option>
                <option value="MO">Missouri</option>
                <option value="NC">North Carolina</option>
                <option value="NE">Nebraska</option>
                <option value="NJ">New Jersey</option>
                <option value="OH">Ohio</option>
                <option value="OK">Oklahoma</option>
                <option value="SC">South Carolina</option>
                <option value="TN">Tennessee</option>
                <option value="TX">Texas</option>
                <option value="VA">Virginia</option>
                <option value="WV">West Virginia</option>
            </select>
            <div id="#partialPlaceHolder">

            </div>
        }

通过JQuery进入控制器

//Load partial view when an admin changes the state selection
    $('#stateList').change(function () {
        var selection = $(this).val();
        var url = '@Url.Action("StateData", "Visualizations")' + '?StateID=' + selection;
        //url ends up looking like this: /Visualizations/StateData?StateID=IA  (or some other state abbreviation)
        $("#partialPlaceHolder").load(url, function () {
                console.log("it worked");
         });
      });

模型

public class VisualizationModels
{
    public String StateID { get; set; }
}

用于生成部分视图的控制器

public ActionResult StateData(string stateID)
    {
        VisualizationModels vm = new VisualizationModels();
        vm.StateID = stateID;
        return PartialView("_SpecificStateData", vm);
    }

更新

奇怪的是，如果我使用$.get而不是@Url.Action，我实际上会执行控制器操作，由于某种原因，它现在不会呈现局部视图...

//Load partial view when an admin changes the state selection
    $('#stateList').change(function () {
        var selection = $(this).val();
        var url = '/Visualizations/StateData?StateID=' + selection;
        $.get(url, function (data) {
            $('#partialPlaceHolder').html(data);
        });

Answer 1

您不能使用这样的东西

An exception of type 'System.InvalidOperationException' occurred in System.dll but was not handled in user code

代替

 var url = '@Url.Action("StateData", "Visualizations", new { StateID = selection})'

，然后检查是否有效。因为如果您的参数将无法正确传递。您的路线处理程序将无法映射正确的操作方法。

Answer 2

我知道了...这是最愚蠢，最讨厌的小问题。在我的主视图中（在原始帖子的顶部），我在id中输入了div错了...

错误：

<div id="#partialPlaceHolder"></div>

右：

<div id="partialPlaceHolder"></div>

现在一切正常。最终的JS看起来像这样：

//Load partial view when an admin changes the state selection
    $('#stateList').change(function () {
        var selection = $(this).val();
        var url = '@Url.Action("StateData", "Visualizations", new { StateID = "_state" })'.replace("_state", selection);
        $("#partialPlaceHolder").load(url, function () {
                console.log("it worked");
        });
    });

似乎无法呈现部分视图-控制器未命中

2 个答案: