C# ASP.NET-MVC未呈现视图_C#_Asp.net Mvc_Model View Controller

C# ASP.NET-MVC未呈现视图

c# asp.net-mvc model-view-controller

C# ASP.NET-MVC未呈现视图,c#,asp.net-mvc,model-view-controller,C#,Asp.net Mvc,Model View Controller,我在浏览器中显示了一个菜单列表，作为锚定标记列表。当用户单击时，我使用ajax将其id传递给控制器，如下所示： <!DOCTYPE html> <script type="text/javascript"> $(document).on('click', 'a', function () { var Url = $(this).attr("href"); $.ajax({ type: 'POS

我在浏览器中显示了一个菜单列表，作为锚定标记列表。当用户单击时，我使用ajax将其id传递给控制器，如下所示：

<!DOCTYPE html>
<script type="text/javascript">
    $(document).on('click', 'a', function () {
        var Url = $(this).attr("href");
            $.ajax({
                type: 'POST',
                url:Url,
                contentType: 'application/json; charset:utf-8',
                data: JSON.stringify({ id: this.id })
            })
        });
</script>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <link href="/Content/bootstrap.css" rel="stylesheet">
    <title>ShopOnline</title>
</head>
<body>
    <div id="soContainer">
        <div id="soCategories">
            <div class="container">
                <ul class="list-inline">
                    <li>
                        <a href="#" id="everything">Everything</a>
                        <ul id="catUL">
                            @foreach (var c in Model.CategoriesWithCount)
                            {
                                <li>
                                    <a id="@c.Key" href ="@Url.Action("ListOfBrandNames","Home")">@c.Key</a>
                                    (@c.Value)
                                </li>
                            }
                        </ul>
                    </li>
                </ul>
                <ul class="list-inline" id="topMenu">
                    <li><a href="#">Bought Before</a></li>
                    <li><a href="#">Specials</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

上述代码成功地将所需字符串列表传递给以下

视图

，如下所示：

@model List<string>
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>ListOfBrandNames</title>
</head>
<body>
    <table>
        <tr>
            @foreach (var i in Model)
            {
                <td>
                    @i.ToString();
                </td>
            }
        </tr>
    </table>
</body>
</html>

@型号列表
@{
布局=空；
}
品牌名称列表
@foreach（模型中的var i）
{
@i、 ToString（）；
}

视图中的for循环

成功地为列表中的所有元素运行，但当列表在for循环中结束时，程序在浏览器中出现

404错误

。我是否错误地调用了

视图

当你点击一个链接时，你发出了两个独立的请求。首先是AJAX请求，它正在成功。但是，由于您正在单击一个链接，因此当您的浏览器尝试跟踪该链接时，您也会发出一个标准GET请求。第二个请求失败，因为该控制器操作不允许GET

您可以在JavaScript代码中取消默认请求：

$(document).on('click', 'a', function (e) {
    e.preventDefault();
    // the rest of your code...
});

或者，您可以保持当前在链接中使用

的模式，并将URL存储在

href

以外的其他内容中。比如：

<a id="@c.Key" href="#" data-href="@Url.Action("ListOfBrandNames","Home")">@c.Key</a>

或者用一个按钮完全替换链接（我怀疑这在语义上更正确）：

@c.Key

这样，它就不会有默认操作（当然也要注意所涉及的任何

标记），而只会用于调用客户端操作，这正是您在代码中所做的

这两种方法都由您决定，但主要的一点是，您需要防止浏览器对您的“仅发布”操作发出GET请求。

看起来您正在使用a标记来完成您应该使用按钮标记执行的操作

您可以使用按钮标记而不是a标记，您可能需要使用一些css使其看起来像a标记

2.若您不想像普通a标签一样使用URL，则不必将URL放在a标签的href属性中

例如，您可以将其放置在data href属性中

 <a id="@c.Key" data-href ="@Url.Action("ListOfBrandNames","Home")">@c.Key</a>
...
var Url = $(this).attr("data-href");


...
var Url=$（this.attr（“data href”）；

这将阻止a标记在您单击它时尝试导航到该url。

请注意，这可能会改变光标图标，您可以通过设置

href=“#”

或

style=“cursor:pointer”

来解决这一问题。您能再澄清一点吗？我不知道此页面如何呈现输出并返回404错误。我正在检查

调试模式中的所有内容，视图中的for循环处理从控制器接收的字符串列表。假设，在这个列表中，如果我有3个字符串项，for循环运行3次迭代，当它运行第4次迭代以检查列表中是否还有更多字符串项时，程序正在中断…在浏览器中呈现404 error
。程序中一定也发生了其他事情，此处未显示。这里只有一个列表和一个foreach
循环。这本身不会导致所描述的问题。您是否有其他代码会增加页面的复杂性？“程序破坏”是如何具体实现的？有例外吗？这个异常是如何变成404错误的？唯一突出的是，您可以通过使用@：（示例：@:）在代码块中明确表示html来帮助razor。还要删除@i.ToString（）中的分号；（并且不需要ToString（））。您是否可以与URL共享浏览器错误屏幕截图，在浏览器中使用e.preventDefault（）时仍会出现404错误
应用并拥有href=“#”
@c.Key
可能是其中一种方法。@RK:您能提供更新的代码吗？使用浏览器的调试工具捕获并保存所有网络请求时，会发出哪些请求？我同意按钮可能是最好的方法，因为它首先要执行客户端操作，这样您就不需要覆盖默认行为。看起来它不是href=“#”导致该问题的默认调用，因为在我们通过应用e.preventDefault（）消除该问题后，该问题仍然存在。在for循环完成处理视图中提供给它的列表后，程序仍在中断。要添加更多内容，chrome developer工具中的“网络”选项卡为单击锚定时发出的调用提供200 OK绿色状态。服务器端代码也按预期运行，直到最后一次渲染视图。
var Url = $(this).data("href");

<button type="button" id="@c.Key" data-href="@Url.Action("ListOfBrandNames","Home")">@c.Key</button>

 <a id="@c.Key" data-href ="@Url.Action("ListOfBrandNames","Home")">@c.Key</a>
...
var Url = $(this).attr("data-href");