ASP.NET MVC / JQuery/ Javascript：搜索（并尝试加载）新数据后视图不会刷新答案

【问题标题】：ASP.NET MVC / JQuery/ Javascript: view will not refresh after searching (and trying to load) new dataASP.NET MVC / JQuery/ Javascript：搜索（并尝试加载）新数据后视图不会刷新
【发布时间】：2023-03-25 11:01:01
【问题描述】：

这是我在 stackoverflow 上的第一篇文章。在过去的一个月里，我一直在尝试自己解决这个问题，广泛搜索谷歌和这个网站。这是我的问题：

我有一个网站，用户可以在其中搜索案例。当他们找到案例时，他们的结果将加载到案例详细信息页面上。用户通常通过单击搜索选项从主页搜索案例，并在其中输入案例编号，如下所示：

14-12345

用户将他们的搜索提交到主页的索引控制器。控制器解析搜索并重定向到“案例”操作。此操作轮询数据库以获取案例详细信息，并返回案例视图。

此搜索有效 - 用户可以在案例详细信息页面上查看搜索结果。但是，已收到请求，因此用户也可以从案例详细信息页面搜索案例。

我无法使新请求生效。我尝试过使用 Web API（这真的很浪费时间，因为我想返回整个视图，而不仅仅是搜索数据），但我未能创建合适的控制器/视图组合来处理我的数据。我通常会尝试使用现有的控制器（其中包含要搜索的代码）和案例详细信息视图。

分解碎片...

模型数据存储在viewmodel文件中：

public class PortalCaseView
{
    public DocketCase CaseInfo { get; set; }
    public List<CaseNote> Notes { get; set; }
    public string Search { get; set; }

    ...other various variable declarations, etc
}

Index.cshtml 文件是网站的主页/主登录页面。用户可以通过转到某个部分进行搜索来搜索案例详细信息（此处查看代码）：

<div class="tile">
    <span>Search by Case Number</span>
        @Html.EditorFor(x => x.Search)
        <a class="m-btn green-stripe" href="javascript:submitForm();" style="color: #444;
        text-decoration: none;">Submit<i class="icon-hdd"></i></a> <a class="m-btn red-stripe"
        href="javascript:toggleSearch();" style="color: #444; text-decoration: none;">Cancel<i
        class="icon-remove"></i></a>
</div>

（提交结果会给出一个提交命令，它将搜索发布到控制器。）

PortalController.cs 控制器文件指导对主页的请求。它的Index 方法抓取Search 变量，并重定向到一个Case 动作来处理：

索引

    if (!string.IsNullOrWhiteSpace(viewmodel.Search))
    {
        ...
        return RedirectToAction("Case", new { Year = docketnumber[0], Sequence = docketnumber[1], J = viewmodel.JudgeCode });
    }

案例

    [HttpGet]
    public ActionResult Case(int Year, int Sequence, string J)
    {
        ...various declarations and requests to get db information...

        return View(vm); //vm is a viewmodel with info for the case view
    }

    [HttpPost]
    public ActionResult Case(PortalCaseView vm)
    {
        return View(vm);
    }

* 当重定向到 Case 操作完成后，Case.cshtml 视图会加载必要的详细信息。现在需要从案例视图进行搜索，我在案例视图中添加了一个部分以进行“按需”搜索查询：

    <textarea id="searchForCase" style="width: 150px;"></textarea>
    <a class="m-btn green-stripe" href="javascript:searchCase();" style="color: #444;
            text-decoration: none;">Search<i class="icon-hdd"></i></a>

问题从这里开始。在典型运行期间，Ajax/JSON 代码构建对控制器操作的回调。然后，执行该操作（通常针对存储在文件或文件夹中的数据）。返回一个视图，然后页面刷新。（这是用户使用网站的时候。）我的新自定义代码的工作方式不同。

我的自定义 searchCase() 函数采用用户输入的案例编号来搜索它（它返回到原始 PortalController.cs 文件中的索引操作):

    var searchCase = function () {
        var textArea = document.getElementById("searchForCase");
        var txt = String(textArea.value);

        jQuery.ajax({
            type: "POST",
            url: "@Url.Action("Index","Portal")",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify({ fromCaseSearch: txt }),
            success: function (data) {
            alert(data);
            },
            failure: function (errMsg) {
            alert(errMsg);
            }
        });

        $('form').submit();
    }

