Question

这是我在这里的第一篇文章所以请宽容，

我正在努力使用@ Ajax.Something调用，它几乎正常工作。我得到了正确的结果，但没有在正确的视图中我放弃了内容，网址也发生了变化。

查看：

<p>Ajax result :</p>
<div id="Result">
    @{
        Html.RenderAction("_result");
    }
</div>

@Ajax.ActionLink("Update", "_result", new AjaxOptions
{
    InsertionMode = InsertionMode.Replace,
    UpdateTargetId = "Result",
    HttpMethod = "GET"
})

<p>normal vue : @DateTime.Now.ToLongTimeString()</p>


<h2>@Html.Encode(ViewData["Message"]) </h2>
<p>
    Page Rendered: @DateTime.Now.ToLongTimeString() 
</p>
<span id="status">No Status</span>
<br />
    @Ajax.ActionLink("Update Status", "GetStatus", new AjaxOptions{UpdateTargetId="status" })
<br /><br />
@using(Ajax.BeginForm("UpdateForm", new AjaxOptions{UpdateTargetId="textEntered"})) { 
@Html.TextBox("textBox1","Enter text")
    <input type="submit" value="Submit" /><br />
    <span id="textEntered">Nothing Entered</span>
}

部分vue _result：

<p> Ajax call worked</p>

<p>partial vue : @DateTime.Now.ToLongTimeString()</p>

控制器：

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

public ActionResult _result()
{
      return PartialView();
}

public string GetStatus()
{
      return "Status OK at " + DateTime.Now.ToLongTimeString();
}

public string UpdateForm(string textBox1)
{
       if (textBox1 != "Enter text")
       {
           return "You entered: \"" + textBox1.ToString() + "\" at " +
                    DateTime.Now.ToLongTimeString();
       }

            return String.Empty;
        }

截图：

主要加载vue：

Vue SimpleAjax

单击“更新：

后

_result

所以在某些方面我会调用正确的视图并显示它，但实际上并没有像预期的那样将其渲染为更新。

我仍然是Razor的新手，并且一般都是开发，但是我想知道什么时候它不起作用所以我可以解决它。我尝试了最简单的方法来测试这些ajax调用，采用不同的方法......目前似乎没有什么对我有用。

我很确定这让我感到愚蠢，因为我没有看到正确的证据。

因此，如果有人知道如何修复它，我正在尝试制作一个自动完成下拉列表，当然包括ajax调用，而且我被困在这里无法实现最简单的调用。< / p>

Answer 1

请确保您已安装并包含在捆绑jQuery Unobtrusive中。（nuget package here：https://www.nuget.org/packages/Microsoft.jQuery.Unobtrusive.Validation/）。此外，请确保您已启用客户端验证和不引人注目的javascript

<appSettings>
    <add key="ClientValidationEnabled" value="true"/>
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/>
</appSettings>

Answer 2

我复制了您的应用，进行了以下修改： 1）我已经安装了Microsoft.jQuery.Unobtrusive.Ajax和Microsoft.jQuery.Unobtrusive.Validation。在packages.config中：

<package id="Microsoft.jQuery.Unobtrusive.Ajax" version="3.2.3" targetFramework="net461" />
<package id="Microsoft.jQuery.Unobtrusive.Validation" version="3.2.3" targetFramework="net461" />

2）在_Layout.cshtml中（确保只包含一次js资源。同时，确保jqueryval为jquery-unobtrusive）：

    @Scripts.Render("~/bundles/jquery")    
    @Scripts.Render("~/bundles/jqueryval")    
    @Scripts.Render("~/bundles/jquery-unobtrusive")
    @Scripts.Render("~/bundles/bootstrap")

    @RenderSection("scripts", required: false)

3）在Bundle.Config中，我为不显眼的包添加了一个包：

bundles.Add(new ScriptBundle("~/bundles/jquery-unobtrusive")
            .Include("~/Scripts/jquery.unobtrusive-ajax.js")
            .Include("~/Scripts/jquery.validate.unobtrusive.js"));

4）在_result.cshtml中我添加了：

@{ Layout = null; }

无需其他修改即可使用

剃刀局部视图和ajax不令人耳目一新

2 个答案: