输入按钮的值应在单击事件后使用 jquery 更改

Question

我尝试在单击输入按钮后更改它的值。按钮本身是一个提交按钮，控制器通过 RedirectToAction 回到页面。我的问题是，我可以更改按钮的值，但是这个新值只显示一毫秒，然后它被设置回原来的值。脚本触发后页面是否重新加载？或者为什么脚本触发后按钮值被设置回来？

这是我的代码： 按钮：

@using (Html.BeginForm("StartNewM2OLIEProcess", "Patient", new { label = Model.PatientID }, FormMethod.Post))
        {
            <input type="submit" id="btnStartProcess" value="M²OLIE Prozess starten" class="btn btn-primary" />
        }

脚本

@section Scripts{

    <script type="text/javascript">
       
        $("#btnStartProcess").on('click', function () {
            var self = $(this);
            var errorMsg = '@errorMsg';
            if (errorMsg == '') {
                //self.attr('M2OLIE Prozess starten', 'Prozess gestartet');
                self.val('Prozess läuft...');
            }
            else {
                self.val("M²OLIE Prozess starten");
            }
        });

    </script>

    <script type="text/javascript">
    var message = '@message';
    if(message){
        alert(message);
    }
    </script>
}

所以脚本被正确触发，我可以使用调试器进行测试。而且我还可以看到在调试过程中按钮的值发生了变化，但是一旦脚本结束，值就会变回 Html 表单中定义的值。这里发生了什么？

Answer 1

当第一次点击时，jQuery事件被执行，然后页面被发送到action。 您必须发布页面或管理点击事件。

用你的脚本测试这段代码

$("form").submit(function (e) {
    e.preventDefault(); 
});

我给你举个例子，看看表单发布后的变化。

在控制器中

[HttpGet]
public ActionResult StartNewM2OLIEProcess()
{
    return View();
}
[HttpPost]
public ActionResult StartNewM2OLIEProcess(string myText)
{
    ViewBag.ButtonText = myText;
    return View();
}

在视图中

@{
    ViewBag.Title = "Test";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@using (Html.BeginForm("StartNewM2OLIEProcess", "Home", FormMethod.Post))
{
    string buttonValue = "M²OLIE Prozess starten";
    if (!string.IsNullOrEmpty(ViewBag.ButtonText))
    {
        buttonValue = ViewBag.ButtonText;
    }
    <input type="text" id="myText" name="myText" />
    <input type="submit" id="btnStartProcess" value="@buttonValue" class="btn btn-primary" />
}
<div id="myDiv" style="width:300px;height:50px;background:#FF5511;color:white;text-align:center;font-weight:bold;"></div>
@section scripts{
    <script>
       var result = '@(ViewBag.ButtonText)';
       if (result != null) {
           document.getElementById("myDiv").innerText = result;
       }
    </script>    
}