（注意：我已经尝试将数据类型从 json 更改为 html；我假设我可能需要使用内容类型）

我从这一点开始跟踪进度。该网站返回到 PortalController.cs 和 Index 操作（就像一个好的 POST 一样），然后接受用户提供的搜索查询。因为当我尝试像以前一样重定向到 Case 操作时它不属于 Index 操作，所以我添加了一个 if 语句来直接从案例详细信息视图处理搜索查询：

    if (!string.IsNullOrEmpty(fromCaseSearch))
    {
        System.Web.HttpContext.Current.Session.Clear(); 
        //forget why I put that clear request there, but I do 
        //use session state variables, so I might need to clear 
        //them when searching from scratch - if they exist

        viewmodel = new PortalIndexView();
        viewmodel.Search = fromCaseSearch;

        ...initialization and parsing for search...

        ...searching for and loading data from database(s)...

        ModelState.Clear(); //was hoping this would "refresh" view
                            //...this didn't work either
        return View("Case", vm); //forced website to return
                                 //case view with viewmodel data
                                 //...this actually starts loading
                                 //the case view
    }

这确实有效……在一定程度上。数据以相同的方式处理，案例视图正常加载。但是，即使在跟踪加载过程之后（并看到模型变量已发送到视图），页面也不会使用新信息进行更新。

所以，这就是我卡住的地方。我尝试过调整一些设置（甚至认为问题可能出在 web.config 文件中），但是当我遇到这样的问题时，通常为我解决问题的方法是找出我在这里做错了什么（或在问题的一般附近 - 当我首先解决简单的问题时通常会出现答案。

一些最后的事情：

PortalController.cs（控制器）输出到 Case.cshtml（案例详细信息视图）。当右击 View controller 动作时，它会重定向回 PortalController.cs（登陆页面的主控制器）。
没有其他控制者共享 Case.cshtml。
没有 CaseController.cs 文件。看起来我的前任只是简单地创建了搜索“重定向”，认为用户只会从主页搜索（直到现在他们都这样做了）。
最后的想法？也许我也应该为我的新代码考虑 HTTPGet 和 HTTPPost 操作。不确定...脑子很糊...

当然，由于这是一个工作项目，我只能提供这么多细节，但我很乐意在这一点上提出建议。

更新：我的问题可能是因为我的案例详细信息视图中没有包含@using (Html.BeginForm(...)) 行吗？我注意到没有一个。您需要一个能够在相关控制器中进行正式的 POST 操作吗？

另一个澄清：我使用 Ajax/JSON 将数据从案例视图传递回控制器，因为我无法让页面只是“提交”（在 Javascript/JQuery 代码中，$('form').submit() 确实如此根本不起作用）。我想知道它是否与Web API有关。（有一个名为 CaseNoteController.cs 的 Web API 文件处理添加到案例中的注释。当我尝试使用 Web API 并可能使用它返回视图时，我有一个测试 api调用使案例详细信息视图页面毫不费力地刷新；我只是不知道如何让它满足我的需要。）

【问题讨论】：

标签： javascript jquery asp.net-mvc-4 view

【解决方案1】：

问题解决了（我的错）。我缺乏经验让我无法早点弄清楚这一点：

我最终不需要案例视图中的searchCase 函数。原因：我没有将我的 Case 视图包装在 @using(Html.BeginForm()) 代码块中，这意味着我的页面没有发布结果（无论我多么努力）
我没有注意我的 PortalController.cs 文件，该文件已经有我的 Case 的 HttpGet 和 HttpPost 变体 动作。（HttpPost 操作完全是空的，除了返回视图。这就解释了为什么页面无法加载和显示任何内容，更不用说我的下一个案例搜索的结果了。）
一旦我纠正了这些问题（并调整了一些其他按钮，以便在我提交文档时它们不会自动发布或尝试运行），代码终于工作了！赞美神。不需要返回控制器的复杂或奇怪的路径 - 之后事情发生得很快。

（现在要剪掉一大堆脚手架和其他不必要的代码......）

【讨论】：