Предотвратить запуск JavaScript на странице загрузки

Question

У меня есть приложение MVC с JavaScript в теле страницы cshtml. В 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 секунд в реальном коде, поэтому я хочу предотвратить ожидание каждый раз при загрузке страницы (ожидание должно быть только в том случае, если пользователь нажимает кнопку).

Самое странное, что Model.AddTekst() выполняется ДАЖЕ, если я прокомментирую это в функции javascript с помощью '//'.

Кто-нибудь знает, как избежать нежелательного выполнения Model.Method?

Answer 1

Попробуйте использовать 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();
 });

Answer 2

Поведение, которое вы испытываете, совсем не странно. @Model.AddText() выполняется в бэкэнде после компиляции представления, что является нормальным поведением.

Комментарий в бритве будет выглядеть так

@* Comment goes here *@

Но это не то, чего вы хотите достичь.

Боюсь, ваш подход не сработает, поскольку вы не можете выполнить метод на модели асинхронно.

Я предлагаю вам взглянуть на Ajax.BeginForm - больше информации здесь

Вы можете реализовать действие контроллера в бэкэнде, которое будет возвращать текст, который вы хотите отобразить при отправке формы.