似乎无法呈现部分视图 - 控制器没有被击中答案

【问题标题】：Can't seem to render partial view - controller not being hit似乎无法呈现部分视图 - 控制器没有被击中
【发布时间】：2019-03-02 16:20:16
【问题描述】：

我有一个下拉列表，我想根据选择的项目呈现部分视图。为此，我使用 jquery 和 MVC 5。在我的控制器中放置断点后，当我更改下拉选择时，我的 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);
        });

【问题讨论】：

我不认为 @Url.Action 在 javascript 块中是有效的剃刀语法。您是否尝试过 F12，浏览器中的网络选项卡？它捕获所有服务器请求。
@OleEHDufour 我不确定这一点，因为我在这之前的一段 javascript 中使用了@Url.Action，它工作正常。我有一条行 window.location = '@Url.Action("DownloadDocuments", "Visualizations")'; 允许您下载 zip 文件，似乎工作正常。我只是检查了网络选项卡，但我原来的帖子中的代码似乎没有任何可疑之处。对于我刚刚在此评论中发布的那一行，该行确实出现在“网络”选项卡上。
只要 javascript 在 razor 视图中而不是单独的 .js 文件中，它应该可以工作。事件处理程序代码是否包含在$(function() { }); 中以确保在附加处理程序之前文档准备就绪？
@MKF，好的。网络选项卡上的返回码是什么？（400,500？）StateData 方法的类的名称是什么？应该是 VisualizationController...
@akerra 我确实将它包裹在 $(document).ready(function(){} 中 - 不过想法不错。

标签： asp.net-mvc controller partial-views

【解决方案1】：

你不能用这样的东西

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

而不是

 var url = '@Url.Action("StateData", "Visualizations")' + '?StateID=' + selection;

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

【讨论】：

当我尝试在selection 下看到一个红色波浪线，上面写着“当前上下文中不存在名称'selection'”
我尝试了这个var url = '@Url.Action("StateData", "Visualizations", new { StateID = "_state"})'.replace("_state", selection);，红色曲线消失了，但它仍然不起作用。

【解决方案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");
        });
    });

【讨论】：