Question

我试图通过ajax查询将我的成功结果输入div。

Ajax查询将model值作为参数并根据该值过滤结果。

这是我的ajax查询和查看页面 -

@model IEnumerable<FunRanger.Models.TagModel>
@foreach (var item in Model) {
    <script type="text/javascript">
        $(function () {
            $('#' + '@item.tagId').click(function () {
                $.ajax({
                    url: '/Tag/TagFilter/?tagName=' + '@item.tagName',
                    type: 'post',
                    success: function (data) {
                        $('#funhome-partial').html(data);
                    }
                });
            });

        });
    </script>
    <div class="tags">
        <a href="#" id="@item.tagId">#@item.tagName</a>
    </div>

}

我试图在另一个id为'funhome-partial`的div中过滤此结果。这个div位于我项目的另一个项目文件中。

动作 -

[HttpPost]
public ActionResult TagFilter(TagModel tag) {
    var cardlist = (from u in db.CardTables
                    where u.CardHashCode.Contains(tag.tagName)
                    select new CardModel {
                        cardHashCode = tag.tagName,
                        cardDate = u.CardDate,
                        cardFileName = u.CardFileName,
                        cardFilePath = u.CardFilePath,
                        cardID = u.CardID,
                        cardTitle = u.CardTitle
                    }).ToList();
    return View("FunHome", cardlist);

}

一切正常。我根据该参数获取过滤记录，我可以通过在那里放置断点来检查。

但是此查询不会调用ajax的success函数并向我显示此错误 -

如果参数名为RipEnglish。

Failed to load resource: the server responded with a status of 500 (Internal Server Error) http://localhost:61203/Tag/TagFilter/?tagName=RipEnglish

如何调用ajax成功结果，这也是一种很好的方法吗？

Answer 1

如果你没有很多经验，那么AJAX可能很难排除故障。适用于所有现代浏览器的开发人员工具（或FireBug）是您的朋友。它们使得查看/理解服务器作为响应返回的内容变得更加容易。

由于请求使用的是Ajax，因此浏览器不会呈现任何返回的错误页面。

使用Chrome（其他工具类似，通常使用CTRL + SHIFT + I或F12打开）：

使用（CTRL + SHIFT + I）打开“开发人员工具”窗格。
点击网络标签。
单击您的页面元素以触发单击处理程序并发送Ajax请求。
在网络标签（左下角）中查找并点击网络请求。
网络请求旁边的窗格包含“标题”标签，“预览”和“响应”。

标题会显示请求的内容（发送到服务器的内容）。

响应将显示服务器响应的内容。对于成功的请求，这可能是JSON，如果发生错误，它可能是错误页面的HTML源。

预览标签将呈现服务器响应（如果可能）。如果您从服务器收到错误响应/页面，这将特别有用，因为您不必通过原始HTML来查找错误详细信息。

如果您的AJAX呼叫失败，并且您的服务器返回500错误，您可以随时查看服务器日志或查看网络＆gt; “预览”选项卡以查看返回的错误详细信息。您可以像处理任何传统服务器响应一样排除错误。

Answer 2

我重构了你的场景，然后解决方案就这样了，你需要查看你的jquery点击功能。

我使用的样本模型 -

public class Tag
{
    public string TagName { get; set; }
}

控制器操作 -

    public ActionResult Index()
    {
        return View();
    }

    public ActionResult SubmitTag(Tag t)
    {
        return new ContentResult() { Content = t.TagName + "1" };
    }

使用JQuery的索引视图 -

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>
    $(function () {
        $("#ClickMe").click(function () {

            var tag = {
                "TagName": "SampleTag"
            };

            $.ajax({
                url: "@Url.Action("SubmitTag")",
                type: "POST",
                data: JSON.stringify(tag),
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    $('#funhome').html(data);
                },
                error: function (response) {
                    alert(response.responseText + "e");
                }
            });
        });
    });
</script>

<input type="button" id="ClickMe" value="ClickMe" />
<div id="funhome"></div>

最后输出 -

enter image description here

在调试时 -

enter image description here

Answer 3

我设法解决了这个问题。

在@ gooberverse回答之后跟踪这么简单。

我查看了开发者工具＆gt; network＆gt;响应，它说我no view engine supports the searched locations or not found in searched locations错误。

虽然我必须创建一个共享视图 - ＆gt; shared>_SharedView并且必须使用相同的方法进行渲染。

它就像魅力一样。

ajax成功函数没有激活MVC

3 个答案: