Question

我在cshtml页面的主体中具有带JavaScript的MVC应用程序。在Model中，我有一个返回字符串的方法，并且我希望在单击按钮时将该字符串添加到页面的某些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秒钟以上的时间，因此，我想避免每次页面加载时都等待（等待只能是用户点击按钮）。

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

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

Answer 1

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

剃刀中的评论看起来像这样

@* 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();
 });

防止JavaScript在加载页面上触发

2 个答案: