防止在加载页面上触发 javascript

Question

我在 cshtml 页面的正文中有带有 JavaScript 的 MVC 应用程序。在模型中，我有一个返回字符串的方法，我希望通过单击按钮将该字符串添加到页面上的某个 div 中。它可以工作，但是，每次我加载页面时都会触发该方法（我希望它仅在点击时触发。

代码如下：

型号：

public class TestJS
{
        public string Tekst1 { get; set; }
        public string Tekst2 { get; set; }

        public TestJS()
        {
            Tekst1 = "one";
            Tekst2 = "two";
        }

        public string AddTekst()
        {
            return "three (additional text from method)";
        }
}

控制器：

    public class TestJSController : Controller
        {
        // GET: TestJS
        public ActionResult Index()
        {
            Models.TestJS tjs = new Models.TestJS();
            return View(tjs);
        }
    }

查看：

@model TestJavaScript.Models.TestJS

@{
    ViewBag.Title = "Index";
}

<script type="text/javascript">
    function faddtekst() {
            whr = document.getElementById("div3");
            var t = '@Model.AddTekst()';
            whr.innerHTML += t;
    }
</script>


<h2>Testing JavaScript Firing</h2>

<p>
    First to fields:
    @Model.Tekst1;
    <br />
    @Model.Tekst2;
</p>
<form>
    <input type="button" value="Click to show Tekst3" onclick="faddtekst()" />
</form>
<br />
<hr />
<div id="div3">

</div>

我尝试将 JS 包装在 $(document).ready() 中，结果相同。

有人可能认为这是一种奇怪的方法，但是，我尝试执行的模型方法在实际代码中需要 10 秒以上，因此，我想防止每次页面加载时都等待（等待应该仅在用户点击按钮）。

最奇怪的是Model.AddTekst()即使我在javascript函数中用'//'注释它也会被执行。

有人知道如何避免不必要地执行Model.Method吗？

Answer 1

您遇到的行为一点也不奇怪。 @Model.AddText() 在视图编译后在后端执行，这是正常行为。

razor 中的评论看起来像这样

@* Comment goes here *@

但这不是你想要达到的。

恐怕您的方法行不通，因为您无法在模型上异步执行方法。

我建议你看看Ajax.BeginForm - 更多信息here

您可以在后端实现一个控制器操作，该操作将返回您希望在提交表单时显示的文本。

Answer 2

尝试使用 e.preventDefault() 来点击按钮。

<form>
    <input type="button" value="Click to show Tekst3" id="Show" />
</form>

Try with jQuery

 $(document).on("click", "#Show", function (e) {
     e.preventDefault();
     faddtekst();
 });